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 use to make your website look more amazing.
Semantic UI has a bunch of components for user interface design. One of them is “Menu”. It is used to display the grouped navigation menu. A Menu is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.
Semantic UI Menu Variations :
- Fixed: This variation is used to fix the position of menu items in respect of their content.
- Stackable: This variation is used to display the stackable menu on the mobile screen.
- Inverted: This variation is used to make the meu items inverted (color-wise).
- Colored: This variation is used to add color to menu items.
- Icons: This variation is used to display the icons in the menu items.
- Labeled Icons: This variation is used to display the menu icons with labels.
- Fluid: This variation is used to make the menu take the full size of its container.
- Compact: This variation is used to make the menu take the full size of its container.
- Evenly Divided: This variation is used to display the menu items in evenly divided space.
- Attached: This variation is used to attach other content segments with the menu items.
- Size: This variation is used to make the menu vary in size.
- Fitted: This variation makes the menu to be fit in the smallest possible space.
- Borderless: This variation removes the border from the menu items.
Example 1: The following code also demonstrates some of the above menu variations.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="margin:200px">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>
<u>Semantic UI Menu Variations</u>
</strong>
<br /><br />
<strong>
Colored, Fluid, Evenly Divided, Labeled Icon Menu
</strong>
<div class="ui fluid four item labeled icon menu">
<a class="active green item">
<i class="tag icon"></i> GeeksforGeeks
</a>
<a class="orange item">
<i class="envelope outline icon"></i> Mail
</a>
<a class="brown item">
<i class="coffee icon"></i> Coffee
</a>
<a class="blue item">
<i class="code icon"></i> Code
</a>
</div>
</center>
<script>
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('.ui.menu a.item').on('click', function () {
$(this).addClass('active')
.siblings().removeClass('active');
})
</script>
</body>
</html>
Output :
Example 2: The following code demonstrates the other classes along with using the addClass() and removeClass() methods.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="margin:200px">
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<strong>
<u>Semantic UI Menu Variations</u>
</strong><br />
<strong>
Colored, Evenly Divided,
Borderless, Huge Menu
</strong>
<div class="ui huge inverted green
borderless four item menu">
<a class="active item"> Item One </a>
<a class="item"> Item Two </a>
<a class="item"> Item Three </a>
<a class="item"> Item Four </a>
</div>
</center>
<script>
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('.ui.menu a.item').on('click', function () {
$(this).addClass('active')
.siblings().removeClass('active');
})
</script>
</body>
</html>
Output:
