Кнопка с выпадающим меню javascript

Содержание

Как сделать — Фильтр/поиск выпадающего списка
Фильтр выпадающего меню
Создание кликабельного выпадающего списка
Пример
Объяснение примера
Пример
Объяснение примера
Пример
How to Build a Dropdown Menu with JavaScript
Step 1 – Add the Markup for the Dropdown
Step 2 – Style the Dropdown Menu
Step 3 — Add the Dropdown Functionality
How to Close the Dropdown Menu When a DOM Element is Clicked
Conclusion
Кнопка с выпадающим меню javascript

Как сделать — Фильтр/поиск выпадающего списка

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

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

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

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

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

Пример

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

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

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

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

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

Пример

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

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

/* Поле поиска */
#myInput box-sizing: border-box;
background-image: url(‘searchicon.png’);
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
>

/* Поле поиска, когда он получает фокус/нажал на */
#myInput:focus

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

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
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 установлено значение 230px. Не стесняйтесь изменить это. Совет: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto чтобы включить прокрутку на небольших экранах).

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

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

Пример

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

function filterFunction() var input, filter, ul, li, a, i;
input = document.getElementById(«myInput»);
filter = input.value.toUpperCase();
div = document.getElementById(«myDropdown»);
a = div.getElementsByTagName(«a»);
for (i = 0; i < a.length; i++) txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) a[i].style.display = «»;
> else a[i].style.display = «none»;
>
>
>

Совет: Зайдите на наш учебник CSS Выпадающий список to learn more about dropdowns.

Совет: Зайдите на наш Как сделать — Выпадающий список при наведении чтобы узнать больше о раскрывающихся списках при наведении

Источник

Victor Eke

If you use the internet, you’ve likely used a dropdown menu before. They primarily serve two purposes: collecting user input in web forms, and implementing action/navigation menus in web applications.

Dropdowns are one of the best ways to offer numerous options for a similar collection of elements without needing to compromise an application’s general layout flow. Aside from web apps, they’re also used in standalone software, operating systems, and so on.

In this guide, you’ll learn how to build a dropdown navigation menu using HTML, CSS, and JavaScript.

Here’s a screenshot of what you’ll be building. At the end of this guide, I’ll include the codepen file so you can play around with it.

Now that we’ve covered the fundamentals of the dropdown menu, let’s discuss the steps for how to build one.

Since we’ll be using icons in this guide, we need to first import them. For simplicity, we’ll be using a free library called Boxicons. Feel free to pick other alternatives you prefer.

There are several ways to setup Boxicons in your site. But the simplest way is by defining the script tag in the head of your HTML file, like this:

After importing the icons, create a div element with a class of container . This element will contain the button and dropdown menu.

Inside the container, create a button element and give it a class and id of btn . For the button, pass in the button text and the arrow icon.

Here’s the markup for the button.

Next up, we’ll add the markup for the dropdown menu itself. Underneath the button tag, create a div element and give it a class and id of dropdown . Inside the div element, create an a tag for each individual dropdown item and pass in their respective icon and text.

Here’s what the markup looks like:

  Create New All Drafts Move To Profile Settings Notification Settings

It doesn’t look good yet – so let’s start styling the menu.

First we’ll reset the default margin and padding of every element on the page and store some values in variables so we can reuse it throughout our CSS file. Then we’ll give the body element some global styling.

@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900); * < margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; --shadow: rgba(0, 0, 0, 0.05) 0px 6px 10px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px; --color: #166e67; --gap: 0.5rem; --radius: 5px; >body

Next step is styling the button and the dropdown container itself. In order to speed things up, I’ll explain only the important bits of the styling.

Copy the markup below and paste into your CSS file.

.btn < background-color: white; display: flex; align-items: center; justify-content: flex-start; column-gap: var(--gap); padding: 0.6rem; cursor: pointer; border-radius: var(--radius); border: none; box-shadow: var(--shadow); position: relative; >.bx < font-size: 1.1rem; >.dropdown < position: absolute; width: 250px; box-shadow: var(--shadow); border-radius: var(--radius); margin-top: 0.3rem; background: white; >.dropdown a < display: flex; align-items: center; column-gap: var(--gap); padding: 0.8rem 1rem; text-decoration: none; color: black; >.dropdown a:hover

Since dropdown menus are usually placed over elements, the button was positioned relative and the dropdown menu, position absolute. This ensures that both elements will be close to each other and the dropdown menu will be placed over elements. This way, when toggled, it won’t affect the flow of the page.

Now that the dropdown has been styled, we want it to appear only when the button has been clicked rather than immediately. To hide it, we’ll use CSS.

In a previous article I wrote about How to build a modal with JavaScript, we used display: none to hide the modal element initially from the viewport. But the drawback of utilizing this property was that it was not animatable, according to MDN Docs.

So in this guide, we’ll be following a different approach to hide the dropdown menu. This involves combining the visibility and opacity properties together to get the desired result. This method is how GitHub implements its dropdown menu.

Inside the dropdown class we created earlier, add a visibility property and give it a value of hidden and set the opacity to 0 . Doing this will hide the dropdown menu from the page.

In order to show the modal, we’ll create a separate class called show . This class will hold the visibility property with a value of visible and opacity of 1 . And we can inject this class into the modal using JavaScript in a bit.

Alongside the styling to hide the modal element, we added another class to rotate the arrow icon when the dropdown button is clicked.

For starters, let’s store our respective elements into variables so they are reusable.

const dropdownBtn = document.getElementById("btn"); const dropdownMenu = document.getElementById("dropdown"); const toggleArrow = document.getElementById("arrow");

The next step is to create a function to toggle the show class on the dropdown element and to rotate the dropdown arrow when the button is clicked. We’ll name this function toggleDropdown .

const toggleDropdown = function () < dropdownMenu.classList.toggle("show"); toggleArrow.classList.toggle("arrow"); >;

And then we can call this function on the dropdown button using the addEventListener method. So anytime the button is clicked, it will fire the function which controls showing and hiding the dropdown menu.

dropdownBtn.addEventListener("click", function (e) < e.stopPropagation(); toggleDropdown(); >);

If you noticed, we added a stopPropagation() method inside the dropdown function. This prevents the function of the button element from being passed down to the parent element, thus stopping the function from running twice. You’ll understand more about this in the next section.

Dropdown menus are usually closed in four different ways:

By clicking the button that activates it
By clicking on any of its child elements
By clicking outside of the menu (on the body)
By hitting the Escape or down arrow keys

But for this guide, let’s concentrate on the first three.

First we’ll select the root element using document.documentElement . And as before, we’ll pass in the toggleDropdown() function inside.

But this time, we want to define a condition that checks if the dropdown menu contains the show class or not. Only when it does do we want to fire the close function.

document.documentElement.addEventListener("click", function () < if (dropdownMenu.classList.contains("show")) < toggleDropdown(); >>);

And that is how you build a dropdown menu with JavaScript. Below is the codepen file to test this dropdown menu in action.

Conclusion

I sincerely hope you found this post interesting or useful. If you did, kindly share with your friends or subscribe to my blog so you won’t miss any future postings. Thanks for reading.

Источник