Semantic-UI Menu States
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to make your website look more amazing. It uses a class to add CSS to the elements.
The menu is used to group items that are used to navigate the website. Semantic UI provides us with a styled menu. Let’s have a look at various menu states.
Semantic UI Menu States:
- Hover: This state makes the background of the menu items darker when hovered, indicating an action can be performed by clicking on it.
- Active: This provides us with an option of making a menu item darker, which can be used to indicate an important element.
Syntax:
<div class="ui menu">
<div class="active item">
...
</div>
...
</div>
Example 1: In the below example, we have created hoverable menu items using the link class.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Menu States</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Menu States</h4> <hr> <br /> <div class="ui compact menu"> <div class="link item"> Home hoverable </div> <div class="item"> About </div> <div class="link item"> Profile hoverable </div> <div class="item"> Contact Us </div> </div> </div></body></html> |
Output:
Semantic-UI Menu States
Example 2: In the below example, we have created a menu with active items.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Menu States</title> <link href= rel="stylesheet" /> <script src= integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script></head><body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Menu States</h4> <hr> <br/> <div class="ui compact menu"> <div class="link active item"> Home </div> <div class="link item"> About </div> <div class="link active item"> Profile </div> <div class="link item"> Contact Us </div> </div> </div></body></html> |
Output:
Semantic-UI Menu States
Reference: https://semantic-ui.com/collections/menu.html
Please Login to comment...