Design a Vertical and Horizontal menu using Pure CSS

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.

For Creating Vertical Menu:

Menus are vertical by default in Pure CSS. It is easy to customize because of minimal default styling and low-specificity selectors.
All the components of menu should be enclosed within a division with class named "pure-menu".
Add class "pure-menu-heading" in the <span> element for the main heading or title.
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" .
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=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        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:

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=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        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:

Design a Vertical and Horizontal menu using Pure CSS

Explore