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

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

Шаг 1. HTML

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

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

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

Шаг 2. CSS

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

Полные стили, более детально, можно просмотреть в исходниках.

Шаг 3. JavaScript

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: