Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.
Semantic UI menu provides us with different menu classes to make the navigation bar or side menus more beautiful. Semantic UI uses flexbox in the menus allowing each menu item to automatically stretch to the size of the largest item. In this article let us see about the menu coloured variation.
Semantic UI Segment Menu Coloured Variation Classes:
- red: This sets the menu item colour as red.
- orange: This sets the menu item colour like orange.
- yellow: This sets the menu item colour as yellow.
- olive: This sets the menu item colour as olive.
- green: This sets the menu item colour as green.
- teal: This sets the menu item colour as teal.
- blue: This sets the menu item colour as blue.
- violet: This sets the menu item colour as violet.
- purple: This sets the menu item colour as purple.
- pink: This sets the menu item colour like pink.
- brown: This sets the menu item colour as brown.
- grey: This sets the menu item colour like grey.
- black: This sets the menu item colour as black.
- inverted: This sets the inverted colour menu item.
Syntax:
<div class="ui color item menu">
<a class="item">
...
</a>
<a class="item">
....
</a>
</div>Example-1: This example demonstrates the menu coloured variation type.
<!DOCTYPE html> <html>
<head>
<link href=
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Menu Colored Variation
</strong>
</center>
<br />
<br />
<div class="ui container">
<div class="ui teal four item menu">
<a class="active item">
Home
</a>
<a class="item">
Problems
</a>
<a class="item">
Courses
</a>
<a class="item">
Events
</a>
</div>
<div class="ui red four item menu">
<a class="active item">
Home
</a>
<a class="item">
Problems
</a>
<a class="item">
Courses
</a>
<a class="item">
Events
</a>
</div>
<div class="ui green four item menu">
<a class="active item">
Home
</a>
<a class="item">
Problems
</a>
<a class="item">
Courses
</a>
<a class="item">
Events
</a>
</div>
<div class="ui blue four item menu">
<a class="active item">
Home
</a>
<a class="item">
Problems
</a>
<a class="item">
Courses
</a>
<a class="item">
Events
</a>
</div>
<div class="ui violet four item menu">
<a class="active item">
Home
</a>
<a class="item">
Problems
</a>
<a class="item">
Courses
</a>
<a class="item">
Events
</a>
</div>
<div class="ui pink four item menu">
<a class="active item">
Home
</a>
<a class="item">
Problems
</a>
<a class="item">
Courses
</a>
<a class="item">
Events
</a>
</div>
<div class="ui olive four item menu">
<a class="active item">
Home
</a>
<a class="item">
Problems
</a>
<a class="item">
Courses
</a>
<a class="item">
Events
</a>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Menu Colored Variation
Example-2: This example demonstrates the menu inverted coloured variation type.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Menu Colored Variation
</strong>
</center>
<br />
<br />
<div class="ui container">
<div class="ui teal inverted menu">
<a class="active item">
Home
</a>
<a class="item">
Courses
</a>
<a class="item">
About
</a>
<a class="right item">
Sign in
</a>
</div>
<div class="ui red inverted menu">
<a class="active item">
Home
</a>
<a class="item">
Courses
</a>
<a class="item">
About
</a>
<a class="right item">
Sign in
</a>
</div>
<div class="ui green inverted menu">
<a class="active item">
Home
</a>
<a class="item">
Courses
</a>
<a class="item">
About
</a>
<a class="right item">
Sign in
</a>
</div>
<div class="ui blue inverted menu">
<a class="active item">
Home
</a>
<a class="item">
Courses
</a>
<a class="item">
About
</a>
<a class="right item">
Sign in
</a>
</div>
<div class="ui olive inverted menu">
<a class="active item">
Home
</a>
<a class="item">
Courses
</a>
<a class="item">
About
</a>
<a class="right item">
Sign in
</a>
</div>
<div class="ui pink inverted menu">
<a class="active item">
Home
</a>
<a class="item">
Courses
</a>
<a class="item">
About
</a>
<a class="right item">
Sign in
</a>
</div>
</div>
</body>
</html>
|
Output :
Semantic-UI Menu Colored Variation
Reference: https://semantic-ui.com/collections/menu.html#colored