Pure CSS Menu

Pure CSS Menus are vertical by default, and they take up 100% of the available width of their container. But you can limit the menu width through the CSS display:inline-block or width property. It uses the following predefined classes:

.pure-menu: It is used for main container of the vertical menu
pure-menu-heading: It is used for brand name
pure-menu-list: It is used for menu list container i.e. <ul>
pure-menu-item: It is used for menu list item i.e <li>.
pure-menu-item: It is used for menu list item i.e <li>.
pure-menu-link: It is used for every anchor elment i.e <a>.

How To Create Pure CSS Vertical Menu ?

Follow the given below steps to create the vertical menu.

Step 1:- Wrap the menu list and menu heading/ brand inside the external wrapper and add .pure-menu class.
External Wrapper
```
 
   <div class="pure-menu"></div>
   
```

Step 2:- Use .pure-menu-heading class for the navigation brand/heading name.

Brand Name

 
	   <div class="pure-menu">
	     <span class="pure-menu-heading">Brand Name </span>
	   </div>

Step 3:- Place, all the menu list items inside the menu container i.e <ul> element and add .pure-menu-list class.

Menu Container

 
	 <div class="pure-menu">
	  <span class="pure-menu-heading">Brand Name</span>
	  <ul class="pure-menu-list">
	  </ul>
	</div>

Step 4:- Add .pure-menu-link class to the hyperlink element i.e <a> base class, and wrap inside the container i.e <li> element base class having .pure-menu-item class.

Menu Items

 
	 <div class="pure-menu">
	  <span class="pure-menu-heading">Brand Name</span>
	  <ul class="pure-menu-list">
		<li class="pure-menu-item">
	       <a href="#" class="pure-menu-link">Link Item</a>
	    </li>
	  </ul>
	</div>

General Syntax

      <div class="pure-menu">
  <span class="pure-menu-heading">Brand Name</span>
  <ul class="pure-menu-list">
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
  </ul>
</div>

Source Code

          
            <div class="pure-menu">
  <span class="pure-menu-heading">sudhakarinfotech</span>
  <ul class="pure-menu-list">
    <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">Services</a>
    </li>
  </ul>
</div>

Try it now

Source Code: Output

If you see the above example, then it is clear that vertical menu takes 100% width by default.

How To Control Vertical Menu Width

To limit the width of the vertical menu, simply set the width of the vertical menu or add display: inline property using CSS. Let us understand it width the help of an examples.

       
    .custom-restricted-width {
        /* To limit the menu width to the content of the menu: */
        display: inline-block;
        /* Or set the width explicitly: */
        /* width: 10em; */
    }
   
  

Source Code

          
            <div class="pure-menu"  style="display: inline-block;">
    <span class="pure-menu-heading">sudhakarinfotech</span>
    <ul class="pure-menu-list">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Pure CSS</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Bootstrap</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Javascript</a>
        </li>
    </ul>
</div>

Try it now

Source Code: Output

Pure CSS: Horizontal Menu

This menu is horizontally aligned. To create a horizontal menu, add the pure-menu-horizontal class name. In other words, if you want to change the vertical menu to the horizontal, then add an additional pure-menu-horizontal class with a pure-menu class name.

General Syntax

      <div class="pure-menu pure-menu-horizontal">
</div>

Source Code

          
            <div class="pure-menu pure-menu-horizontal">
  <span class="pure-menu-heading">Brand Name</span>
  <ul class="pure-menu-list">
    <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">Services</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Gallery</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Contact Us</a>
    </li>
  </ul>
</div>

Try it now

Source Code: Output

Selected and Disabled Menu item

To make a menu in which the selected menu item appears as a currently selected then use pure-menu-selected class to the menu list item i.e <li> and to create disabled menu item, use .pure-menu-disabled class. Disabled menu items appear faded and do not inherit hover styles.

General Syntax

      <div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">Selected</a>
    </li>
    <li class="pure-menu-item pure-menu-disabled">
      <a href="#" class="pure-menu-link">Disabled</a>
    </li>
  </ul>
</div>

Source Code

          
            <div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">Selected</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Normal</a>
    </li>
    <li class="pure-menu-item pure-menu-disabled">
      <a href="#" class="pure-menu-link">Disabled</a>
    </li>
  </ul>
</div>

Try it now

Source Code: Output

Pure CSS Dropdown

It is a list of options that displays whenever hover or click the menu. It provides the facility to select either single or multi-list items. To create dropdown menu, add pure-menu-has-children class to the menu item under which you want to make a dropdown menu and then create another list for the dropdown.

Source Code

          
            <div class="pure-menu pure-menu-horizontal" style="height:200px;">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a href="#" id="menuLink1" class="pure-menu-link">Services </a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Web Design</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Web Development</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Graphics Design</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Try it now

Source Code: Output

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4