Pure CSS Selected and Disabled Items
Last Updated :
30 Jan, 2022
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 Selected and Disabled Items Menu provides default classes that enable us to highlight a menu item as disabled or selected. The “pure-menu-disabled” class name is added after the “pure-menu-item” class to disable an item and the “pure-menu-selected” class name is added to make the item look like selected.
Pure CSS Selected and Disabled Items Classes:
- pure-menu-disabled: This class is used to disable the menu item. This class is used with “pure-menu-item” class.
- pure-menu-selected: This class is used to make the menu item selectable. This class is used with “pure-menu-item” class.
Syntax:
<li class="pure-menu-item pure-menu-disabled">
Inner Elements
</li>
<li class="pure-menu-item pure-menu-selected">
Inner Elements
</li>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin="anonymous">
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Pure CSS Selected and Disabled Items</h3>
<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>
</center>
</body>
</html>
|
Output:
Pure CSS Selected and Disabled Items
Reference: https://purecss.io/menus/#selected-and-disabled-items
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...