Как сделать многоуровневое меню
Обновлено: 05.07.2024
Привет всем. Сегодня продолжим нашу тему о выпадающих меню и поговорим о как сделать вертикальное выпадающее меню. Как обычно, к каждому примеру будет доступен режим демо просмотра, а также файлы для скачивания.
Если вы попали на этот сайт случайно или искали другое выпадающее меню, советую перейти по ссылке, там собранно множество разных меню для сайта.
Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.
Навигация по странице:
В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.
У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс 🙂 ) на базе которого можно построить практически любое вертикальное выпадающее меню.
А что же делать с мобильными браузерами? - или на планшетах спросите вы.
К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.
Пара слов о преимуществе выпадающих меню:
- можно вместить очень длинные меню в ограниченное пространство;
- дизайн становится более изящным;
- частично улучшаются поведенческие факторы.
Вертикальное выпадающее меню вправо
к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.
Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.
Html для вертикального меню
Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:
Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.
Вертикальное выпадающее меню CSS
к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.
Вот эта строчка CSS
отвечает за выпадашку. Она показывает выпадающий блок при наведении. Остальные стили нужны для стилизации самого меню, а также правильного размещения списков / пунктов меню.
Посмотреть что у нас получилось в этом примере можно на скине:
Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:
Вот такой не сложный пример выпадающего меню у меня получился.
Это еще не конец, идем дальше.
Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.
Вертикальное выпадающее меню влево на CSS
к менюХтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)
Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:
Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:
Здравствуйте дорогие друзья. Нашел в интернете интересное меню. Вот решил его переделать немного под себя ну и выложить здесь на блоге, может еще кому понадобится.
Я уже писал о том, как можно выровнять горизонтальное меню по центру. В данной статье рассматривались варианты как с выпадающими списками, так и без них. Здесь же я решил пойти дальше и создать горизонтальное многоуровневое меню на css с эффектом анимации, которое также будет центроваться по центру. Данная статья является как бы логическим продолжением.
Html-код:
CSS-код:
Комментировать особо не буду, скажу лишь только то, что данное меню будет корректно отображаться только в современных браузерах. Проверял во всех популярных браузерах последних версий: firefox, chrome, opera, safari, Internet Explorer 9.0 — все ок. Только вот в ИЕ 7 — 8 меню выглядит немного иначе и нет эффектов анимации. Но в целом ничего страшного нет. Оно и понятно, меню то ведь работает на css3, а данные версии браузера ИЕ 7 — 8 css3 не поддерживают.
Почему именно на css3, а не, скажем, на jQuery с использованием картинок? Данный вариант я рассматривал, но вариант на чистом css мне нравится больше всего. Скорость работы намного быстрее.
Ну а на этом пока все. На связи был Заур Магомедов. Всем пока и подписываемся на обновления.
Приведённый код позволяет создавать неограниченное количество выплывающих вложений не изменяя стилей и легко трансформируется из горизонтального в вертикальное.
Для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О чём я укажу в комментариях в коде.
Я даю только эскиз меню. Оформлять и наводить красоту, каждый будет по своему вкусу.
Чтоб не выкладывать огромную портянку, я сделал только два блока с двумя уровнями, но вы можете простым копированием добавлять в этот код столько блоков сколько надо и делать столько уровней в каждом блоке, сколько вам потребуется.
Стили для всех блоков, имеющихся и добавленных, будут одинаковыми.
>
. nav li:hover > .submenu visibility : visible ;
opacity : 1 ;
transform : translateY(0px) ;
>
Как можно видеть, что оно идет в темном оттенке цвета, где можно его поставить на аналогичный дизайн, что цветовую гамму сделать немного светлее. Где стразу при открытии страницы или сайта, эта навигация будет бросаться в глаза, что не придется искать по всему порталу. Но и не нужно забывать про содержание, если некоторые выстраивают специальные блоки под название для перехода. То по функциям, эта навигация изначально можно разместить как можно больше запросов, где еще все грамотно прописать для быстрого нахождение вашего тематического направления, что идет в количестве знаков.
Вертикальная навигация реализована при помощи чистого CSS3
Как происходит реализация вертикального многоуровневого меню на сайте.
ul <
list-style:none;
margin-left:0;
padding-left:0;
>
.razdvizhnaya-navigatsiya ul <
display: none;
height:0px;
transition:all 0.5s ease-in-out
>
.razdvizhnaya-navigatsiya li <
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>
.razdvizhnaya-navigatsiya input[type=checkbox] <
position: absolute;
opacity: 0;
>
.razdvizhnaya-navigatsiya label::before,
.razdvizhnaya-navigatsiya label::after,
.razdvizhnaya-navigatsiya a::after <
content: '';
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
>
.razdvizhnaya-navigatsiya label <
cursor: pointer;
>
.razdvizhnaya-navigatsiya label::before <
left: 18px;
background-position: 0 0;
-webkit-transform: translateY(-50%) rotate(-90deg);
-moz-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
-o-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
>
.razdvizhnaya-navigatsiya label::after <
left: 41px;
background-position: -16px 0;
>
.razdvizhnaya-navigatsiya input[type=checkbox]:checked + label::before <
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
>
.razdvizhnaya-navigatsiya input[type=checkbox]:checked + label::after <
background-position: -32px 0;
>
.razdvizhnaya-navigatsiya input[type=checkbox]:checked + label + ul,
.razdvizhnaya-navigatsiya input[type=checkbox]:checked + label:nth-of-type(n) + ul <
display: block;
transition: all 0.3s ease-in-out;
height:auto
>
.razdvizhnaya-navigatsiya > li:last-of-type > label,
.razdvizhnaya-navigatsiya > li:last-of-type > a,
.razdvizhnaya-navigatsiya > li > ul > li:last-of-type label,
.razdvizhnaya-navigatsiya > li > ul > li:last-of-type a <
box-shadow: none;
>
.razdvizhnaya-navigatsiya ul label::before <
left: 36px;
>
.razdvizhnaya-navigatsiya ul label::after,
.razdvizhnaya-navigatsiya ul a::after <
left: 59px;
>
.razdvizhnaya-navigatsiya ul ul label,
.razdvizhnaya-navigatsiya ul ul a <
padding-left: 100px;
>
.razdvizhnaya-navigatsiya ul ul label::before <
left: 54px;
>
.razdvizhnaya-navigatsiya ul ul label::after,
.razdvizhnaya-navigatsiya ul ul a::after <
left: 77px;
>
.razdvizhnaya-navigatsiya ul ul ul label,
.razdvizhnaya-navigatsiya ul ul ul a <
padding-left: 118px;
>
.razdvizhnaya-navigatsiya ul ul ul label::before <
left: 72px;
>
.razdvizhnaya-navigatsiya ul ul ul label::after,
.razdvizhnaya-navigatsiya ul ul ul a::after <
left: 95px;
>
@media only screen and (min-width: 600px) <
.razdvizhnaya-navigatsiya label,
.razdvizhnaya-navigatsiya a <
padding: 24px 24px 24px 82px;
font-size: 1.9rem;
>
.razdvizhnaya-navigatsiya label::before <
left: 24px;
>
.razdvizhnaya-navigatsiya label::after <
left: 53px;
>
.razdvizhnaya-navigatsiya ul label,
.razdvizhnaya-navigatsiya ul a <
padding-left: 106px;
>
.razdvizhnaya-navigatsiya ul label::before <
left: 48px;
>
.razdvizhnaya-navigatsiya ul label::after,
.razdvizhnaya-navigatsiya ul a::after <
left: 77px;
>
.razdvizhnaya-navigatsiya ul ul label,
.razdvizhnaya-navigatsiya ul ul a <
padding-left: 130px;
>
.razdvizhnaya-navigatsiya ul ul label::before <
left: 72px;
>
.razdvizhnaya-navigatsiya ul ul label::after,
.razdvizhnaya-navigatsiya ul ul a::after <
left: 101px;
>
.razdvizhnaya-navigatsiya ul ul ul label,
.razdvizhnaya-navigatsiya ul ul ul a <
padding-left: 154px;
>
.razdvizhnaya-navigatsiya ul ul ul label::before <
left: 96px;
>
.razdvizhnaya-navigatsiya ul ul ul label::after,
.razdvizhnaya-navigatsiya ul ul ul a::after <
left: 125px;
>
>
.razdvizhnaya-navigatsiya.animated label::before <
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
>
Теперь у веб разработчика появилась отличное решение, которое можно реализовать на любом тематическом ресурсе, где собрать всю информацию, которые находятся по ссылками, это разделы и категорий, а также можно поместить под категорий, где все станет находится в одном месте, а это в навигаций, для чего она предназначена.
Читайте также: