Пятница, 14.12.2018, 19:06
Приветствую Вас Гость | RSS
Главная | Регистрация | Вход

22:16
Меню анимированое

Установка:
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>

Автор: $USERNAME$
Источник: Megasoft.3dn.ru

Источник:
Просмотров: 138 | Добавил: H[o_0]LiGaN | Теги: CSS, javascript, анимация, html, меню, горизонталь | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Бесплатный хостинг uCozCopyright MyCorp © 2018