Spectre Menu
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 = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 style = "color:green" >w3wiki</ 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:
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 = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 style = "color:green" >w3wiki</ 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:
Reference: https://picturepan2.github.io/spectre/components/menu.html
Contact Us