Dropdown on click css

W3.CSS Dropdowns

The w3-dropdown-hover class defines a hoverable dropdown element.

The w3-dropdown-content class defines the dropdown content to be displayed.

Example

Both the hoverable element and the dropdown content element can be any HTML element.

In the example above the hover element was a , and the dropdown content a .

In the next example the hover element is a

, and the dropdown content is a :

Example

Menu Dropdowns

The w3-dropdown-hover class is perfect for creating navigation bars with dropdown menues:

Example

Note: You will learn more about Navigation Bars later in this tutorial.

Clickable Dropdowns

The w3-dropdown-click class creates a clickable dropdown element.

With this class, the dropdown is opened by JavaScript:

Example

Image Dropdowns

Move the mouse over the image:

Example

Card Dropdowns

Move the mouse over one of the cities below:

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Tokyo is the capital city of Japan.

Example

Animated Dropdown

Use any of the w3-animate-classes to fade, zoom or slide in the dropdown content:

Example

Right-aligned Dropdown

Use the w3-right class to float the dropdown to the right. Use CSS to position the dropdown content (right:0 will make the dropdown menu go from right to left instead of left to right):

Источник

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’);
>
>
>
>

Источник

Pure CSS onclick Dropdown Menu with Demo

Generally, we can make a dropdown menu using pure CSS with the help of a hover pseudo-selector. So, users can easily reveal the dropdown menu by hovering over the title of the dropdown. But how can you make an onclick dropdown menu using pure CSS? Well, in this tutorial you will come to know how to create a pure CSS dropdown menu that will open on click.

As you have seen in the above preview, a horizontal menubar containing a dropdown title, arrow down icon, and submenu/dropdown. It’s all done using CSS only even the chevron-down icon next to the dropdown title is also made using border property. In order to open the dropdown on click, we used the HTML checkbox to toggle the dropdown height with the checked class selector.

You can check the final output on the demo page to see how the dropdown opens/closes smoothly while clicking the dropdown title. It quite works the same as other drop-down menus do. So, let’s get started with HTML to create this dropdown menu.

The HTML Structure

The HTML structure for the menubar consists of an unordered list. We’ll design the parent list as a horizontal menubar and the child list as a dropdown menu. So, create ul element with an id «menu» and place a checkbox input tag with a unique id inside the first list item. Likewise, create a label element just after the input tag and place the dropdown title inside it. Create another ul element just after the label element and define its class «submenu» , this ul is the dropdown menu.

Place your dropdown links inside the ul that has a class name «submenu» . Similarly, you can create multiple dropdowns in the menubar using the same method. You just need to assign a unique id to the input for the next dropdows. So, the complete HTML structure for the menu bar and dropdowns looks like below:

Basically, we are designing a simple one-level dropdown menu. If you want to make a multilevel dropdown menu, then you can check this tutorial to make a multilevel dropdown menu using pure CSS.

Styling onClick Dropdown Menu using CSS

In order to style the menubar, select the ul element that has id «menu» . Define its relative position with 100% width and 3em height value. Similarly, define the 0 value for the margin to remove the after and before spacing. Specify some value for left and right padding to leave some space inside the menubar. You can set a background color according to your needs, I used a dark gray color with the off-white text color.

Use CSS box-shadow property to make a light shadow to the bottom of it. Moreover, you can also set the menubar fixed on the top of the page by setting the position value «fixed» along with the top value 0.

After that, select the li (list item) of the menubar and use CSS float value to place the links/label (dropdown title) side by side. Define the «none» value for the list-style-type property in order to remove the default bullets of the list item.

Now target the label element to style the dropdown title. Keep its relative position and display it as a block element. Define its padding, line height, transition, and cursor property as described below:

Select the label with «:after pseudo-class» to design a chevron-down icon next to the dropdown title. Define its absolute position and display it as a block element. Define the 0 value for both width & height as we are going to make an arrow down icon using the border property. So, define border-top, border-bottom, border-left, and border-right values as follows:

We just need to update border-top and border-bottom values in order to convert the arrow-down to arrow-up when the dropdown opened. So, select the label:after with input checked selector and define the border values as described below:

label:hover, input:checked ~ label input:checked ~ label:after

After styling the menubar and dropdown title, now it’s time to design the dropdown menu. To do so, select the «submenu» class and define the 0 value for the max-height property to initially hide the dropdowns. Similarly, keep the overflow value hidden and define the background, box-shadow, transition, and position value as mentioned in the following snippet:

Select the “a” element of the submenu with hover pseudo-class to define hover styles. You can also check different hover effects if you want to apply a custom hover style for menu links.

Finally, hide the checkbox input and define max-height for the submenu with input-checked selector.

/*hide the inputs*/ input input:checked ~ ul.submenu

That’s all! I hope now you are able to create onclick dropdown menu using pure CSS. If you have any questions or suggestions, let me know by comment below.

Источник