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. It uses a class to add CSS to the elements.
A Sidebar is a great way to hide additional content from the user unless required. Semantic UI provides us with a styled sidebar. Before jumping into the sidebar states, let’s have a look at various sidebar state classes.
Semantic UI Sidebar State:
- Visible: This is used to set the sidebar as visible on the initial screen load.
- Dimmed: This is used to dim the pusher container when the sidebar is toggled.
Syntax:
<div class="ui visible sidebar"> ... </div>
Example 1: In the below example, we have created a visible sidebar, which always appears when the screen loads.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Sidebar States</ title >
< link href =
rel = "stylesheet" />
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui sidebar visible inverted vertical menu" >
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class = "ui pusher container" style = "padding-left:150px;" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Sidebar States</ h4 >
< hr >
< br />
</ div >
</ body >
</ html >
|
Output:
Example 2: In the below example, we have created a dimmed pusher, where the pushed content is always dimmed when the sidebar is toggled.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Sidebar States</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui sidebar inverted vertical menu" >
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class = "ui dimmed pusher container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Sidebar States</ h4 >
< hr >
< br />
< button class = "ui button" onclick = "toggle()" >
Toggle Sidebar
</ button >
</ div >
< script >
const toggle = () => $('.ui.sidebar')
.sidebar('setting', 'transition',
'scale down').sidebar('toggle');
</ script >
</ body >
</ html >
|
Output:
Referenc: https://semantic-ui.com/modules/sidebar.html