Выпадающее анимированное меню на CSS3

Несомненно, что особенности CSS3 (трансформации и анимации) позволяют придать дизайну проекта более утонченный вид. В данном уроке мы построим анимированное выпадающее меню на CSS3 с некоторыми интересными эффектами.

В данном меню будет использоваться следующий эффект при выводе подпунктов:

 

HTML

Структура HTML кода для меню используется стандартная для таких случаев:

<ul id="menu">
	<li><a href="/">Главная</a></li>

	<li>
		<a href="/">Категории</a>
		<ul>
			<li><a href="/">CSS</a></li>
			<li><a href="/">Графический дизайн</a></li>
			<li><a href="/">Инструментарий</a></li>
			<li><a href="/">Веб дизайн</a></li>
		</ul>
	</li>
	<li><a href="/">Проекты</a></li>
	<li><a href="/">О нас</a></li>
	<li><a href="/">Контакты</a></li>
</ul>

 

CSS

Выполняем сброс для элемента ul:

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

Элемент #menu является основным для нашего меню. Градиенты, тени и скругленные углы помогут нам создать следующее оформление для него:

#menu {
        width: 960px;
        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:hover > a . Он работает следующим образом: выбрать элемент “a”, который является потомком элемента “li” ; элемент “li” должен иметь предка “#menu”.

#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 */
        color: #fafafa;
}


С помощью трансформаций CSS3 мы можем анимировать изменения свойств CSS, таких как  margin или opacity. Воспользуемся данной возможностью для оформления эффектного появления подменю:

#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;
}

 

jQuery

IE6 требует дополнительных действий:

$(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');
                })
  }
});

Так как псевдо-класс :hover не работает в других элементах, кроме ссылки, нужно добавить небольшой код jQuery для устранения проблемы.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/oa_f2dFYA7U/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Выпадающее анимированное меню на CSS3 | | 2012-06-19 12:01:28 | | Статьи Web-мастеру | | Несомненно, что особенности CSS3 (трансформации и анимации) позволяют придать дизайну проекта более утонченный вид. В данном уроке мы построим анимированное выпадающее меню на CSS3 с некоторыми | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: