Menus are the main tools for visitors to navigate throughout a website. Pure.CSS comes up with very simple vertical and horizontal menus that can be easily customized by the developer. Vertical Menu with Submenus is as similar as nested vertical menu.
Pure CSS Vertical Menu Classes:
- pure-menu-heading: It is the class that is added for the headings inside or outside the menu list. By default, it capitalizes the text inside.
- pure-menu-list: It is the class for the unordered list that contains the menu items. The list items inside this list must have the class “pure-menu-item”.
- pure-menu-link: It is the class that is added to the links inside the menu items.
- pure-menu-allow-hover: It is the class to display the submenu on hover.
- pure-menu-has-children: It is the class to mention menu having some submenus.
- pure-menu-children: It is the class to mention submenus.
Syntax:
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#" class="pure-menu-link">...</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">...</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">..</a>
</li>
</ul>
</li>Example 1: In this example, we will create Vertical Menu with a single Submenu.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Pure CSS Vertical Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
/* To limit the menu width to
the content of the menu: */
display: inline-block;
}
</style>
</head>
<body>
<div class=" pure-menu custom-display">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Tutorials
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Data Structures and Algorithms
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
GATE 2022
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Practice
</a>
</li>
</ul>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Students
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will create demonstrate Vertical Menu with nested Submenu.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Pure CSS Vertical Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
/* To limit the menu width to
the content of the menu: */
display: inline-block;
}
</style>
</head>
<body>
<div class=" pure-menu custom-display">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Tutorials
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Data Structures and Algorithms
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
GATE 2022
</a>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Practice
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
HTML
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
CSS
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
JavaScript
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Students
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
|
Output:
Example 3: In this example, we will create demonstrate Vertical Menu with multiple Submenus.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Pure CSS Vertical Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
/* To limit the menu width to
the content of the menu: */
display: inline-block;
}
</style>
</head>
<body>
<div class=" pure-menu custom-display">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Tutorials
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Data Structures and Algorithms
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
GATE 2022
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Practice
</a>
</li>
</ul>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Students
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Competitive Programming
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Geeks of the Month
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Placement Courses
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Internship
</a>
</li>
</ul>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Jobs
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Apply for Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Post a Jobs
</a>
</li>
</ul>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
|
Output:
Example 4: In this example, we will create demonstrate Vertical Menu with Multiple Submenus and nested Submenu.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Pure CSS Vertical Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
/* To limit the menu width to
the content of the menu: */
display: inline-block;
}
</style>
</head>
<body>
<div class=" pure-menu custom-display">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Tutorials
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Data Structures and Algorithms
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
GATE 2022
</a>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#" class="pure-menu-link">
Practice
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
HTML
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
CSS
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
JavaScript
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Students
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Competitive Programming
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Geeks of the Month
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Placement Courses
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Internship
</a>
</li>
</ul>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Jobs
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Apply for Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Post a Jobs
</a>
</li>
</ul>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
|
Output:
Pure CSS Vertical Menu with Submenus
Reference: https://purecss.io/menus/