22:45 Анимированное меню | |
Установка: 1. Для начала установим стили для меню:
Code <a href="http://microgig.net.ru/fails_load/MenuUSERNAME.html" target="_blank" class="infid">Демо</a> <style type="text/css"> #menu { background: #3e3e3e; padding: 7px 25px 7px 25px; text-align: center; border: 5px solid #00b4ff; } #menu a { font-variant: small-caps; text-decoration: none; font-weight: bold; color: white; font-size: 10pt; padding: 7px; font-family: Tahoma; } #menu a:hover { background: #b52828; } </style> 2. Затем поставим скрипт, который будет "растворять" пункт меню при наведении на него мышкой:
Code <script type="text/javascript"> $('#menu a').hover(function () { $(this).animate({ opacity: 0.5 }, 1000); }, function () { $(this).animate({ opacity: 1 }, 1000); }); </script> 3. Ну и само меню:
Code <div id="menu"> <a href="/"> главная </a> <a href="/forum"> форум </a> <a href="/load"> софт </a> <a href="/publ"> фильмы </a> <a href="/index/8"> профиль </a> <a href="/index/10"> выход </a> </div> Ну вот и всё. | |
|
Всего комментариев: 0 | |