Меню - один из главных элементов на веб-странице. Практически на каждом сайте используется меню, хотя сегодня они настолько разнообразны, что некоторые даже сложно такими назвать. Сегодня мы попробуем сделать простое, но практичное вертикальное меню, используя только CSS и HTML.
HTML
Разметка для меню очень проста - вложенный список.
03 | <li><a href="#">HTML</a></li> |
04 | <li><a href="#">CSS</a></li> |
05 | <li><a href="#">jQuery</a></li> |
06 | <li><a href="#">PHP</a></li> |
07 | <li><a href="#"> Видео курс </a></li> |
СSS
Дальше идут наши стили. Я постарался добавить немного комментариев в них, и даже не знаю, что еще сказать тут. Все просто - настраиваем нужный нам вид меню, а потом с помощью селектора :hover подсвечуем наведенный элемент.
Обратите внимание: для эффекта округленных углов я использовал CSS3 эффект, который генерирует сайт //css3maker.com
27 | text-transform:uppercase; |
35 | border:solid 1px #006A35; |
36 | -moz-border-radius:10px; |
37 | -webkit-border-radius:10px; |
Готово!
Наше простое вертикальное меню готово. Дальше все зависит от вашей фантазии и потребностей. Часто бывает нужным добавить в такое меню подпункты, что делает его "аккордеон" меню. Читайте наши следующие статьи, что бы подробнее узнать о нем.
(
6 голосов. Рейтинг:
4,33 из 5)
Загрузка...
Метки: CSS3, HTML, меню, СSS
Рубрика: CSS, HTML
(6 голосов. Рейтинг: 4,33 из 5)
Загрузка...
Спасибо!
Красивое меню.
Пожалуйста, заходите еще
Здравствуйте! Отличный пример! Подскажите пожалуйста, как сделать из него аккордеон, для добавления пунктов подменю? Спасибо!
Круто!
Спасибо!
Подскажите, а как сделать подсвечивающую активную ссылку?
Извините за критику. Но больно уж простое получилось меню.
Согласен
Пост за 2012 год, что тут добавить.
Постараюсь скоро вернутся к своему блогу и наполнить его более актуальной информацией.
Спасибо за Ваш комментарий!