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 menupure-menu-heading
: It is used for brand namepure-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>
.Follow the given below steps to create the vertical menu.
.pure-menu
class.
External Wrapper
<div class="pure-menu"></div>
.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>
<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>
.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>
Source Code: Output
If you see the above example, then it is clear that vertical menu takes 100% width by default.
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>
Source Code: Output
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>
Source Code: Output
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>
Source Code: Output
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>
Source Code: Output