Веб-дизайнеру
Веб-разработчику
Дополнительно
Красочное CSS3 навигационное меню с анимацией!
Скачать
Демо
В этом небольшом уроке мы будем создавать красочное навигационное меню, используя только CSS3 и шрифт со значками. Это вертикальное выпадающее меню отличается свое компактностью, не будет занимать много места на сайте, но при этом, смотриться довольно красиво и солидно. Предлагаю также посмотреть вращающееся меню на jquery, которое отличается своим эффектом вращения.
Как уже говорилось выше, мы используем шрифт иконок. Это означает, что Вы получаете довольно практичные, векторные значки, которые будут хорошо смотреться в любом браузере, который поддерживает HTML5 пользовательские шрифты (т.е. практически все из них).
Чтобы добавить значки, нужно всего лишь прописать нужный класс и значок будет добавлен с элементами потрясающих стилей :before.
HTML код
Вот работая html разметка кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<nav id="colorNav"> <ul> <li class="green"> <a href="#" class="icon-home"></a> <ul> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <!-- и так далее... --> </ul> </li> <!-- и другие пункты меню --> </ul> </nav> |
Каждый пункт главного меню является потомком самого верхнего, неупорядоченного списка. Первая внутри – это ссылка с классом значка (см. полный список классов для иконок ), и другой неупорядоченный список, который будет отображаться в виде вертикально выпадающего меню при наведении курсора мыши.
Хорошо, перейдем с дизайну.
CSS стили
Как видите выше HTML код, мы имеем неупорядоченные списки li, вложенные в основные ul, поэтому нам необходимо писать стили грамотно и осторожно.
|
1 2 3 4 |
#colorNav > ul{ width: 450px; margin:0 auto; } |
Это значение ограничивает ширину и отступ только первого неупорядоченного списка, который является прямым потомком нашего пункта #colorNav. Приняв это во внимание, давайте посмотрим что у нас получиться:
|
1 2 3 4 5 6 7 8 9 |
#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.
|
1 2 3 4 5 6 |
#colorNav > ul > li > a{ color:inherit; text-decoration:none !important; font-size:24px; padding: 25px; } |
Теперь мы можем идти дальше и разберемся с выпадающими пунктами меню. Здесь мы будет определять CSS3 переходы анимации. Мы будем устанавливать максимальную высоту maximum-height 0px, которая будет изначально скрывать выпадающее меню. При наведении, мы будем увеличивать значение maximum-height, что приведет к её постепенному показу:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#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; } |
И вот эффект анимации:
|
1 2 3 |
#colorNav li:hover ul{ max-height:200px; } |
Значение 200px является произвольным, поэтому придется его увеличивать, если Ваш выпадающий список будет содержать больше пунктов. К сожалению, нет единственного CSS способа определения высоты, поэтому мы должны её запрограммировать.
Следующий шаг заключается в стилизации выпадающих пунктов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
#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 цветов главного меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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. Это означает, что все настройки совершенно “прозрачны”, и Вы можете без проблем исправить их в одиночку.
Готово!
Итак, мы имеем то, что запланировали – выпадающее меню. Шрифт иконок будет отличным дополнением к Вашему набору инструментов веб-разработки. Поскольку они являются обычным шрифтом, Вы можете применить для них размер, цвет и тень текста, что очень удобно.
В этом уроке, для созданию этого навигационного меню, мы не используем ни изображения, ни скрипты JS, поэтому оно достаточно простое легкое, несмотря на креативный дизайн! Вы со мной согласны? Буду рад услышать Ваши отзывы в комментариях! Спасибо! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
@
Здравствуйте, простите я не совсем понял как это все делается?
Куда надо вводить все это именно?
И можно ли это использовать на уже доступном сайте с его шаблоном?
Здравствуйте! Да, конечно, Вы можете использовать это меню на своем сайте.
Для этого Вам необходимо просто добавить html код в нужное место, а также подключить необходимые css стили.
В зависимости от того, какая у Вас CMS (система управления сайтом), Вы можете внести изменения в шаблон Вашего сайта. Где именно Вы хотите добавить это меню?
@
Спасибо за то, что быстро откликнулись…
Мой сайт будет стоять на WordPresse.
И я новичок не знаю куда именно после каких строк надо вставлять эти html коды и куда в какую папку надо заливать этот сценарий, который скачал у вас.
Заранее благодарен за ответ…
Извините, за столь поздний ответ (был в отъезде).
На счет меню – все зависит от конкретного шаблона WordPress, который Вы собираетесь использовать, его кода и дизайна. Возможно придется немного доработать меню (уменьшить или поменять другие его части).
Поэтому, для того, чтобы я мог Вам помочь, мне нужно знать конкретные детали Вашего сайта, видеть код и структуру шаблона.
Если нужна будет конкретная помощь, обращайтесь в skype – vladmaxi1995.
@
А как прописать его из “правой стороны” сайта??)
/
Здравствуйте! Это можно сделать. но в двух слоях не объяснить:) , могу сказать ,что там это можно сделать, изменив стили. А именно убрав отображение меню
inline-blockа также изменитьwidth, и соответственно изменив стиль выпадающего списка, подтянув его к правой стороне меню.