Навигационное меню с помощью CSS3

В этом уроке мы сделаем яркое меню с анимированными выпадающими подпунктами, используя только CSS3 и Font Awesome шрифт иконок. Данный шрифт отображает иконки вместо букв, таким образом мы получим красивые векторные изображения для нашего меню.

HTML

Html разметка будущего меню:

<nav id="colorNav">
    <ul>
        <li>
            <a href="#"></a>
            <ul>
                <li><a href="#">Dropdown item 1</a></li>
                <li><a href="#">Dropdown item 2</a></li>
                <!-- выпадающий список -->
            </ul>
        </li>
  
        <!-- элементы меню -->
  
    </ul>
</nav>

Каждый пункт меню это элемент списка <ul>. Внутри него есть ссылка с CSS классом для иконки и другой список, который будет показан при наведении как выпадающее меню.

CSS

Как видно в нашей html разметке мы имеем вложенные неупорядоченные списки (ul), поэтому мы должны внимательно писать наш CSS код. Чтобы наши списки стилизовались правильно существует специальный CSS селектор для потомков «>»:

#colorNav > ul{
    width: 450px;
    margin:0 auto;
}

Данный код ограничивает ширину и отступы только списка, который является прямым потомком #colorNav. Рассмотрим код самих элементов меню:

#colorNav > ul > li{ /* стилизация только родительских элементов li */
    list-style: none;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
    display: inline-block;
    line-height: 1;
    margin: 1px;
    border-radius: 3px;
    position:relative;
}

Задаем параметр display inline-block для отображения элементов меню в одну строку, и задаем position:relative для правильного отображения выпадающего списка. Элементы anchor (<a>) будут содержать иконки.

#colorNav > ul > li > a{
    color:inherit;
    text-decoration:none !important;
    font-size:24px;
    padding: 25px;
}

Перейдем к выпадающим спискам, определим CSS свойство transitition. Изначально установи максимальную высоту равную 0, чтобы спрятать список, а при наведении анимируем высоту, увеличивая её, таким образом список плавно появится.

#colorNav li ul{
    position:absolute;
    list-style:none;
    text-align:center;
    width:180px;
    left:50%;
    margin-left:-90px;
    top:70px;
    font:bold 12px 'Open Sans Condensed', sans-serif;
  
    max-height:0px;
    overflow:hidden;
  
    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
}

И запуск анимации:

#colorNav li:hover ul{
    max-height:200px;
}

Если ваш выпадающий список должен содержать больше элементов, необходимо увеличить высоту (200px), к сожалению нет способа только с помощью CSS вычислить высоту блока, поэтому придется вручную менять значение.

Теперь стилизуем элементы выпадающего списка:

#colorNav li ul li{
    background-color:#313131;
}
  
#colorNav li ul li a{
    padding:12px;
    color:#fff !important;
    text-decoration:none !important;
    display:block;
}
  
#colorNav li ul li:nth-child(odd){
    background-color:#363636;
}
  
#colorNav li ul li:hover{
    background-color:#444;
}
  
#colorNav li ul li:first-child{
    border-radius:3px 3px 0 0;
    margin-top:25px;
    position:relative;
}
  
#colorNav li ul li:first-child:before{
    content:'';
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}
  
#colorNav li ul li:last-child{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

Внесем немного разнообразия, сделаем элементы меню разноцветными:

#colorNav li.green{
    /* цвет элемента */
    background-color:#00c08b;
  
    /* цвет иконки */
    color:#127a5d;
}
  
#colorNav li.red{       background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{      background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{    background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{    background-color:#df6dc2;color:#9f3c85;}

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

На этом всё!

—

12.09.2016

coder

Навигационное меню с помощью CSS3

HTML

CSS

Комментарии