Вертикальное меню на CSS 3

Сделаем вертикальное меню с возможностью переключения цвета и 3D эффектом при разворачивании подпунктов. Используется только CSS3.

 

Разметка HTML

Меню основано на типовой структуре с неупорядоченным списком. Перед меню вставим элементы для переключения цвета.

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/">Главная</a></li>
                <li><a 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 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 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="http://ruseller.com/lessons.php?rub=2&id=1405">К уроку</a></li>
            </ul>

        </div>

 

CSS

Стили меню содержатся в отдельном файле menu.css. В файле layout.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%;
}

/* Цвета */
.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;
}

Готово!


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

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

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



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

Вертикальное меню на CSS 3 | | 2012-06-19 11:59:09 | | Статьи Web-мастеру | | Сделаем вертикальное меню с возможностью переключения цвета и 3D эффектом при разворачивании подпунктов. Используется только CSS3. Разметка HTMLМеню основано на типовой структуре с неупорядоченным | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: