На нашем блоге уже не раз публиковались уроки о том, как создать меню для сайта. Эта тема весьма актуальна и привлекает взор пользователей, ведь каждый хочет сделать свой блог лучше, придав к навигации некоторую изюминку которая заинтересует посетителя. В сегодняшнем уроке мы рассмотрим, как создать собственное выпадающее меню на CSS, при этом не используя JavaScript. Меню достаточно простое в создании, но будет отлично смотреться у вас на сайте.

 

Для начала мы создаем простую HTML-разметку, которая выглядит следующим образом:

Как видите, сетка меню является довольно простой, это позволит вам с легкостью добавлять новые пункты и подпункты.

Теперь рассмотрим стилизацию с помощью CSS, для нашего меню мы используем градиентную заливку linear-gradient, применив этот способ для различных браузеров, например: -moz-linear-gradient или -webkit-linear-gradien

Как вы заметили, наши активные вкладки определены зеленым цветом, для этого  мы так же будем использовать градиент, исходный код которого выглядит следующим образом:

Теперь перейдем к деталям, если вы обратили внимание на изображение в форме треугольника, отображающееся вместе с подменю. Это CSS форма, которая повышает юзабилити данной менюшки.

Чтобы добавить такой элемент необходимо использовать  псевдо-элемент :after:

Теперь учим понимать знаменитый и всеми любимый Internet Explorer, наше меню. Подменю отображается при наведении курсора на элемент li. Как вы знаете, IE не поддерживает событие наведения курсора, если элемент — не ссылка.

Конечно, скрипт можно и не подключать, тогда у нас будет отличное меню на CSS, но для читаемости всеми браузерами это необходимо сделать. Подключать скрипт мы будем с библиотеки сайта jquery.com. По этому особых трудностей не должно вызвать.