Skip to content
Related Articles

Related Articles

Pure CSS Horizontal Menu

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 01 Feb, 2022

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!