Advertisement

Advertisement


Pure CSS Menus

The menus in Pure are vertical by default, so we will see it first. To use the vertical menu classes like pure-menu, pure-menu-list, pure-menu-heading, etc. are used. Don't think that it is complex, it is not, just use the classes at the correct place and you will be able to create a menu quickly.

In Pure, we take the help of lists to create a menu and we have appropriate classes for everys step. Look at the syntax below, it is long but easy. Notice the different classes and the elements they are used with to create a menu-

Syntax to create Vertical Menu

<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> <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">Privacy Policy</a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Blog</a> </li> </ul> </div>

Look at the example below in which the whole syntax is used and try it by yourself also in the editor.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Vertical Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
<style>
div{
margin:10px;
}
</style>
<body>
<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>
<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">Privacy Policy</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Blog</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Feedback</a>
</li>
</ul>
</div>
</body>
</html>

Output

Pure.CSS Vertical Menu

Pure.CSS Horizontal Menu

These menus are horizontally aligned as the name suggests. To create a horizontal menu, you just have to add the pure-menu-horizontal class along with pure-menu. This simple addition will make the menu horizontally aligned. Look at the example below to notice the placement of the classes because student often get confuse with the place of a particular class.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Horizontal Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
<style>
div{
margin:10px;
}
</style>
<body>
<div class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Finance</a></li>
</ul>
</div>
<body>
</html>

Output

Pure.CSS Horizontal Menu

Selected and Disabled Menu item

If you want to make a menu in which the selected menu item appeared as currently selected by a change in some CSS property you can use the pure-menu-selected class and to disable an item you can use the class pure-menu-disabled. Look at the example below to notice the changes in the buttons of different classes.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Selected and Disabbled Menu items </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
<style>
div{
margin:10px;
}
</style>
<body>
<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">Disabled</li>
</ul>
</div>
</body>
</html>

Output

Pure.CSS Selected and Disabbled Menu items

Pure.CSS Dropdown Menus

A dropdown menu is also very essential and is used widely. In Pure, You can create dropdown menu by making some small changes. Add the class pure-menu-has-children to the menu item under which you need a dropdown menu and then make another list for the dropdown.

To continue using the hover effect on the submenu also, include the class pure-menu-allow-hover.

The example will clear all your doubts. Practice this in the editor to become more fluent.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Selected and Disabbled Menu items </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <style> body{ background:#fafafa; } div{ margin:10px; } </style> <body> <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">Home</a></li> <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"> <a href="#" id="menuLink1" class="pure-menu-link">Contacts </a> <ul class="pure-menu-children"> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Email</a></li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Twitter</a></li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Tumblr Blog</a></li> </ul> </li> </ul> </div> </body> </html>

Output

Pure.CSS Selected and Disabbled Menu items








Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.