Spectre Menu
Last Updated :
21 Feb, 2022
The Spectre Menu is an important component of an interactive website. A menu is the collection of items that allow users to choose a value from the list.
The Spectre Menu contains the default menu and the dropdown menu. The Spectre Dropdown Menu is used to add a dropdown. You need to add a container element with the dropdown class and add a focusable element with the dropdown-toggle class for the button and a menu. If one wants the default menu then there is no need to use dropdown classes.
Spectre Menu Types:
- Spectre Default Menu: This is the default menu option, in this type we can use checkbox, radio etc.
- Spectre Dropdown Menu: This is a dropdown option, same as default but in the dropdown facility.
Spectre Menu Classes:
- menu: This class is used to holds the items in a container that’s the menu.
- menu-item: This class is used to create menu items,
Syntax:
<ul class="menu">
<li class="menu-item">
...
</li>
...
</ul>
The below examples illustrate the Spectre Menu:
Example 1: In this example, we will create a simple menu.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
</ head >
< body >
< center >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< strong >SPECTRE Menu</ strong >
< br >< br >
< strong >Spectre Default Menu:</ strong >
< div class = "btn-group" >
< ul class = "menu" >
< li >Choose the Topics of DSA</ li >
< li class = "divider" ></ li >
< li class = "menu-item" >Linked List</ li >
< li class = "menu-item" >Stacks</ li >
< li class = "menu-item" >Queues</ li >
< li class = "menu-item" >Trees</ li >
< li class = "menu-item" >Graphs</ li >
</ ul >
</ div >
</ center >
</ body >
</ html >
|
Output:
Spectre Menu
Example 2: In this example, we will create a dropdown menu that will also have a checkbox.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
</ head >
< body >
< center >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< strong >SPECTRE Menu</ strong >
< br >< br >
< strong >Spectre Dropdown Menu:</ strong >
< div class = "dropdown" >
< a href = "#" class = "btn btn-success dropdown-toggle" >
DSA Course < i class = "icon icon-caret" ></ i >
</ a >
< ul class = "menu" >
< li >Array
< input type = "checkbox" >
</ li >
< li >Linked List
< input type = "checkbox" >
</ li >
< li >Stacks
< input type = "checkbox" >
</ li >
< li >Queues
< input type = "checkbox" >
</ li >
< li >Trees
< input type = "checkbox" >
</ li >
< li >Graphs
< input type = "checkbox" >
</ li >
</ ul >
</ div >
</ center >
</ body >
</ html >
|
Output:
Spectre Menu
Reference: https://picturepan2.github.io/spectre/components/menu.html
Share your thoughts in the comments
Please Login to comment...