На портале уже 570 , зарегистрировано 9843 и написано 803 .
Замена "Подробн...
Новый вид новости в ...
Светлый шаблон для с...
Гостевая книга
Требуется персонал!
Главная страница Архив всех материалов Меню для uCoz сайта - uCoz menu Лава меню на CSS3

Лава меню на CSS3

  • Добавил: B_boy_VenOm
  • Дата: 2017-11-23, 5:38 PM
  • Комментариев: 1
  • Просмотров: 1152
Скриншот материала «Лава меню на CSS3»
Красивое лава меню для сайта. Благодаря CSS3 слайдер передвигается плавно, что не может не радовать глаз посетителя. Данный вариант имеет тёмную цветовую гамму, но вы всегда можете поменять под свой стиль.

Установка:

1. Там где хотим видеть вставляем:

Код

<ul id="nav">  
<li><a href="#">Главная</a></li>  
<li><a class="hsubs" href="#">Меню 1</a>  
<ul class="subs">  
<li><a href="#">Подменю 1</a></li>  
<li><a href="#">Подменю 2</a></li>  
<li><a href="#">Подменю 3</a></li>  
<li><a href="#">Подменю 4</a></li>  
<li><a href="#">Подменю 5</a></li>  
</ul>  
</li>  
<li><a class="hsubs" href="#">Меню 2</a>  
<ul class="subs">  
<li><a href="#">Подменю 2-1</a></li>  
<li><a href="#">Подменю 2-2</a></li>  
<li><a href="#">Подменю 2-3</a></li>  
<li><a href="#">Подменю 2-4</a></li>  
<li><a href="#">Подменю 2-5</a></li>  
<li><a href="#">Подменю 2-6</a></li>  
<li><a href="#">Подменю 2-7</a></li>  
<li><a href="#">Подменю 2-8</a></li>  
</ul>  
</li>  
<li><a class="hsubs" href="#">Меню 3</a>  
<ul class="subs">  
<li><a href="#">Подменю 3-1</a></li>  
<li><a href="#">Подменю 3-2</a></li>  
<li><a href="#">Подменю 3-3</a></li>  
<li><a href="#">Подменю 3-4</a></li>  
<li><a href="#">Подменю 3-5</a></li>  
</ul>  
</li>  
<li><a href="#">Меню 4</a></li>  
<li><a href="#">Меню 5</a></li>  
<li><a href="#">Меню 6</a></li>  
<li><a href="#">Меню 7</a></li>  
<div id="lavalamp"></div>  
</ul>


2. В таблицу стилей(CSS):
Код

#nav,#nav ul {  
  list-style: none outside none;  
  margin: 0;  
  padding: 0;  
}  
#nav {  
  background: url('http://megascripts.ru/demo/menu_na_css/menu_bg.png') no-repeat scroll 0 0 transparent;  
  clear: both;  
  font-size: 12px;  
  height: 58px;  
  padding: 0 0 0 9px;  
  position: relative;  
  width: 957px;  
}  
#nav ul {  
  background-color: #222;  
  border:1px solid #222;  
  border-radius: 0 5px 5px 5px;  
  border-width: 0 1px 1px;  
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);  
  left: -9999px;  
  overflow: hidden;  
  position: absolute;  
  top: -9999px;  
  z-index: 2;  

  -moz-transform: scaleY(0);  
  -ms-transform: scaleY(0);  
  -o-transform: scaleY(0);  
  -webkit-transform: scaleY(0);  
  transform: scaleY(0);  

  -moz-transform-origin: 0 0;  
  -ms-transform-origin: 0 0;  
  -o-transform-origin: 0 0;  
  -webkit-transform-origin: 0 0;  
  transform-origin: 0 0;  

  -moz-transition: -moz-transform 0.1s linear;  
  -ms-transition: -ms-transform 0.1s linear;  
  -o-transition: -o-transform 0.1s linear;  
  -webkit-transition: -webkit-transform 0.1s linear;  
  transition: transform 0.1s linear;  
}  
#nav li {  
  background: url('http://megascripts.ru/demo/menu_na_css/menu_line.png') no-repeat scroll right 5px transparent;  
  float: left;  
  position: relative;  
}  
#nav li a {  
  color: #FFFFFF;  
  display: block;  
  float: left;  
  font-weight: normal;  
  height: 30px;  
  padding: 23px 20px 0;  
  position: relative;  
  text-decoration: none;  
  text-shadow: 1px 1px 1px #000000;  
}  
#nav li:hover > a {  
  color: #00B4FF;  
}  
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {  
  background: none repeat scroll 0 0 #121212;  
  outline: 0 none;  
}  
#nav li:hover ul.subs {  
  left: 0;  
  top: 53px;  
  width: 180px;  

  -moz-transform: scaleY(1);  
  -ms-transform: scaleY(1);  
  -o-transform: scaleY(1);  
  -webkit-transform: scaleY(1);  
  transform: scaleY(1);  
}  
#nav ul li {  
  background: none;  
  width: 100%;  
}  
#nav ul li a {  
  float: none;  
}  
#nav ul li:hover > a {  
  background-color: #121212;  
  color: #00B4FF;  
}  
#lavalamp {  
  background: url('http://megascripts.ru/demo/menu_na_css/lavalamp.png') no-repeat scroll 0 0 transparent;  
  height: 16px;  
  left: 13px;  
  position: absolute;  
  top: 0px;  
  width: 64px;  

  -moz-transition: all 300ms ease;  
  -ms-transition: all 300ms ease;  
  -o-transition: all 300ms ease;  
  -webkit-transition: all 300ms ease;  
  transition: all 300ms ease;  
}  
#lavalamp:hover {  
  -moz-transition-duration: 3000s;  
  -ms-transition-duration: 3000s;  
  -o-transition-duration: 3000s;  
  -webkit-transition-duration: 3000s;  
  transition-duration: 3000s;  
}  
#nav li:nth-child(1):hover ~ #lavalamp {  
  left: 19px;  
}  
#nav li:nth-child(2):hover ~ #lavalamp {  
  left: 100px;  
}  
#nav li:nth-child(3):hover ~ #lavalamp {  
  left: 182px;  
}  
#nav li:nth-child(4):hover ~ #lavalamp {  
  left: 263px;  
}  
#nav li:nth-child(5):hover ~ #lavalamp {  
  left: 345px;  
}  
#nav li:nth-child(6):hover ~ #lavalamp {  
  left: 427px;  
}  
#nav li:nth-child(7):hover ~ #lavalamp {  
  left: 509px;  
}  
#nav li:nth-child(8):hover ~ #lavalamp {  
  left: 591px;  
}


Будьте внимательны! Этот материал «Лава меню на CSS3» из раздела «Меню для uCoz сайта - uCoz menu» является уникальной собственностью проекта www.ucozzz.ru, поэтому, при частичном или полном копировании, Вы обязаны установить ссылку на наш портал, как источник материала.
№1 medion123 написал: 2013-12-03 в 3:21 PM Спам
бывают что резкие не успел навести уже проскочил свою вкладку
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]