Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.142.53.151
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Анимированное меню
Сообщение оставлено 29.05.2010 в 13:16:08 | Сообщение #1
[Пример]
Установка:

1. Для начала установим стили для меню:

Code
<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>
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика