Pure CSS Horizontal Menu

We come across horizontal menus on almost every website. Pure CSS helps us implement such menus with ease by using the pure-menu class. Pure-menu class by default creates a vertical menu which we can simply convert into a horizontal one by adding the class pure-menu-horizontal. One of the most common uses of a horizontal menu is in navigation bars (navbars).

We will use the following classes to help us achieve the goal at hand:

pure-menu: This helps us create a menu. (creates a vertical menu by default)
pure-menu-horizontal: This helps us create a horizontal menu.
pure-menu-list: This helps us specify the list which contains the menu items.
pure-menu-item: This helps us specify that a particular item belongs in the list
pure-menu-link: This helps us specify the links in the menu items
pure-menu-heading: This helps us specify a heading for our menu

Syntax:

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-heading">...</li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">
                ...
            </a>
        </li>
    </ul>
</div>

Note: Do not forget to add the pure CSS CDN to be able to use the pure CSS framework

Example: Let us suppose we want to create a horizontal menu for the nav bar of our portfolio.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <!--pure-CSS-CDN-->

    <link rel="stylesheet"

          href= 
"https://unpkg.com/purecss@2.0.6/build/pure-min.css"

          integrity= 

"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" 

          crossorigin= 

"anonymous"> 

    <!--Custom style for the logo-->

    <style> 

        .logo { 

            color: #2f8d46; 

            font-weight: bold; 

            font-size: 1.5rem; 

        } 

    </style> 

    <title>Menu</title> 

</head> 

<body> 

    <nav class="menu pure-menu pure-menu-horizontal"> 

        <a href="#" 

           class="logo pure-menu-heading pure-menu-link"> 

            MYSITE 

        </a> 

        <ul class="menu pure-menu-list"> 

            <li class="pure-menu-item"> 

                <a class="pure-menu-link"> 

                  About 

                </a> 

            </li> 

            <li class="pure-menu-item"> 

                <a class="pure-menu-link"> 

                  Projects 

                </a> 

            </li> 

            <li class="pure-menu-item"> 

                <a class="pure-menu-link"> 

                  Contact 

                </a> 

            </li> 

        </ul> 

    </nav> 

</body> 

</html>

Output:

Pure CSS Horizontal Menu

Article Tags :

CSS

Web Technologies

Elite-Batch-2022

Pure CSS