Semantic-UI Menu Variations
Last Updated :
20 May, 2022
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.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" />
< script src =
</ script >
< script src =
</ 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 :
Menu Variations
Example 2: The following code demonstrates the other classes along with using the addClass() and removeClass() methods.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" />
</ script >
< script src =
</ 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:
Menu Variations
Reference: https://semantic-ui.com/collections/menu.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...