В данном руководстве речь пойдет о разработке привлекательного выпадающего меню при помощи кода CSS3 и иконического шрифта Font Awesome. Иконический шрифт – это, как уже понятно из термина, шрифт, в котором иконки выступают в роли символов. Это означает, что у вас есть возможность получить векторные иконки во всех браузерах, которые поддерживают пользовательские шрифты HTML5 (а значит, практически все браузеры). Для того чтобы добавить иконки к элементам, вам нужно лишь приписать классовое имя и иконку, которая будет добавлена, посредством элемента :before.
HTML-код
Вот разметка, с которой мы будем рабтоать:
Index.html
<nav id="colorNav"> <ul> <li class="green"> <a href="#" class="icon-home"></a> <ul> <li><a href="#">Dropdown item 1</a></li> <li><a href="#">Dropdown item 2</a></li> <!-- More dropdown options --> </ul> </li> <!-- More menu items --> </ul> </nav>Каждый пункт основного меню представляет собой дочерний элемент неупорядоченного списка. Внутри него будет ссылка с классом icon (полный список классов icon можно посмотреть здесь), и еще один неупорядоченный список, который будет отображен в качестве выпадающего списка при наведении курсором мыши.
CSS-код
Как видно во HTML-фрагменте выше, у нас есть неупорядоченные списки, вложенные в основной ul, поэтому нам нужно писать наш CSS-код с особым вниманием. Нам не нужно, чтобы стилизация верхнего UL пересекалась с последующими элементами. К счастью, именно для этого есть специально предназначенный селектор в css «>»:
assets/css/styles.css
#colorNav > ul{ width: 450px; margin:0 auto; }Это создает ограничение объявления ширины и полей только для первого неупорядоченного списка, который является прямым последователем нашего пункта #colorNav. Учитывая это, давайте посмотрим, как будут выглядеть сами пункты нашего меню:
#colorNav > ul > li{ /* will style only the top level 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; }Мы выставляем значение отображения inline-block для того, чтобы пункты списка отображались одной линией, а затем приписываем относительное позиционирование, чтобы у нас была возможность корректно сместить выпадающие списки. Анкорные элементы содержат иконки, указанные при помощи Font Awesome.
#colorNav > ul > li > a{ color:inherit; text-decoration:none !important; font-size:24px; padding: 25px; }Теперь мы можем продолжить с нашими выпадающими списками. Здесь мы будем определять CSS3-анимацию transition. Мы выставим maximum-height на 0 пикселей, что скроет выпадающий список. При наведении мы анимируем параметр max-height, выставив большее значение, которое приведет к тому, что список постепенно покажется:
#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; /* This is important for the show/hide CSS animation */ 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){ /* zebra stripes */ 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{ /* the pointer tip */ 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; }И, конечно же, нам никуда не деться от пестрых цветов. Предлагаем вам 5 версий:
#colorNav li.green{ /* This is the color of the menu item */ background-color:#00c08b; /* This is the color of the icon */ 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;}Стоит отметить, что при использовании иконических шрифтов для того, чтобы изменить цвет иконки, нам нужно лишь выставить параметр color. Это означает, что всё оформление, которое вы хотите выставить, можно реализовать посредством чистого кода CSS.
Готово!
Иконические шрифты – это отличное дополнение к набору инструментов любого веб-разработчика. Так как это, в принципе, простые шрифты, вы можете использовать параметры font-size, color и text-shadow. В этом примере мы не используем изображения и JS, поэтому у вас вряд ли возникнут проблемы с интеграцией примера в ваш существующий дизайн.
