Выпадающее многоуровневое меню с анимацией для вашего сайта uCoz на css3 и js


Выпадающее многоуровневое меню с анимацией для вашего сайта uCoz ...

917
10 из 10
Проголосовало: 2






Я убежден, что CSS3 функции, такие как переходы, анимация и трансформация могут добавить дополнительную привлекательность многим элементам в Ваших проектах.

В этой статье вы увидите, как можно построить симпатичное, анимированное выпадающее меню при помощи одного только CSS3. Возможности CSS3 по созданию таких вещей как градиент, тени и закругленные углы легко позволят нам реализовать это меню...

Обратите внимание на селектор #menu li:hover>a. Это, пожалуй, наиболее важный CSS трюк для этого выпадающего меню.

Установка

1) Непосредственно код самого меню - вставлять куда необходимо:

Код
<ul id="menu">  
  <li><a href="">Ссылка1</a></li>  

  <li>  
  <a href="">Ссылка2</a>  
  <ul>  
  <li>  
  <a href="">Раздел1</a>  
  <ul>  
  <li><a href="">Подраздел1</a></li>  
  <li><a href="">Подраздел2</a></li>  
  <li><a href="">Подраздел3</a></li>  
  <li><a href="">Подраздел4</a></li>  
  </ul>  
  </li>  
  <li>  
  <a href="">Раздел2</a>  

  <ul>  
  <li><a href="">Подраздел1</a></li>  
  <li><a href="">Подраздел2</a></li>  
  <li><a href="">Подраздел3</a></li>  
  <li><a href="">Подраздел4</a></li>  
  </ul>  
  </li>  

  <li>  
  <a href="">Раздел3</a>  
  <ul>  
  <li><a href="">Подраздел1</a></li>  
  <li><a href="">Подраздел2</a></li>  
  <li><a href="">Подраздел3</a></li>  
  <li><a href="">Подраздел4</a></li>  

  </ul>  
  </li>  
  <li>  
  <a href="">Раздел4</a>  
  <ul>  
  <li><a href="">Подраздел1</a></li>  
  <li><a href="">Подраздел2</a></li>  
  <li><a href="">Подраздел3</a></li>  
  <li><a href="">Подраздел4</a></li>  
  </ul>  
  </li>  
  </ul>  
  </li>  
  <li>  
  <a href="">webo4ka.ru</a>  
  <ul>  

  <li>  
  <a href="">Раздел1</a>  
  <ul>  
  <li>  
  <a href="">Подраздел1</a>  
  <ul>  
  <li><a href="">Подраздел11</a></li>  
  <li><a href="">Подраздел12</a></li>  
  <li><a href="">Подраздел13</a></li>  
  </ul>  
  </li>  
  <li>  
  <a href="">Подраздел2</a>  
  <ul>  
  <li><a href="">Подраздел21</a></li>  
  <li><a href="">Подраздел22</a></li>  
  <li><a href="">Подраздел23</a></li>  
  </ul>  
  </li>  
  <li>  
  <a href="">Подраздел3</a>  
  <ul>  
  <li><a href="">Подраздел31</a></li>  
  <li><a href="">Подраздел32</a></li>  

  <li><a href="">Подраздел33</a></li>  
  </ul>  
  </li>  
  </ul>  
  </li>  
  <li>  
  <a href="">Раздел2</a>  
  <ul>  
  <li>  

  <a href="">Подраздел21</a>  
  <ul>  
  <li><a href="">Подраздел 211</a></li>  
  <li><a href="">Подраздел 212</a></li>  
  <li><a href="">Подраздел 213</a></li>  
  </ul>  
  </li>  

  <li>  
  <a href="">Подраздел22</a>  
  <ul>  
  <li><a href="">Подраздел 221</a></li>  
  <li><a href="">Подраздел 222</a></li>  
  <li><a href="">Подраздел 223</a></li>  
  </ul>  
  </li>  

  <li>  
  <a href="">Подраздел 23</a>  
  <ul>  
  <li><a href="">Подраздел 231</a></li>  
  <li><a href="">Подраздел 232</a></li>  
  <li><a href="">Подраздел 233</a></li>  
  </ul>  
  </li>  

  </ul>  
  </li>  
  <li>  
  <a href="">Раздел3</a>  
  <ul>  
  <li>  
  <a href="">Подраздел31</a>  
  <ul>  

  <li><a href="">Подраздел 311</a></li>  
  <li><a href="">Подраздел 312</a></li>  
  <li><a href="">Подраздел 313</a></li>  
  </ul>  
  </li>  
  <li>  
  <a href="">Подраздел 32</a>  

  <ul>  
  <li><a href="">Подраздел 321</a></li>  
  <li><a href="">Подраздел 322</a></li>  
  <li><a href="">Подраздел 323</a></li>  
  </ul>  
  </li>  
  <li>  
  <a href="">Подраздел 33</a>  

  <ul>  
  <li><a href="">Подраздел 331</a></li>  
  <li><a href="">Подраздел 332</a></li>  
  <li><a href="">Подраздел 333</a></li>  
  </ul>  
  </li>  
  </ul>  
  </li>  

  </ul>  
  </li>  
  <li><a href="">Ссылка4</a></li>  
  <li><a href="">Ссылка5</a></li>  
</ul>


2) Стили в Css сайта:

Код
#menu, #menu ul {  
  margin: 0;  
  padding: 0;  
  list-style: none;  
}  

#menu {  
  width: 100%;  
  margin: 60px auto;  
  border: 1px solid #222;  
  background-color: #111;  
  background-image: -moz-linear-gradient(#444, #111);  
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));  
  background-image: -webkit-linear-gradient(#444, #111);  
  background-image: -o-linear-gradient(#444, #111);  
  background-image: -ms-linear-gradient(#444, #111);  
  background-image: linear-gradient(#444, #111);  
  -moz-border-radius: 6px;  
  -webkit-border-radius: 6px;  
  border-radius: 6px;  
  -moz-box-shadow: 0 1px 1px #777;  
  -webkit-box-shadow: 0 1px 1px #777;  
  box-shadow: 0 1px 1px #777;  
}  

#menu:before,  
#menu:after {  
  content: "";  
  display: table;  
}  
#menu:after {  
  clear: both;  
}  
#menu {  
  zoom:1;  
}  

#menu li {  
  float: left;  
  border-right: 1px solid #222;  
  -moz-box-shadow: 1px 0 0 #444;  
  -webkit-box-shadow: 1px 0 0 #444;  
  box-shadow: 1px 0 0 #444;  
  position: relative;  
}  
#menu a {  
  float: left;  
  padding: 12px 30px;  
  color: #999;  
  text-transform: uppercase;  
  font: bold 12px Arial, Helvetica;  
  text-decoration: none;  
  text-shadow: 0 1px 0 #000;  
}  
#menu li:hover > a {  
  color: #fafafa;  
}  
*html #menu li a:hover { /* IE6 only */  
  color: #fafafa;  
}  

#menu ul {  
  margin: 20px 0 0 0;  
  _margin: 0; /*IE6 only*/  
  opacity: 0;  
  visibility: hidden;  
  position: absolute;  
  top: 38px;  
  left: 0;  
  z-index: 9999;  
  background: #444;  
  background: -moz-linear-gradient(#444, #111);  
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
  background: -webkit-linear-gradient(#444, #111);  
  background: -o-linear-gradient(#444, #111);  
  background: -ms-linear-gradient(#444, #111);  
  background: linear-gradient(#444, #111);  
  -moz-box-shadow: 0 -1px rgba(255,255,255,.3);  
  -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
  box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
  -moz-border-radius: 3px;  
  -webkit-border-radius: 3px;  
  border-radius: 3px;  
  -webkit-transition: all .2s ease-in-out;  
  -moz-transition: all .2s ease-in-out;  
  -ms-transition: all .2s ease-in-out;  
  -o-transition: all .2s ease-in-out;  
  transition: all .2s ease-in-out;  
}  
#menu li:hover > ul {  
  opacity: 1;  
  visibility: visible;  
  margin: 0;  
}  
#menu ul ul {  
  top: 0;  
  left: 150px;  
  margin: 0 0 0 20px;  
  _margin: 0; /*IE6 only*/  
  -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);  
  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);  
  box-shadow: -1px 0 0 rgba(255,255,255,.3);  
}  
#menu ul li {  
  float: none;  
  display: block;  
  border: 0;  
  _line-height: 0; /*IE6 only*/  
  -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;  
  -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;  
  box-shadow: 0 1px 0 #111, 0 2px 0 #666;  
}  
#menu ul li:last-child {  
  -moz-box-shadow: none;  
  -webkit-box-shadow: none;  
  box-shadow: none;  
}  
#menu ul a {  
  padding: 10px;  
  width: 130px;  
  _height: 10px; /*IE6 only*/  
  display: block;  
  white-space: nowrap;  
  float: none;  
  text-transform: none;  
}  
#menu ul a:hover {  
  background-color: #0186ba;  
  background-image: -moz-linear-gradient(#04acec, #0186ba);  
  background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));  
  background-image: -webkit-linear-gradient(#04acec, #0186ba);  
  background-image: -o-linear-gradient(#04acec, #0186ba);  
  background-image: -ms-linear-gradient(#04acec, #0186ba);  
  background-image: linear-gradient(#04acec, #0186ba);  
}  

#menu ul li:first-child > a {  
  -moz-border-radius: 3px 3px 0 0;  
  -webkit-border-radius: 3px 3px 0 0;  
  border-radius: 3px 3px 0 0;  
}  
#menu ul li:first-child > a:after {  
  content: '';  
  position: absolute;  
  left: 40px;  
  top: -6px;  
  border-left: 6px solid transparent;  
  border-right: 6px solid transparent;  
  border-bottom: 6px solid #444;  
}  
#menu ul ul li:first-child a:after {  
  left: -6px;  
  top: 50%;  
  margin-top: -6px;  
  border-left: 0;  
  border-bottom: 6px solid transparent;  
  border-top: 6px solid transparent;  
  border-right: 6px solid #3b3b3b;  
}  
#menu ul li:first-child a:hover:after {  
  border-bottom-color: #04acec;  
}  

#menu ul ul li:first-child a:hover:after {  
  border-right-color: #0299d3;  
  border-bottom-color: transparent;  
}  
#menu ul li:last-child > a {  
  -moz-border-radius: 0 0 3px 3px;  
  -webkit-border-radius: 0 0 3px 3px;  
  border-radius: 0 0 3px 3px;  
}


3) Подключаем на странице, где размещено меню:

Данное меню протестировано в Firefox 8, Chrome 15, Opera 11.52, Safari и IE7, вообщем оно работает во всех популярных современных браузерах, но если вам нужно добавить поддержку также IE6, то без использования JavaScript не обойтись.

Код

<script type="text/javascript">  
  $(function() {  
  if ($.browser.msie && $.browser.version.substr(0,1)<7)  
  {  
  $('li').has('ul').mouseover(function(){  
  $(this).children('ul').css('visibility','visible');  
  }).mouseout(function(){  
  $(this).children('ul').css('visibility','hidden');  
  })  
  }  
  });  
</script>


Готово!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 3

BALCETUL
+1
BALCETUL написал: Написано 12 Ноября 2014 в 01:46
Комментарий №3
на это смахивает
http://webo4ka.ru/load/46-1-0-2171

k43
+1
k43 написал: Написано 08 Ноября 2014 в 13:20
Комментарий №1
это уже есть

Вовчик
0
Вовчик написал: Написано 08 Ноября 2014 в 15:50
Комментарий №2
дай ссыль, не помню)

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    203
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 4
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: