Pure CSS Vertical Menu with Submenus
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 = "https://unpkg.com/purecss@2.0.6/build/pure-min.css" > < 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" > w3wiki </ 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 = "https://unpkg.com/purecss@2.0.6/build/pure-min.css" > < 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" > w3wiki </ 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 = "https://unpkg.com/purecss@2.0.6/build/pure-min.css" > < 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" > w3wiki </ 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" > Beginner 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 = "https://unpkg.com/purecss@2.0.6/build/pure-min.css" > < 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" > w3wiki </ 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" > Beginner 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:
Reference: https://purecss.io/menus/