Главная страница » CSS » Как создать кнопочное меню для сайта на CSS3

Как создать кнопочное меню для сайта на CSS3

Мы уже неоднократно рассказывали и писали о важности создания правильно-организованного меню на сайте. Порой главная страница может состоять только из одного элемента, и это будет навигация. В последнее время стали весьма популярны объемные элементы на сайте, к таким элементам относится и навигация. В данном уроке мы рассмотрим еще одно замечательное меню для сайта с помощью трансформаций css, которое состоит с объемных кнопок и иконок. Все выглядит достаточно привлекательно и напоминает кнопки старого магнитофона.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Данное меню достаточно простое, что позволит не нагромождать внешний вид сайта, кроме этого его можно с легкостью отредактировать на свое усмотрение. И так, приступим.

Шаг 1. HTML

Для начала нам необходимо создать разметку, мы будем использовать контейнер с организованной в нем структурой. Вот что мы имеем.

</ul>

</div>

Все достаточно просто, мы используем class=»icon-» для присвоения определенной иконки со стилей. И так, перейдем к следующему шагу.

Как создать кнопочное меню для сайта на CSS3 | RUDEBOX

Шаг 2. CSS

Мы добавим некоторые базовые стили, градиенты, тени. Следует заметить, что не все браузеры будут поддерживать данные трансформации.

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

Нам необходимо зафиксировать активное положение кнопки, для этого мы будем использовать маленький фрагмент скриптов. За активный пункт будет отвечать следующий код.