Навигационное меню с помощью CSS3
Здравствуйте, уважаемые читатели Easy-Code.ru. В этом уроке мы сделаем яркое меню с анимированными выпадающими подпунктами, используя только 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.
На этом всё!
Нет комментариев