Скрипт для меню css

Как сделать — Кликабельный выпадающий список

Узнать, как создать интерактивное выпадающее меню с помощью CSS и JavaScript.

Выпадающий

Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:

Создание кликабельного выпадающего списка

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

Шаг 1) Добавить HTML:

Пример

Объяснение примера

Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или

.

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

Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.

Шаг 2) Добавить CSS:

Пример

/* Кнопка выпадающего списка */
.dropbtn background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>

/* Кнопка выпадающего меню при наведении и фокусировке */
.dropbtn:hover, .dropbtn:focus background-color: #2980B9;
>

/* Контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover

/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show

Объяснение примера

Мы разработали выпадающую кнопку с фоновым цветом, дополнением, эффектом наведения и т.д.

Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).

Класс .dropdown-content класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание в min-width установлено значение 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина выпадающего контента, чтобы быть так велик, как в раскрывающееся меню, установить width на 100% (и overflow:auto , чтобы включить прокрутку на маленьких экранах).

Вместо использования границы мы использовали свойство box-shadow , чтобы сделать выпадающее меню похожим на»карточку». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.

Шаг 3) Добавить JavaScript:

Пример

/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>

// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.onclick = function(event) if (!event.target.matches(‘.dropbtn’)) var dropdowns = document.getElementsByClassName(«dropdown-content»);
var i;
for (i = 0; i < dropdowns.length; i++) var openDropdown = dropdowns[i];
if (openDropdown.classList.contains(‘show’)) openDropdown.classList.remove(‘show’);
>
>
>
>

Источник

HTML-разметка бургер-меню

Теперь давайте разберем по порядку как это сделать. Начнем с разметки HTML.

Вся основная разметка меню содержится в элементе с классом navbar. Внутри мы располагаем контейнер с классом container для того, чтобы ограничить нашу навигацию по ширине 1000px и выровнять по центру.

Элемент navbar__wrap также является контейнером, но в нем мы уже выравниваем элементы внутри самого меню. Внутри меню содержится:

• Сама кнопка бургер меню — div с классом hamb
• Логотип — ссылка с классом logo
• Элементы меню — список с классом menu

Последний div с классом popup — это всплывающее окно, которое будет появляться при нажатии на иконку бургер.

Как видите разметка довольна простая, теперь приходим к стилизации.

Стилизация бургер-меню

В начале стилизуем десктопное меню:

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); html < box-sizing: border-box; height: 100%; >*, *::after, *::before < box-sizing: inherit; >body < display: flex; flex-direction: column; font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.2; height: 100%; >.container < width: 100%; max-width: 1000px; margin: 0 auto; height: 100%; padding: 0 15px; >.navbar < position: fixed; left: 0; top: 0; width: 100%; height: 75px; background: #7a52b3; >.navbar__wrap < display: flex; justify-content: space-between; height: 100%; >.hamb < display: none; >.popup < display: none; >.logo < text-decoration: none; color: #fff; font-size: 20px; font-weight: bold; text-transform: uppercase; display: flex; align-items: center; >.menu > li > a < text-decoration: none; >.navbar__wrap .menu < display: flex; >.navbar__wrap .menu > li < display: flex; align-items: stretch; >.navbar__wrap .menu > li > a < display: flex; align-items: center; padding: 0 20px; color: rgba(255, 255, 255, 0.7); >.navbar__wrap .menu > li > a:hover

За ширину бургер меню отвечает элемент container, а конкретно его CSS-свойство max-width: 1000px. В элементе navbar мы задаем высоту height: 75px, а также делаем наше меню фиксированным благодаря свойству position: fixed.

В контейнере navbar__wrap мы распределяем все элементы меню (иконка, логотип, ссылки) равномерно, используя flexbox и его свойство justify-content: space-between.

По умолчанию элементы hamb и popup скрыты display: none. Свойство display мы будем менять в JavaScript.

Остальная часть CSS-кода не требует объяснения: там мы начиная с элемента logo стилизуем элементы нашего меню.

Делаем адаптацию под мобильную версию

Наше меню преобразуется в мобильную версию, когда ширина экрана становится меньше 1000px. В CSS это делается так:

@media (max-width: 1000px) < .navbar__wrap .menu < display: none; >.hamb < display: flex; align-items: center; >.hamb__field < padding: 10px 20px; cursor: pointer; >.bar < display: block; width: 30px; height: 3px; margin: 6px auto; background-color: #fff; transition: 0.2s; >.popup < position: fixed; top: 75px; left: -100%; width: 100%; height: 100%; background-color: #fff; z-index: 100; display: flex; transition: 0.3s; >.popup.open < left: 0; >.popup .menu < width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: start; padding: 50px 0; overflow: auto; >.popup .menu > li < width: 100%; >.popup .menu > li > a < width: 100%; display: flex; justify-content: center; padding: 20px 0; font-size: 20px; font-weight: bold; color: #3f3f3f; >.popup .menu > li > a:hover < background-color: rgba(122, 82, 179, 0.1); >.hamb__field.active .bar:nth-child(2) < opacity: 0; >.hamb__field.active .bar:nth-child(1) < transform: translateY(8px) rotate(45deg); >.hamb__field.active .bar:nth-child(3) < transform: translateY(-8px) rotate(-45deg); >body.noscroll < overflow: hidden; >>

Медиазапрос @media (max-width: 1000px) меняет стили элементов при ширине экрана меньше 1000px. Кстати, чтобы он срабатывал необходимо в HTML-разметку тега head добавить:

Для всплывающего окна popup мы задаем свойство left: -100%, чтобы скрыть его в левой части. При нажатии на иконку бургер к попапу добавится класс active и свойство left будет равным 0. То есть наш попап открывается слева направо. А чтобы он делал это плавно мы добавили к popup свойство transition: 0.3s.

Также при вызове popup мы блокируем прокрутку экрана у глобального тега body. Для этого добавляем ему класс body.noscroll со значением overflow: hidden.

Пишем скрипт для бургер-меню

Все подготовительные работы выполнены, осталось только «оживить» наше меню. Воспользуемся следующим кодом на JS:

const hamb = document.querySelector("#hamb"); const popup = document.querySelector("#popup"); const body = document.body; // Клонируем меню, чтобы задать свои стили для мобильной версии const menu = document.querySelector("#menu").cloneNode(1); // При клике на иконку hamb вызываем ф-ию hambHandler hamb.addEventListener("click", hambHandler); // Выполняем действия при клике .. function hambHandler(e) < e.preventDefault(); // Переключаем стили элементов при клике popup.classList.toggle("open"); hamb.classList.toggle("active"); body.classList.toggle("noscroll"); renderPopup(); >// Здесь мы рендерим элементы в наш попап function renderPopup() < popup.appendChild(menu); >// Код для закрытия меню при нажатии на ссылку const links = Array.from(menu.children); // Для каждого элемента меню при клике вызываем ф-ию links.forEach((link) => < link.addEventListener("click", closeOnClick); >); // Закрытие попапа при клике на меню function closeOnClick()

В начале мы поочередно считываем наши элементы, обращаясь к id каждого из них. Единственная особенность — в третьей строке мы клонируем menu, причем вместе со всеми его дочерними элементами. Для этого пользуемся методом cloneNode(1). Это делается для того, чтобы меню в десктопной и мобильной версии имели каждый свои стили.

Далее на иконку hamb навешиваем обработчик события на клик. При клике будем вызывать функцию hambHandler. В данной функции мы будем переключать стили у соответствующих элементов. Например: при первом нажатии на иконку для popup зададим класс active, таким образом наше всплывающее окно откроется плавно слева направо. В конце функции hambHandler мы вызовем другую функцию renderPopup, которая займется заполнением попапа.

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

Исходники из урока на GitHub

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

Источник

130+ Beautiful CSS Menus (Free Code + Demos)

Enjoy this huge collection of 100% free and open source HTML and CSS navigation menu code examples. All examples are easy to add to your own project.

1. Mega Dropdown

2. Building A Circular Navigation With CSS Transforms

3. CSS Menu — Text Fill On Hover

Filling the text with a different color on hover — a creative text effect. View this pen on full screen mode and enjoy this creative pen

4. Circle Links Menu

5. Full-page Navigation

6. CSS Only Fold Out Mobile Menu

7. Pure CSS Single Page Application

8. Randomly Generated CSS Blobby Nav

A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter, and SVG filter. Also, has a pure CSS «off» click by resizing a label Enjoy!

9. Full-Page Navigation

10. Pure CSS CPC Full Page Nav

11. Full Page Nav CSS

12. Menu Hover Fill Text

13. Menu With Awesome Hover

14. Drop Down Menu

15. Navigation With Sub-Navigation

16. Menu Hover Underline

17. Apple TV Menu Interface (Chrome, Edge, Safari)

18. CSS Strange Nav

19. Off Canvas Menu Pure CSS

20. Navbar With Pure Css

21. Pure CSS Navigation Simple & Easy

22. Simple PureCss Dropdown Menu With Following Subnav

23. The Circular Menu

24. Navbar Interaction

25. Off-Canvas Menu On Pure CSS

26. Vertical Dark Menu With CSS

27. Barra De Navegación Con Css — Menú Bar

28. The More Menu

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

29. Pure CSS Circle Menu

Circular menu with toggle button created only with css. You can configure the menu size, number of items, color of toggle button and links icons.

30. CSS — Folding Menu

31. Moving Underline Nav Menu

32. 🌟 Circle Menu (Pure CSS) 🌟

33. Fun Hover Navigation

Fun navigation effect using CSS Keyframes. A quick jump back to the old school. Take a look and let me know what you think 👍🏼

34. Pure CSS Magic Line Navbar

I’ve always been fascinated by navbars that would have a line following your cursor while you hovered a link, so I decided to finally try my hand at making one with just CSS.

35. Position Sticky Can Do A Lot

36. CSS Only Drop Down Menu

37. Slide Out Navigation Menu

38. Pure CSS Menu Drawer W/ Off-click 🍔

39. 3D Navbar

40. Just Another Menu (Pure CSS)

Pure CSS Floating menu animation Inspired by https://www.uplabs.com/posts/options-floating-interaction design

41. 💪 CSS Menu Feat. Emoji

42. The Menu

43. CSS Only Perspective Menus 🦄

44. Dropdown Menu Animation

45. Pure CSS Fading Out For Siblings Menu Options On Option Hover

46. CSS-Only Nested Dropdown Navigation (ARIA)

Updated with ARIA roles and accessibility. Based off of a piece of code I did for @jzl’s portfolio navigation at http://jeselleobina.com/portfolio. Stay tuned for a full tutorial on Tuts+!

47. Fullscreen Menu Flexbox Method

48. Full Screen Navigation Overlay

One current trend in navigation styles that you may have seen is the full screen navigation overlay. With this type of navigation, toggling the navigation will overlay the menu across the entire screen. Codrops did a really nice set of demos with full screen overlay styles last year. I wan.

49. Mobile Navigation Animation

Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking.

Источник