В нашем новом уроке мы создадим новое стильное вертикальное многоцветное и кроссбраузерное меню CSS3 с 3D-анимацией (я использую свойства css3 для перехода, перспективы и преобразования) и чистый переключатель цвета css3. Это меню на основе UL-LI.
Вот образцы и загружаемый пакет:
Live Demo
скачать в упаковке
Хорошо, загрузите файлы примеров и давайте начнем кодировать!
Шаг 1. HTML
Как обычно, мы начнем с HTML. Вот HTML-код нашего меню. Как обычно — это опять-таки навигационное меню на основе UL-LI. Самым интересным, конечно, будут стили CSS.
index.html
<div class="container">
<span id="clr1"></span>
<span id="clr2"></span>
<span id="clr3"></span>
<span id="clr4"></span>
<span id="clr5"></span>
<span id="clr6"></span>
<div class="colorScheme">
<a href="#clr1" class="clr1"></a>
<a href="#clr2" class="clr2"></a>
<a href="#clr3" class="clr3"></a>
<a href="#clr4" class="clr4"></a>
<a href="#clr5" class="clr5"></a>
<a href="#clr6" class="clr6"></a>
</div>
<ul id="nav">
<li><a href="http://www.script-tutorials.com/">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="http://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/">Back</a></li>
</ul>
</div>
Шаг 2. CSS
Вот стили CSS нашего вертикального меню. Возможно, вы заметили — в нашем html у нас есть два CSS-файла: layout.css и menu.css. Первый (layout.css) содержит стили нашей демонстрационной страницы. Мы не публикуем эти стили в статье, но если вам нужно, вы можете найти эти стили в нашем пакете.
CSS / menu.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%;
}
/* colors */
.colorScheme {
list-style: none outside none;
overflow: hidden;
width: 120px;
}
.colorScheme a {
cursor: pointer;
float: left;
height: 30px;
margin: 0 5px 5px;
width: 30px;
}
.colorScheme .clr1 {
background-color: #8899AA;
}
.colorScheme .clr2 {
background-color: #aa889e;
}
.colorScheme .clr3 {
background-color: #8f88aa;
}
.colorScheme .clr4 {
background-color: #88aaaa;
}
.colorScheme .clr5 {
background-color: #88aa8a;
}
.colorScheme .clr6 {
background-color: #aaa188;
}
#clr1:target ~ #nav, #clr1:target ~ #nav ul {
background-color: #8899AA;
}
#clr2:target ~ #nav, #clr2:target ~ #nav ul {
background-color: #aa889e;
}
#clr3:target ~ #nav, #clr3:target ~ #nav ul {
background-color: #8f88aa;
}
#clr4:target ~ #nav, #clr4:target ~ #nav ul {
background-color: #88aaaa;
}
#clr5:target ~ #nav, #clr5:target ~ #nav ul {
background-color: #88aa8a;
}
#clr6:target ~ #nav, #clr6:target ~ #nav ul {
background-color: #aaa188;
}
#clr1:target ~ #nav li:hover > a {
background-color: #8899AA;
border-color: #8899AA;
}
#clr2:target ~ #nav li:hover > a {
background-color: #aa889e;
border-color: #aa889e;
}
#clr3:target ~ #nav li:hover > a {
background-color: #8f88aa;
border-color: #8f88aa;
}
#clr4:target ~ #nav li:hover > a {
background-color: #88aaaa;
border-color: #88aaaa;
}
#clr5:target ~ #nav li:hover > a {
background-color: #88aa8a;
border-color: #88aa8a;
}
#clr6:target ~ #nav li:hover > a {
background-color: #aaa188;
border-color: #aaa188;
}
Live Demo
скачать в упаковке
Вывод
Надеюсь, вам понравилось играть с новым меню 3D! Не забудьте оставить спасибо и оставить комментарий. 
Удачи!