CSS3 горизонтальное выпадающее меню в стиле web 2.0
Представляю вашему вниманию замечательный пример реализации горизонтального выпадающего меню чисто на css.
Эффект плавного выпадания меню реализован при помощи css3 свойств transition и opacity, градиентная заливка ссылок категорий реализована css3 свойством gradient, тень текста свойством text-shadow никаких картинок нет, всё только на css.
Реализация меню не сложная, поэтому приведу сразу готовый код:
HTML реализация проста - маркированный список меню с вложенными в него маркированными списками категорий:
<ul class="nav">
<!--CSS3 горизонтальное выпадающее меню от http://megaweb.su/-->
<li>
<a href="http://megaweb.su/">Меню 1</a>
<ul class="sub1">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
<li class="p4">
<a href="http://megaweb.su/">Категория 4</a>
</li>
<li class="p5">
<a href="http://megaweb.su/">Категория 5</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Меню 2</a>
<ul class="sub2">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Меню 3</a>
<ul class="sub3">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
<li class="p4">
<a href="http://megaweb.su/">Категория 4</a>
</li>
<li class="p5">
<a href="http://megaweb.su/">Категория 5</a>
</li>
<li class="p6">
<a href="http://megaweb.su/">Категория 6</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Меню 4</a>
<ul class="sub4">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Меню 5</a>
<ul class="sub5">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
CSS реализация тоже простая:
/*CSS3 горизонтальное выпадающее меню от http://megaweb.su/*/
.nav, .nav ul {
padding:0;
margin:0;
list-style:none;
}
.nav {
position:relative;
width:540px;
margin:0 auto;
}
.nav ul {
position:absolute;
top:37px;
left:0;
height:0;
overflow:hidden;
}
.nav li {
float:left;
position:relative;
background:transparent;
}
.nav li a {
display:block;
line-height:35px;
padding:0 20px;
border:1px solid #444;
border-bottom-color:#000;
color: #999;
text-shadow: 1px -1px 1px #000;
text-decoration:none;
font-size:12px;
font-weight:bold;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.nav li:hover > a {
background:#666;
border-color:#888 #777 #444 #555;
color:#fff;
}
.nav li:hover ul.sub1 {
width:180px;
height:185px;
}
.nav li:hover ul.sub2 {
width:150px;
height:111px;
}
.nav li:hover ul.sub3 {
width:130px;
height:222px;
}
.nav li:hover ul.sub4 {
width:150px;
height:111px;
}
.nav li:hover ul.sub5 {
width:160px;
height:111px;
}
.nav ul li {
width:100%;
opacity:0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.nav li ul li.p1 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p2 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p3 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p4 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p5 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p6 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li:hover ul li {
opacity:1;
}
.nav li:hover ul li.p1 {
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.nav li:hover ul li.p2 {
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.nav li:hover ul li.p3 {
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.nav li:hover ul li.p4 {
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.nav li:hover ul li.p5 {
-webkit-transition-delay: 0.9s;
-moz-transition-delay: 0.9s;
-o-transition-delay: 0.9s;
transition-delay: 0.9s;
}
.nav li:hover ul li.p6 {
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
.nav ul li a {
background:#666;
border-color:#888 #777 #444 #555;
color:#bbb;
line-height:1px;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;
}
.nav li:hover ul li a {
line-height:35px;
}
.nav ul li a:hover {
background:#09c;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 25, 0));
}
* html .nav a {
border-color:#444 #444 #000 #444;
height:35px;
float:left;
}
.nav a:hover {
background:#666;
border-color:#888 #777 #444 #555;
color:#fff;
}
.nav a:hover ul.sub1 {
width:180px;
height:185px;
}
.nav a:hover ul.sub2 {
width:150px;
height:111px;
}
.nav a:hover ul.sub3 {
width:130px;
height:222px;
}
.nav a:hover ul.sub4 {
width:150px;
height:111px;
}
.nav a:hover ul.sub5 {
width:160px;
height:111px;
}
.nav a:hover ul li a {
line-height:35px;
height:35px;
float:none;
}
.clear {
clear:both;
height:0;
line-height:1px;
margin:0;
padding:0;
}
HTML код меню валидный DTD XHTML 1.0 Strict, меню корректно работает во всех современных браузерах поддерживающих прямо или через хаки (Что такое CSS хаки или Вендорные префиксы) css3 свойства transition, opacity, gradient и text-shadow.
Посмотреть пример CSS3 горизонтальное выпадающее меню
Понравилась новость CSS3 горизонтальное выпадающее меню в стиле web 2.0 на MegaWeb.su? Сохрани в закладках или распечатай!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на CSS3 горизонтальное выпадающее меню в стиле web 2.0 из категории Меню навигации
- Меню навигации ⋙ CSS3 увеличение картинки при наведении
- Меню навигации ⋙ Простое горизонтальное CSS3 слайдер меню
- Меню навигации ⋙ Выезжающее CSS3 меню
- Меню навигации ⋙ Горизонтальное Lavalamp меню на CSS3
- Меню навигации ⋙ Горизонтальная раздвижная CSS3 навигация
- Меню навигации ⋙ Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
- Меню навигации ⋙ Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации
- Меню навигации ⋙ Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки
- Меню навигации ⋙ Простое готовое к использованию горизонтальное выпадающее CSS меню
- Основы / CSS ⋙ Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.