Open In App

W3.CSS Dropdown

Improve
Improve
Like Article
Like
Save
Share
Report

Dropdowns are one of the most important parts of an interactive website. A dropdown menu is the collection of menu items that allow users to choose a value from the list. W3.CSS also provides classes to make a smooth and responsive dropdown menu. There are two types of dropdown menu available i.e. hoverable and clickable. The classes available for dropdown are as follows:

Sr. No.

Class Name

Description

1.

w3-dropdown-content 

It is used to make the content of the dropdown menu.

2.

w3-dropdown-hover

It is used to make a hoverable dropdown element.

3.

w3-dropdown-click

It is used to make a clickable dropdown menu.

Example: Creating a hoverable dropdown menu.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
  
<body>
  
    <!-- w3-container is used to add 16px
          padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
           of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
      
    <!-- Hoverable Dropdown Menu in W3.CSS -->
    <div class="w3-container w3-center">
        <!-- Hoverable Dropdown Menu -->
        <div class="w3-dropdown-hover w3-round-large">
            <button class=
          "w3-button w3-hover-blue w3-pink w3-round-large">
                Hover Over Me!
            </button>
            <div class="w3-dropdown-content w3-bar-block w3-border">
                <a href="#" class="w3-bar-item w3-button">
                    Gfg
                </a>
                <a href="#" class="w3-bar-item w3-button">
                    GeeksForGeeks
                </a>
                <a href="#" class="w3-bar-item w3-button">
                  Geek
              </a>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

  • Before Hover:

  • After Hover:

Example: Creating a clickable dropdown menu.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
      
    <!-- Function to show and hide dropdown menu -->
    <script>
        function show() {
          var x = document.getElementById("gfg");
          if (x.className.indexOf("w3-show") == -1) { 
            x.className += " w3-show";
          } else {
            x.className = x.className.replace(" w3-show", "");
          }
        }
    </script>
</head>
  
<body>
    <!-- w3-container is used to add 16px
          padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
          of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
          GeeksForGeeks
      </h2>
    </div>
      
    <!-- Hoverable Dropdown Menu in W3.CSS -->
    <div class="w3-container w3-center">
        <!-- Hoverable Dropdown Menu -->
        <div class="w3-dropdown-click w3-round-large">
            <button onclick = "show()" 
                    class="w3-button w3-blue w3-round-large">
                Click Me!
            </button>
  
            <div id="gfg" 
                 class="w3-dropdown-content w3-bar-block w3-border">
                <a href="#" class="w3-bar-item w3-button">Gfg</a>
                <a href="#" class="w3-bar-item w3-button">
                    GeeksForGeeks
                </a>
                <a href="#" class="w3-bar-item w3-button">Geek</a>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

  • Before Click:

  • After Click:



Last Updated : 02 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads