Pure CSS Selected and Disabled Items

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: 

Output:

👁 Pure CSS Selected and Disabled Items

Reference: https://pure-css.github.io/#selected-and-disabled-items