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.
<!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.
<!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