Skip to content
Related Articles

Related Articles

Design a Vertical and Horizontal menu using Pure CSS
  • Last Updated : 22 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

Menu is a very important component in any website. It is a user interface element within a webpage that contains links to other sections of the website. It can be displayed horizontally or vertically before the main content of the webpage or header.

  1. For Creating Vertical Menu:

    1. Menus are vertical by default in Pure CSS. It is easy to customize because of minimal default styling and low-specificity selectors.
    2. All the components of menu should be enclosed within a division with class named “pure-menu”.
    3.  Add class “pure-menu-heading” in the <span> element for the main heading or title.
    4.  Then add all the items after heading inside <ul> element with class “pure-menu-list”. Each item should be enclosed within <li> element with class “pure-menu-item” .
    5.  If you want to link an item with a section of your webpage you can further enclosed it within <a> element with class “pure-menu-link”.

    Example:

    HTML




    <!DOCTYPE html>
    <html>
      
    <head>
      
        <!--Import Pure Css files-->
        <link rel="stylesheet" href=
            integrity=
    "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
            crossorigin="anonymous">
      
        <!-- Let browser know website is 
            optimized for mobile -->
            <meta name="viewport" content
            "width=device-width, initial-scale=1.0" />    
      
    </head>
      
    <body>
      
        <div class="pure-menu">
      
            <!--Main heading of menu-->
            <span class="pure-menu-heading">
                GEEKFORGEEKS
            </span>
      
            <ul class="pure-menu-list">
                  
                <!--List items of menu-->
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Home
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        About Us
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Contact
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Privacy Policy
                    </a>
                </li>
                  
      
            </ul>
        </div>
      
    </body>
      
    </html>

    Output:

  2. For creating Horizontal Menu:



    You can change the above vertical menu to horizontal menu by just adding the class name “pure-menu-horizontal” in the division at the beginning.

    Example:

    HTML




    <!DOCTYPE html>
    <html>
      
    <head>
      
        <!--Import Pure Css files-->
        <link rel="stylesheet" href=
            integrity=
    "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
            crossorigin="anonymous">
      
        <!-- Let browser know website is 
            optimized for mobile -->
            <meta name="viewport" content
            "width=device-width, initial-scale=1.0" />    
      
    </head>
      
    <body>
      
        <div class="pure-menu pure-menu-horizontal">
      
            <!--Main heading of menu-->
            <span class="pure-menu-heading">
                GEEKFORGEEKS
            </span>
      
            <ul class="pure-menu-list">
      
                <!--List items of menu-->
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Home
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        About Us
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Contact
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Privacy Policy
                    </a>
                </li>
                  
      
            </ul>
        </div>
      
    </body>
      
    </html>

    Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :