Open In App

Pure CSS Horizontal Menu

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          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

Pure CSS Horizontal Menu



Last Updated : 01 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads