Вертикального выпадающего меню css

Вертикальное выпадающее меню на CSS и JS

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

1. Скачиваем файлы сайта

2. Подключаем стили, скрипты и шрифты

Это подключение всех необходимых библиотек и шрифта. Если вам не нужен такой шрифт — просто не подключайте его

3. Подключаем style.css

Можно подключить непосредственно файл css, вставив внутрь тега

а можно просто вставить необходимый css код в уже существующий файл

.menu-wrap {
background-color: #6968AB;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}
.menu-sidebar {
margin: 75px 0 80px 10px;
position: relative;
top: 70px;
}
.menu-sidebar li {
padding: 18px 22px 0;
}
.menu-sidebar li > a {
color: #f3f3f3;
font-size: 1.18em;
position: relative;
}
.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 100%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}
.menu-sidebar .menu-item-has-children {
position: relative;
}
.menu-sidebar .menu-item-has-children .sub-menu {
display: none;
}
.sidebar-menu-arrow::after {
content: "\f107";
font-family: 'FontAwesome';
padding: 10px;
color: #FFFA3B;
position: relative;
}
.sidebar-menu-arrow:hover::after {
cursor: pointer;
color: #fff;
}
.sidebar-menu-arrow:active::after {
top: 2px;
}


/*Hamburger Button*/
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
top: 50px;
left: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open {
left: 25px;
}
.button-open .menu-bar-top {
border-color: #fff;
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
background-color: #fff;
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
border-color: #fff;
transform: rotate(-45deg) translate(7px, -7px);
transition: .5s;
}




/* Text Block */
.wrapper {
width: 40%;
margin: 100px auto 0;
color: #83828D;
}
.wrapper .text {
padding: 30px;
}
.wrapper .text .heading {
margin-bottom: 40px;
font-size: 2em;
}
.wrapper .text p {
line-height: 1.6em;
}
.wrapper .text .buttons {
margin-top: 40px;
}

/* Buttons */
.wrapper .buttons .button {
display: inline-block;
margin-right: 20px;
padding: 20px 25px;
border-radius: 2em;
background-color: #70CE64;
color: #fff;
font-size: .9em;
font-weight: 700;
transition: background-color .3s;
}
.wrapper .buttons .button-secondary {
background-color: #FF6746;
}
.wrapper .buttons .button-primary:hover {
background-color: #84D07A;
}
.wrapper .buttons .button-secondary:hover {
background-color: #FF7D60;
}

/*Active state for the buttons*/
.wrapper .buttons .button-primary:active {
background-color: #70CE64;
}
.wrapper .buttons .button-secondary:active {
background-color: #FF6746;
}

/*Icons*/
.wrapper .buttons .button span {
position: relative;
display: inline-block;
padding-right: 20px;
}
.wrapper .buttons .button span::after {
position: absolute;
font-family: "FontAwesome";
right: -3px;
font-size: 14px;
top: 0;
transition: top .3s, right .3s;
}
.wrapper .buttons .button-primary span::after {
content: "\f019";
}
.wrapper .buttons .button-secondary span::after {
content: "\f178";
}
/*Slight icons animation*/
.wrapper .buttons .button-primary:hover span::after {
top: 4px;
}
.wrapper .buttons .button-secondary:hover span::after {
right: -6px;
}

4. Подключаем js-скрипт script.js

Здесь тоже самое. Можно подключить файл

а можно просто вставить вниз сайта до закрытия

Если вы всё сделали правильно, то у вас должна появиться иконка, нажав на которую с левого боку плавно выйдет вертикальное двухуровнвое меню. Успехов в разработке. Пока

Источник

Вертикальное выпадающее меню на css: как его сделать?

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

Не проблема то не проблема, только я вот сегодня неожиданно понял, что забыл, как это делается Чето давно просто не делал. Ну да ладно, просмотром одного урока я полностью исправил эту проблему, так что поделюсь с вами максимально подробно тем, как все это реализовать. Кстати, если вы хотите узнать, как делается обычное вертикальное меню (красивое ), то смотрите эту статью.

Полная разметка

Я решил, что в нашем вертикальном меню будет четыре пункта. При наведении на каждый пункт будет появляться выпадающее подменю из трех подпунктов. Идея моя вам понятна? Из-за этого разметка получилась слегка громоздкой, вот она:

В принципе тут все очень просто. Все меню лежит в контейнере nav , там уже мы создаем список и его пункты. Но поскольку наше меню двухуровневое, то в каждый пункт списка ( li ) мы дополнительно вкладываем список с классом second-ul (типа вложенный ul). Название класса роли не играет. И так делаем с каждым пунктом. Если вы внимательно изучите разметку на примере одного пункта, то все поймете, вот еще раз:

То есть мы в пункт вкладываем список, в котором в свою очередь располагаются вложенные пункты. На этом с html-разметкой все, переходим в css, где все гораздо интереснее.

Оформление нашего меню

Я сделаю некоторые базовые настройки. В частности, нужно убрать маркер у пунктов меню, задать его высоту. Также дополнительно я сброшу отступы у всех элементов. Вы можете этого не делать, это по желанию, просто помните, что по умолчанию у вложенного списка будет отступ.

Вот такие правила первым делом отправляются в таблицу стилей. Посмотрим, как выглядит наше меню:

Ужасно, не так ли? Но ничего, сейчас мы это исправим!

Следующие стилевые правила очень важны именно с эстетической точки зрения — наше меню станет гораздо красивее на вид. Вот все эти правила:

#nav > ul > li <
width: 180px;
position: relative;
>
#nav li a <
display: block;
background: #ccc;
border: 1px solid #333;
color: #fff;
padding: 15px;
>
#nav li a:hover <
background: #999;
>

Что я здесь настроил? Во-первых, для пунктов главного списка указал ширину и относительное позиционирование. Оно нужно для того, чтобы потом выполнить абсолютное позиционирование вложенного меню. Далее настраиваем сам внешний вид ссылок. Делаем их блочными, красим в нужный цвет, добавляем отступы, рамку и т.д. По желанию. Также сделаем изменение фонового цвета при наведении. Итог всех этих манипуляций:

Я обрезал скриншот. Если же вы все делаете за мной, то у вас будут в ряд располагаться все пункты и подпункты. Все, теперь внешний вид не вызывает отвращения, можно сосредоточиться на том, чтобы сделать меню выпадающим!

Делаем вертикальное меню выпадающим

Пока у нас все вложенные меню видно. Это неправильно, по умолчанию их не должно быть на странице, а появляться они должны только при наведении. То есть при наведении на конкретный пункт должно появляться меню только для него. Суть ясна?

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

То есть для вложенного списка указываем абсолютное позиционирование и сдвиг влево на 100% ширины от ширины родительского блока (пункта списка). А насколько мы знаем, ширина у него 180 пикселей. По высоте вложенное меню должно быть на одном уровне. После этих манипуляций у вас должно получится так:

Ну и собственно теперь замените в стилях для вложенных списков display: block на display: none . После этого подменю пропадут с экрана, что нам и нужно. Мы подходим к самому важному этапу — реализации выпадания на css. Для этого сделаем вот что:

Все очень просто, этой строки вам хватит! Тут мы по сути говорим браузеру: при наведении на пункт главного списка делай видимым вложенный список!

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

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

Ну а дальше вы уже по своему усмотрению можете изменять внешний вид всего этого меню, добавлять новые пункты и т.д. Все это уже очень просто делать, когда знаешь технологию. А технологию я вам показал. Если у вас есть какие-либо вопросы, то можете писать их в комментарии, я же на этом заканчиваю статью.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Источник

Выпадающее вертикальное меню с помощью CSS, JQuery

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1.

Для начала создайте папку, например folder. В нее поместите файл index.html со следующим кодом:

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Затем в папке folder создайте папку style и поместите в нее файл style.css. Файл style.css должен содержать этот код:

li.button a.box1, li.button a.box2, li.button a.box3, li.button a.box4, li.button a.box5, li.button a.box6

Также не забываем про наши скрипты. В папке folder создаем папку js и помещаем в нее скрипт jquery-1.4.2.js, jquery.easing.1.3.js и script.js.

Чтобы наша страничка была не такой унылой, я создал для нее красочный фон. Для этого в папке folder необходимо создать папку img и поместить в нее файл font.jpg. Делать это необязательно. Просто в этом случае фон страницы будет черного цвета.

После того как Вы выполнили вышеуказанные действия, в окне Вашего браузера появится вот такая вот страничка:

Таким образом, мы создали вертикальное меню с помощью CSS, JQuery с выпадающими подпунктами. Для того чтобы увидеть подпункты меню, необходимо кликнуть на соответствующий пункт меню. Повторный клик по соответствующему пункту меню вернет его в исходное состояние.

Шаг 2.

Для того чтобы понять, как устроена работа данного меню, рассмотрим исходные коды файлов index.html, style.css и script.js.

Итак, рассмотрим файл index.html. А именно вот эту часть кода:

Она представляет собой в браузере пункт меню «ГЛАВНАЯ» с раскрывающимися подпунктами меню «Пункт1», «Пункт2», «Пункт3», «Пункт4».

Подпункты меню «Пункт1», «Пункт2», «Пункт3», «Пункт4» скрыты за счет свойства display: none;. Для того чтобы увидеть второй уровень меню Вам необходимо сделать один клик по пункту меню «ГЛАВНАЯ». После этого наше меню плавно раздвигается.

Данный эффект реализован при помощи ява-скрипта script.js.

Пункты меню «ФОТО», «ВИДЕО», «БЛОГИ», «ИГРЫ», «КОНТАКТЫ» реализованы аналогичным образом. Отличие друг от друга заключается в количестве подпунктов меню, поэтому их рассматривать мы не будем.

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

Файл style.css.

В этом файле я хочу обратить Ваше внимание на стили классов button и dropdown (стили для пунктов меню и их подпунктов, соответственно). Рассмотрим их:

Источник