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
Last Updated :
22 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...