Pure CSS Menu

Pure CSS menu is vertical by default. To create a Pure CSS menu, follow the following steps:

          Pure CSS: Vertical Menu
Step 1:- Wrap the menu list inside the container having .pure-menu class.
Step 2:-Place, all the menu list items inside the menu container i.e <ul> element base class.
Step 3:-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-link class. 
            

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>

Try it now

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

Pure CSS:Horizontal Menu

To create a horizontal menu, add the .pure-menu-horizontal class to the menu list container having class .pure-menu.

General Syntax

      <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>
  </ul>
</div>

Try it now

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 create active list item, assign .pure-menu-selected class to the <li> element base class and to create disabled item, add .pure-menu-disabled to the <li> element base class.

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>

Try it now

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 Menu

Pure CSS: Vertical Menu

Pure CSS:Horizontal Menu

Selected and Disabled Menu item

Web Tutorials