Вертикальное поворотное меню с помощью CSS3

Сегодня мы рассмотрим еще одно необычное меню, сделанное с помощью CSS3. Идея данного меню заключается в том, что когда мы наводим курсор мыши на пункты меню, если в них есть дополнительные подпункты, они в буквальном смысле открываются, как-будто открыли дверь.

Для начала вам необходимо скачать исходник к данному меню.

Шаг 1. HTML

Во-первых подключим таблицу стилей CSS к странице между тегами :

<link href="css/menu.css" rel="stylesheet" type="text/css" />
Во-вторых разметим нашу страницу под данное меню, для этого вставим следующий код в нужное место HTML страницы:

<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a> <ul class="subs"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul class="subs"> <li><a href="#">Submenu 2-1</a></li> <li><a href="#">Submenu 2-2</a></li> <li><a href="#">Submenu 2-3</a></li> <li><a href="#">Submenu 2-4</a></li> <li><a href="#">Submenu 2-5</a></li> <li><a href="#">Submenu 2-6</a></li> <li><a href="#">Submenu 2-7</a></li> <li><a href="#">Submenu 2-8</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul class="subs"> <li><a href="#">Submenu 3-1</a></li> <li><a href="#">Submenu 3-2</a></li> <li><a href="#">Submenu 3-3</a></li> <li><a href="#">Submenu 3-4</a></li> <li><a href="#">Submenu 3-5</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> <li><a href="#">Back</a></li> </ul>

Меню будет находиться в неупорядоченном списке с уникальным идентификатором, также если вы хотите добавить подпункты к основному меню, то необходимо вставить еще один неупорядоченный список в нужный элемент пункта меню и задать ему необходимый класс "subs".

Шаг 2. CSS

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

#nav,#nav ul { background-color: #8899AA; list-style: none outside none; margin: 0; padding: 0; } #nav { display: block; padding: 5px; position: relative; width: 112px; -moz-perspective: 200px; -ms-perspective: 200px; -webkit-perspective: 200px; -o-perspective: 200px; perspective: 200px; } #nav ul { left: -9999px; opacity:0; overflow: hidden; padding: 5px; position: absolute; top: -9999px; -moz-transform: rotateY(70deg); -ms-transform: rotateY(70deg); -o-transform: rotateY(70deg); -webkit-transform: rotateY(70deg); transform: rotateY(70deg); -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.3s linear, opacity 0.3s linear; -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear; -o-transition: -o-transform 0.3s linear, opacity 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear; transition: transform 0.3s linear, opacity 0.3s linear; } #nav li { background-color: #FFFFFF; position: relative; } #nav > li { -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #nav li a { background-color: #AABBCC; border-color: #DDDDDD #555555 #555555 #DDDDDD; border-style: solid; border-width: 1px; color: #000000; display: block; font-size: 15px; padding: 8px 10px 8px 5px; text-decoration: none; width:95px; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } #nav li:hover > a { background-color: #8899AA; border-color: #8899AA; color: #FFFFFF; } #nav li:hover ul.subs { left: 114px; opacity:1; top: 0; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } #nav ul li { width: 100%; }
На этом мы закончим обзор данного меню, подробнее все рассмотреть можно в исходнике.
демо
скачать
источник