In this article we will learn about Pure CSS Menus, 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.
Pure CSS Menu Classes:
- Vertical Menu
- Horizontal Menu
- Selected and Disabled Items Inside a Menu
- Dropdown Menu
- Vertical Menu With Nested Submenu
Vertical Menu: The Menus provided by Pure.CSS are vertical by default. The default styling is minimal so the developer can customize it easily. The default vertical menu generally contains the full width of its container but the developer can specify it. The developer can also set the display attribute accordingly.
- pure-menu is the default class that generates the horizontal menu. It can contain the menu items and headings in the form of a list.
- pure-menu-list 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 is the class that is added to the links inside the menu items.
- pure-menu-heading is the class that is added for the headings inside or outside the menu list. By default, it capitalizes the text inside.
Syntax :
<div class="pure-menu">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
Some Text Here
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Some Text Here
</a>
</li>
</ul>
</div>
Example: Here is the implementation of the above-explained method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Menus</title>
<link rel="stylesheet"
href=
"https://unpkg.com/[email protected]/build/pure-min.css">
<style>
.custom-width {
display: inline-block;
}
.pure-menu-heading{
color: #308d46;
}
</style>
</head>
<body>
<div class="pure-menu custom-width">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Tutorials
</a>
</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:
Horizontal Menu: Add the class 'pure-menu-horizontal' to the default vertical 'pure-menu' to make it a horizontal menu. The child elements like the pure-menu-list , pure-menu-item , pure-menu-link, and pure-menu-heading remain the same as the default vertical menu.
Syntax:
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-heading">Some Text Here</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Some Text Here
</a>
</li>
</ul>
</div>
Example: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Menus</title>
<link rel="stylesheet"
href=
"https://unpkg.com/[email protected]/build/pure-min.css">
<style>
.pure-menu-heading{
color: #308d46;
}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Tutorials
</a>
</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:
Selected and Disabled Items Inside the Menu: Pure CSS provides default classes that enable us to highlight a menu item as disabled or selected. 'pure-menu-disabled' class name is added after the 'pure-menu-item' to disable an item and the 'pure-menu-selected' class name is added to make the item look like selected.
Syntax:
<li class="pure-menu-item pure-menu-disabled">
Inner Elements
</li>
<li class="pure-menu-item pure-menu-selected">
Inner Elements
</li>
Example: Here is the basic use of the above method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure.CSS | Menus</title>
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<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>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Normal
</a>
</li>
</ul>
</div>
</body>
</html>
Output:
Dropdown Menu: Dropdown items can only be added to the horizontal menu. The steps to create a dropdown menu are discussed below.
- Pick the list item to which you want to add dropdown items and add the class 'pure-menu-has-children' to it.
- Create an unordered list inside that element with a class of 'pure-menu-children'.
- Add the list items inside it with a class of 'pure-menu-item'.
- Add the class 'pure-menu-allow-hover' to the parent list-item to make the dropdown occur on hover.
Syntax:
<li class="pure-menu-item
pure-menu-has-children pure-menu-allow-hover">
Some Inner Elements
<ul class="pure-menu-children">
<li class="pure-menu-item">
Inner Elements
</li>
</ul>
</li>
Example: Here is the basic example of the above method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure.CSS | Menus</title>
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<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 2021
</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:
Vertical Menu With Nested Submenu: The method of creating a vertical menu with a nested submenu is very much similar to that of the dropdown menu. Just the menu has to be a default vertical menu instead of a horizontal menu.
Syntax:
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Some Inner Elements
<ul class="pure-menu-children">
<li class="pure-menu-item">
Inner Elements
</li>
</ul>
</li>
Example: Here is the basic example of our method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Menus</title>
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
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 2021
</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:
Similar Reads
Pure CSS Pure CSS is a CSS framework. It is a set of free and open-source tools for building responsive websites and web applications. Yahoo developed this, which is used to make websites that are quicker, more elegant, and more responsive. It is a viable alternative to Bootstrap. Pure CSS is designed with k
2 min read
Pure CSS Introduction Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Why we use Pure CSS?
2 min read
Pure CSS Base
Pure CSS Responsive Horizontal-to-Scrollable Menu Layout A Horizontal-to-Scrollable menu is a type of responsive menu bar in Pure.CSS, which changes the horizontal menu bar to a horizontally scrollable menu bar. It is used to make the menu bar responsive when the width of the website increases or decreases from device to device, For example, Tablets, Smar
4 min read
Pure CSS Buttons
Pure CSS Tables
Pure CSS TablesIntroduction: Before starting with Pure we must know the basics of plain CSS. Basically, Pure CSS is a Cascading Style Sheet framework developed by YAHOO. The main reason for developing Pure CSS is used to develop responsive and reactive websites like Bootstrap which is also compatible with mobile d
5 min read
Pure CSS Bordered TableTable is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add "pure-table" class to add styles on table. This class adds the padding and borders to table elements, and empha
2 min read
Pure CSS Table with Horizontal BordersA table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add a "pure-table" class to add styles to the table. This class adds padding and borders to table elements and em
2 min read
Pure CSS Stripped TableA table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add a "pure-table" class to add styles to the table. This class adds padding and borders to table elements and em
2 min read
Pure CSS Forms
Pure CSS FormsForms are essential in websites to collect data or information for various purposes. Using Pure CSS we can create different types of forms. Pure CSS Forms Classes: Default Form Stacked Form Aligned Form Grouped Inputs Default Form: Add the class "pure-form" to any <form> element to create a de
4 min read
Pure CSS Stacked FormPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. In this article, we w
2 min read
Pure CSS Aligned FormPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, more beautiful, and more responsive websites. It can be used as an alternative to Bootstrap. Pure CSS Al
2 min read
Pure CSS Form Grouped InputsPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. In this article, we w
2 min read
Pure CSS Form Input SizingForms are essential in websites to collect data or information for various purposes. Using Pure CSS Forms, we can create different types of forms. The size of the inputs of forms is always important. So inputs are important in any webpage form. It is used to take various inputs from the user which a
2 min read
Pure.CSS Required InputsIn some cases when we ask someone to fill a form and few things are optional and few things are a must to fill in that form. In that case, we can use the HTML required in Pure CSS as well. This attribute works with other types of input like radio, checkbox, number, text, etc. Syntax: <input requi
1 min read
Pure CSS Disabled InputsIn this article, we will see how to disable the input field in Pure CSS. In some cases, when we ask someone to fill a form few things are activated as well a few things are disabled for their previous choices. In that case, we can use HTML disabled in Pure CSS as well. This attribute works with othe
2 min read
Pure CSS Rounded InputsPure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Pure CSS provides a "
1 min read
Pure CSS Checkboxes and Radio ButtonsIn Pure CSS, we do not have any particular layout for Checkboxes and Radio Button type inputs. But we can use those types of inputs by using the Pure CSS classes. The below-mentioned classes are used for checkboxes and radio buttons. Checkbox: To use checkboxes, we can apply the input tag inside of
2 min read
Pure CSS Grids
Pure CSS Menus