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