Semantic-UI Menu Attached Variation
Last Updated :
05 Mar, 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 Menu is used to display the grouped navigation menu. A navigation 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 Attached Variation is used to attach other content segments with the menu items.
Semantic-UI Menu Attached Variation Used Classes:
- top attached: This class is used to attach the menu items to the top of the content.
- bottom attached: This class is used to attach the menu items to the bottom of the content.
Syntax:
<div class="ui top attached menu">
...
</div>
Example 1: This example describes the uses of Semantic-UI Menu Attached Variation.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Menu Attached Variation
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Menu Attached Variation</ h3 >
</ div >
< div class = "ui container" >
< div class = "ui top attached tabular menu" >
< a class = "item active" >
HTML
</ a >
< a class = "item" >
CSS
</ a >
< a class = "item" >
JavaScript
</ a >
< a class = "item" >
Bootstrap
</ a >
</ div >
< div class = "ui attached segment" >
HTML stands for HyperText Markup Language.
It is used to design web pages using a markup
language. It is the combination of Hypertext
and Markup language. Hypertext defines the
link between the web pages. A markup language
is used to define the text document within tag
which defines the structure of web pages. It
is a markup language that is used by the
browser to manipulate text, images, and other
content to display in the required format.
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example describes the uses of Semantic-UI Menu Attached Variation.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Menu Attached Variation
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Menu Attached Variation</ h3 >
</ div >
< div class = "ui container" >
< div class = "ui top attached menu" >
< a class = "item active" >
HTML
</ a >
< a class = "item" >
CSS
</ a >
< a class = "item" >
JavaScript
</ a >
< a class = "item" >
Bootstrap
</ a >
</ div >
< div class = "ui attached segment" >
HTML stands for HyperText Markup Language.
It is used to design web pages using a markup
language. It is the combination of Hypertext
and Markup language. Hypertext defines the
link between the web pages. A markup language
is used to define the text document within tag
which defines the structure of web pages. It
is a markup language that is used by the
browser to manipulate text, images, and other
content to display in the required format.
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/collections/menu.html#attached
Share your thoughts in the comments
Please Login to comment...