Javascript создаем выпадающее меню

Javascript создаем выпадающее меню

Напишем выпадающее меню в JavaScript или его еще называют dropdown menu. Этот код устанавливает прослушиватель событий на кнопке раскрывающегося списка, которая переключает класс show в раскрывающемся меню.

Напишем выпадающее меню в JavaScript или его еще называют dropdown menu. Этот код устанавливает прослушиватель событий на кнопке раскрывающегося списка, которая переключает класс show в раскрывающемся меню. Он также устанавливает прослушиватель для объекта окна, который закрывает раскрывающееся меню, если пользователь щелкает за его пределами.

Пример, который мы сделаем:

.dropdown < position: relative; display: inline-block; >.dropdown-button < background-color: lightgray; color: black; padding: 16px; font-size: 16px; border: none; cursor: pointer; >.dropdown-menu < position: absolute; top: 100%; left: 0; display: none; background-color: lightgray; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; >.dropdown-menu.show < display: block; >.dropdown-menu a < color: black; padding: 12px 16px; text-decoration: none; display: block; >.dropdown-menu a:hover

const dropdownButton = document.querySelector(".dropdown-button"); const dropdownMenu = document.querySelector(".dropdown-menu"); dropdownButton.addEventListener("click", function () < dropdownMenu.classList.toggle("show"); >); // Закрываем раскрывающееся меню, если пользователь щелкнет за его пределами. window.addEventListener("click", function (event) < if (!event.target.matches(".dropdown-button")) < dropdownMenu.classList.remove("show"); >>);

Источник

Выпадающее меню выбора с использованием Javascript

Цель создания выпадающего меню — это оптимальное использование пространства на маленьких дисплеях. Иногда к такому приему организации меню, прибегают и для больших мониторов.

HTML разметка

Поместим в контейнер dropdown поле input и блок option с иконками и названиями пунктов меню. Подключим библиотеку ionicons, откуда копируем названия нужных иконок. Вставим иконки в разметку через тег ion-icon.

CSS стилизация поля input

Рисуем стрелочку с помощью псевдоэлемента before и свойства border. При наведении стрелочка будет поворачиваться вниз.

@import url(‘https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900’);
* margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
>
body display: flex;/*сетка flexbox*/
justify-content: center;/*горизонтальное выравнивание*/
min-height: 100vh;
background: #fafafa;
>
.dropdown position: relative;/*относительное позиционирование*/
margin-top: 100px;/*отступ сверху*/
width: 300px;
height: 50px;
>
.dropdown::before content: »;
position: absolute;
top: 15px;
right: 20px;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
z-index: 10;
transition: 0.5s;
>
.dropdown.active::before top: 22px;
transform: rotate(-225deg);/*поворот вниз*/
>
.dropdown input position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 16px;
background: #fff;
text-transform: capitalize;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
outline: none;
>

CSS стилизация блока option

Пришло время сделать ключевое действие — спрятать пункты меню, прописав свойство display: none.

.dropdown .option position: absolute;
top: 70px;
width: 100%;
border-radius: 10px;
background: #fff;
box-shadow: 0 30px 30px rgba(0,0,0,0.05);
overflow: hidden;
display: none;/*прячем пункты меню*/
text-transform: capitalize;
>

JavaScript функция

Навешиваем на все пункты меню событие onclick. При клике на пункт меню будет срабатывать функция show.

Функция находит все пункты меню.

При клике в области контейнера dropdown, переключает класс option на active. Активный класс снова делает видимым выпадающее меню и тогда можно делать свой выбор.

.dropdown.active .option display: block;
>
.dropdown .option div:hover background: #62baea;/*окрашивает синим цветом*/
color: #fff;/*меняет цвет текста*/
>
.dropdown .option ion-icon position: relative;
top: 4px;
font-size: 1.2em;
>

Создано 14.02.2022 10:47:28

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

jQuery для начинающих. Часть 2. JavaScript Меню.

В первой части были рассмотрены базовые принципы работы селекторов и приведены несколько примеров, в данной статье я постараюсь акцентировать внимание на реализации JavaScript меню для Вашего сайта.

Если Вам готовый код наглядней документации, то переходим от слов к делу, т.е. на страницу с примерами.

Slide меню

Два slide-меню на странице: вверху и внизу.

Кликаем по ссылке с классом «btn-slide», выезжает панель с меню.

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

Slide меню 2

Slide-меню слева и справа страницы. Для начала приготовим HTML:

У нас должно получиться что-то наподобие следующего:

Теперь создадим обработчик событий для ссылок с классом «btn-slide»:

// создаем обработчик событий для ссылок с классом "btn-slide" $(".btn-slide").toggle(function()< // . 1-ый клик по ссылке // возвращаем false return false; >,function()< // . 2-ой клик по ссылке // возвращаем false return false; >);

// идем по DOM'у на 2-а уровня вверх, внутри элемента (это div c классом left/right) находим нужный нам элемент и приращиваем ему 120 пикселей в ширину $(this).parent().parent().find(".panel").animate(, "slow"); // заменяем класс кнопки (для изменение стрелочки) $(this).toggleClass("active");

$(document).ready(function()< $(".btn-slide").toggle(function()< $(this).parent().parent().find(".panel").animate(, "slow"); $(this).toggleClass("active"); return false; >,function()< $(this).parent().parent().find(".panel").animate(, "slow"); $(this).toggleClass("active"); return false; >); >);

Drop-down меню

Одна из самых распространенных реализаций меню для сайта это горизонтальное выпадающее меню, его конечно можно реализовать при помощи CSS, но статья у нас о jQuery, так что будем орудовать оным. Начнем с HTML’a (замечу, что для всех остальных примеров код практически не отличается):

Далее нам необходимо добавить обработчик для события hover для элементов li:

$('.topmenu ul li').hover( function() < // . >, function() < // . >);

// находим элемент ul и вызываем анимацию slideDown $(this).find('ul').slideDown(); // изменяем фон выбранного элемента путем добавления класса active $(this).addClass("active");

$(document).ready(function()< $('.topmenu ul li').hover( function() < $(this).addClass("active"); $(this).find('ul').slideDown(); >, function() < $(this).removeClass("active"); $(this).find('ul').slideUp('fast'); >); >);

Drop-down AJAX меню

И заготовки для подменю, назовем их menu1.html, menu2.html и menu3.html — по id соответствующих элементов меню (скорей всего данные элементы будут генерироваться динамически, но для упрощения примера используем статические странички):

Теперь, как и в предыдущем примере, нам необходим обработчик события hover:

$(document).ready(function()< $('.topmenu ul li').hover( function() < // . тут необходимо внести изменения в код $(this).addClass("active"); >, function() < // тут оставляем так как есть $(this).removeClass("active"); $(this).find('ul').slideUp('fast'); >); >);

// получаем id активного элемента меню var запихиваем активный элемент в локальную переменную var li = $(this); $.ajax(< // формируем имя запрашиваемой посредством AJAX страницы url: 'ajax/'+id+'.html', beforeSend: function()< // перед тем как "спросить" изменяем класс элемента - отображаем loading картинку li.addClass('loading'); >, success: function(data) < // наполняем подменю li.append(data); // показываем что получилось li.find('ul').slideDown(); // убираем loading картинку li.removeClass('loading'); >>);

$(document).ready(function()< $('.topmenu ul li').hover( function() < // добавляем проверочку - не загружали ли до этого элементы if ($(this).find('ul').length == 0) < var var li = $(this); $.ajax(< url: 'ajax/'+id+'.html', beforeSend: function()< li.addClass('loading'); >, success: function(data) < li.append(data); li.find('ul').slideDown(); li.removeClass('loading'); >>); > else < $(this).find('ul').slideDown(); >$(this).addClass("active"); >, function() < $(this).find('ul').slideUp('fast'); $(this).removeClass("active"); >); >);

Drop-down меню

Вертикальное выпадающее меню. Достаточно простенький примерчик:

$(document).ready(function()< // добавить обработчик события hover $('.topmenu ul li').hover( function() < $(this).find('ul:first').slideDown(); >, function() < $(this).find('ul:first').slideUp('fast'); >); // всем элементам меню с вложенностью добавить символ » $('.topmenu li:has(ul)').find('a:first').append('»'); >);

Float меню

Плавающее меню. Нам понадобится плагин Dimensions (дабы работали методы height() и width()). Ну с HTML я думаю, Вы разберетесь:

Теперь по порядку — начнем с получение информации о текущем расположении «плавающих» меню:

// получаем информацию из css о расположении верхнего меню menu1 = parseInt($(".right").css("top").substring(0,$(".right").css("top").indexOf("px"))); // расположении нижнего меню вычисляем отталкиваясь от размеров окна (96 взято на глаз) menu2 = $(window).height() - 96;

Далее, нам необходимо «повесить» свою функцию для события scroll:

Ну и собственно наполнение:

$(window).scroll(function () < // определяем новое положение для наших меню offset1 = menu1 + $(document).scrollTop() + "px"; offset2 = menu2 - $('.left .panel').height() + $(document).scrollTop() + "px"; // перетаскиваем элементы на новое место $('.right').animate(,); $('.left').animate(,); >);

Так же добавим отображение/скрытие элементов подменю:

// для всех элементов "a" которые находятся в "li" со вложенными списками "ul" $('.panel ul li:has(ul) a').click(function() < // идем к паренту, находим "ul" и прячем/скрываем его $(this).parent().find('ul').slideToggle(); return false; >); // кнопка "+" - скрываем все "ul" вложенные в "li" $('a.plus').click(function()< // идем к паренту, находим следующий элемент в доме, ищем в нем "ul li ul", выполняем "slideUp" $(this).parent().next().find('ul li ul').slideUp('fast'); return false; >); // кнопка "-" - отображаем все "ul" вложенные в "li" $('a.minus').click(function()< // идем к паренту, находим следующий элемент в доме, ищем в нем "ul li ul", выполняем "slideDown" $(this).parent().next().find('ul li ul').slideDown('slow'); return false; >);

Цикл статей

Источник

Создание выпадающего меню на JavaScript

, в котором будут располагаться пункты меню (
).

Шаг 2: Написание скрипта на JavaScript

JavaScript код будет реагировать на клик по кнопке и переключать видимость списка с пунктами меню.

• Получить ссылку
• Facebook
• Twitter
• Pinterest
• Электронная почта
• Другие приложения

Комментарии

Отправить комментарий

Популярные сообщения

Python вывести количество элементов списка

Python: Вывод количества элементов списка В этой статье мы рассмотрим как выводить количество элементов списка с помощью языка программирования Python. Использование функции len() Для определения количества элементов в списке в Python, используйте встроенную функцию len() . my_list = [1, 2, 3, 4, 5] elements_count = len(my_list) print(«Количество элементов в списке:», elements_count) Этот код создает список my_list , а затем использует функцию len() для подсчета элементов в списке. Результат будет выведен на экран. Использование цикла for Если вы хотите подсчитать количество элементов списка без использования функции len() , вы можете использовать цикл for . my_list = [1, 2, 3, 4, 5] elements_count = 0 for _ in my_list: elements_count += 1 print(«Количество элементов в списке:», elements_count) В этом примере мы инициализируем переменную elements_count значением 0, а затем для каждого элемента в списке увел

Как сделать шашки на python

Как сделать шашки на Python Как сделать шашки на Python В этой статье мы рассмотрим, как создать простую игру в шашки на Python с использованием библиотеки Pygame. Подготовка Для начала установите библиотеку Pygame, используя следующую команду: pip install pygame Создание доски import pygame pygame.init() WIDTH, HEIGHT = 800, 800 ROWS, COLS = 8, 8 SQUARE_SIZE = WIDTH // COLS WHITE = (255, 255, 255) BLACK = (0, 0, 0) RED = (255, 0, 0) BLUE = (0, 0, 255) def draw_board(win): win.fill(WHITE) for row in range(ROWS): for col in range(row % 2, COLS, 2): pygame.draw.rect(win, BLACK, (row * SQUARE_SIZE, col * SQUARE_SIZE, SQUARE_SIZE, SQUARE_SIZE)) def main(): win = pygame.display.set_mode((WIDTH, HEIGHT)) pygame.display.set_caption(«Checkers») clock = pygame.time.Clock() run = True while run: clock.tick(60) for event in pygame.event.get(): if event.ty

Python как перевести число в другую систему счисления

Преобразуйте числа как профессионал! Узнайте, как Python может перевести любое число в любую систему счисления. Даже если вы никогда раньше не сталкивались с программированием, эта статья поможет вам стать экспертом в считывании двоичных, восьмеричных и шестнадцатеричных чисел. Не пропустите возможность раскрыть секреты произвольной системы счисления в Python! Python: Перевод числа в другую систему счисления В языке программирования Python преобразование числа в другую систему счисления может быть выполнено с использованием встроенных функций и методов. Преобразование чисел в двоичную систему Python предоставляет встроенную функцию bin() для преобразования числа в двоичную систему. # Пример преобразования числа в двоичную систему num = 18 binary_num = bin(num) print(binary_num) # Вывод: 0b10010 Преобразование чисел в восьмеричную систему Функция oct() в Python преобразует число в восьмеричную систему. # Пример преобразования числа в восьмеричную систему num = 18

Источник