Все для веб-дизайнера
Как создать кнопочное меню для сайта на CSS3
Мы уже неоднократно рассказывали и писали о важности создания правильно-организованного меню на сайте. Порой главная страница может состоять только из одного элемента, и это будет навигация. В последнее время стали весьма популярны объемные элементы на сайте, к таким элементам относится и навигация. В данном уроке мы рассмотрим еще одно замечательное меню для сайта с помощью трансформаций css, которое состоит с объемных кнопок и иконок. Все выглядит достаточно привлекательно и напоминает кнопки старого магнитофона.
Данное меню достаточно простое, что позволит не нагромождать внешний вид сайта, кроме этого его можно с легкостью отредактировать на свое усмотрение. И так, приступим.
Шаг 1. HTML
Для начала нам необходимо создать разметку, мы будем использовать контейнер с организованной в нем структурой. Вот что мы имеем.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <ul id="nav"> <li><a href="#" class="icon-home" title="Главная"></a></li> <li class="active"><a href="#" class="icon-camera" title="Фото"></a></li> <li><a href="#" class="icon-mail" title="Почта"></a></li> <li><a href="#" class="icon-comment" title="Комменты"></a></li> <li><a href="#" class="icon-user" title="Профиль"></a></li> <li><a href="#" class="icon-cog" title="Настройки"></a></li> </ul> </div> |
Все достаточно просто, мы используем class=»icon-» для присвоения определенной иконки со стилей. И так, перейдем к следующему шагу.
Шаг 2. 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 |
body ul#nav { font-size: 20px; display: inline-block; list-style: none; position: relative; padding: 0; -webkit-box-shadow: 0 0.5em 12px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 0.5em 12px rgba(0, 0, 0, 0.75); box-shadow: 0 0.5em 12px rgba(0, 0, 0, 0.75); } body ul#nav li { display: block; position: relative; z-index: 20; float: left; } body ul#nav li:hover:before { top: 2px; -webkit-box-shadow: inset 0 0 1.5em 0 rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0 0 1.5em 0 rgba(0, 0, 0, 0.75); box-shadow: inset 0 0 1.5em 0 rgba(0, 0, 0, 0.75); } body ul#nav li:active a, body ul#nav li.active a { padding-top: 18px; padding-bottom: 5px; color: #00bff3; text-shadow: 0 -1px 0 #000000, 0 0 1em #00bff3; } body ul#nav li:active:before, body ul#nav li.active:before { top: 7px; background: #2d2d2d; |
Полные стили, более детально, можно просмотреть в исходниках.
Шаг 3. JavaScript
Нам необходимо зафиксировать активное положение кнопки, для этого мы будем использовать маленький фрагмент скриптов. За активный пункт будет отвечать следующий код.
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $("#nav li").click(function(){ $("#nav .active").removeClass("active"); $(this).addClass("active"); }); }); |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 16.12.2012 в 17:59, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...