Css javascript menu dropdown

15 Amazing Drop Down JavaScript Menus [Examples]

There’s an element you’ll find in almost every website or web application in one way or another. And that’s the Drop Down effect or «element», usually sharing its name with the HTML select element, also known as select tag or select box.

The select element is an HTML tag that allows us to select one or multiple options, usually in forms.

While the Drop Down effect or «element» can also make reference to the visual effect that allows us to navigate submenus in headers, sidebars, or other menu-kind of elements.

In this article, we’ll be focusing on both. These are simple and easy to integrate into your design, with pure HTML, CSS and some JavaScript.

15 Amazing JavaScript Drop Down Menus

1. Pure javascript drop-down menu example

Here’s a great example of what a simple Dropdown menu looks like.

The JavaScript code is super simple. It just binds the click event to the main visible element so once clicked, it will show the submenu.

A very simple yet effective way to create a super simple collapsable menu.

2. Simple Vanilla JS dropdown menu

Here’s a custom select box element made out of HTML, CSS, and pure JavaScript.

This kind of dropdown menu mimics the behavior of an HTML Select input by allowing users to select a single option.

The custom style makes it look minimalists and clean. It uses white and blue colors and subtle use of shadows to avoid using hard borders.

3. Custom Drop Down menu javascript code

A beautiful list of 8 different dropdown menus with different styles.

Four of them react on click while the other 4 do it in mouse hover.

All drop down elements are integrated with pure Vanilla Javascript and require no external vendor library.

5. Drop Down Hover Menu With Submenus Using JS

A great example of a menu dropdown with multiple submenus.

This dropdown menu will display the main items when moving the mouse over it. And, on top of that, the cool thing about this menu is that it provides you with a way of adding submenus within the items on the list.

A great solution to a very common problem that developers face when designing menu headers.

6. Beautiful javascript drop down menu

This is a beautiful collapsable menu for a sidebar element. Ideal for menus that contain items grouped in different categories.

The menu uses group headings that toggle the collapsable items on the submenu when clicking on them.

It can be a very good option for large side menus with plenty of options. It helps limiting the options for the visitor.

7. Animated JavaScript Dropdown Menu

A gorgeous example of a submenu that showcases a dropdown with social media icons.

Adding images or icons is usually a great way to improve the user experience on any website. It makes it way faster for users to visualize the items and select the one they need.

This dropdown menu doesn’t use any external library, making it ideal for those who don’t want to depend on any particular framework.

8. Alpine JavaScript Dropdown

If you use the Alpine.js framework, this select box might be for you.

Here’s a basic example of how to integrate an HTML select box with JavaScript logic using Alpine.js.

It also uses TailwindCSS for styling. (Which, might not be ideal for all, but has a simple solution )

9. React MultiLevel Dropdown Menu

If you are looking for a dropdown menu to work as a context menu for your web application, then this example is for you.

A beautifully implemented menu that admits icons, grouping categories, and submenus within the menu.

It uses React and the vendor library Popper.js.

10. Bootstrap Dropdown Menu

If Bootstrap is your thing, then you should consider using this menu.

This bootstrap dropdown is perfect for buttons that provide users with multiple actions to choose from.

It admits grouping categories and switch toggles on the list.

11. Multiple Basic jQuery Dropdown Menus

If using jQuery is ok with you, then check out this beauty!

This is a great example of how a dropdown can contain, not only list of items, but also text or images.

This example shows how you can configure this dropdown menu to display on hover and on click, left or right aligned, on the top or at the bottom.

The select box uses a very simple styling making it ideal for minimalistic and white-themed websites.

13. Header Responsive Dropdown Hover Menu Bar

This example is a work of art.

Not only do we have a responsive menu, but a responsive dropdown menu where every single detail has been taken into account.

On the desktop, the submenus will get displayed on mouse hover. On responsive, on click.

I personally love the effect that the menu has on the desktop, and the simplicity it is on responsive mode. Which makes it perfect for all kinds of devices!

14. jQuery Dropdown Menu

Here’s another example of a jQuery dropdown, but this time, mimicking the behavior of an HTML select box.

Because the dropdown uses jQuery, it also allows you to retrieve the selected value of the select box in JavaScript. This way, you can make use of it in your logic.

15. CSS Animated Sidebar Dropdown Menu

This is a pure CSS dropdown menu that won’t involve any JavaScript.

Perhaps is not what you were looking for, but definitely, something to consider if you are looking for a sidebar menu.

The menu includes categories, icons for those, and arrows indicating the state of the submenu.

Conclusion

If you have a webpage, chances are you’ll have to include some kind of drop-down effect or select element on it. And if you use JavaScript, you’ll very likely want to bind it with your JavaScript logic.

In this article, we’ve shown you what we think are beautiful drop down menus. Menus that you will easily be able to integrate with your JavaScript code. You can use React, Vue, Angular, or pure simple vanilla JavaScript.

Some, like the drop down effects for headers and menus, will not require much logic from the JavaScript point of view, while others using the HTML select input
will do.

In order to use them, simply choose the dropdown menu that you like the most and copy the code to apply it to your website.

Related Articles

Источник

How TO — Clickable Dropdown

Learn how to create a clickable dropdown menu with CSS and JavaScript.

Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Create a Clickable Dropdown

Create a dropdown menu that appears when the user clicks on a button.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

element.

Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.

Wrap a element around the button and the to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

/* Dropdown Button */
.dropbtn background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>

/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.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;
>

/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show

Example Explained

We have styled the dropdown button with a background-color, padding, hover effect, etc.

The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: 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 to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

Step 3) Add JavaScript:

Example

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>

// Close the dropdown menu if the user clicks outside of it
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’);
>
>
>
>

Источник

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

Узнать, как создать интерактивное выпадающее меню с помощью 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’);
>
>
>
>

Источник