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

Преимущество данной навигации состоит в его компактности, кроме этого меню является полностью адаптивным, что играет важную роль в современном вопросе сайтостроения. Итак, давайте приступим.

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

Шаг 1. HTML

У нас будет контейнер в котором будет содержаться вся иерархия меню, также мы заключим в классы подпункты:

Каждый новый подпункт у нас будем заключен тегом <ul>. С разметкой ничего сложно нет, теперь рассмотрим стили.

Как создать вертикальное меню для сайта RUDEBOX

Шаг 2. CSS

Здесь все интересное, для начала у нас будет подключено две библиотеки стилей, первая из которых это иконки, небольшая анимация, и шрифты, а вторая нам необходима для сброса стилей. Мы добавляем медиа-запросы, что позволит нам сделать навигацию адаптивной под различные экраны, свойство animation позволит нам сделать небольшую анимацию при наведении курсора мыши:

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

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

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