Semantic-UI Sidebar Variations
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 variations, let’s have a look at various sidebar variation classes.
Semantic UI Sidebar variation classes:
Syntax:
<div class="ui direction-variation-class width-variation-class sidebar"> ... </div>
Example: In the below example, we have created various sidebars with different directions.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Sidebar Variations</ title > < 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" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui left 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 right 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 top sidebar inverted horizontal 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 bottom sidebar inverted horizontal 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" >w3wiki</ h2 > < h4 >Semantic UI Sidebar Variations</ h4 > < hr > < br /> < button class = "ui button" onclick = "toggleLeft()" > Toggle Left Sidebar </ button > < button class = "ui button" onclick = "toggleRight()" > Toggle Right Sidebar </ button > < button class = "ui button" onclick = "toggleTop()" > Toggle Top Sidebar </ button > < button class = "ui button" onclick = "toggleBottom()" > Toggle Bottom Sidebar </ button > < button class = "ui button" onclick = "toggleAll()" > Toggle All </ button > </ div > < script > const toggleLeft = () => $('.ui.left.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); const toggleRight = () => $('.ui.right.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); const toggleTop = () => $('.ui.top.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); const toggleBottom = () => $('.ui.bottom.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); const toggleAll = () => { $('.ui.left.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); $('.ui.right.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); $('.ui.top.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); $('.ui.bottom.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); } </ script > </ body > </ html > |
Output:
Example 2: In the below example, we have created sidebars of various widths.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Sidebar Variations</ title > < 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" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui left thin sidebar inverted vertical menu t" > < 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 left very thin sidebar inverted vertical menu vt"> < 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 left wide sidebar inverted vertical menu w"> < 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 left very wide sidebar inverted vertical menu vw"> < 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" >w3wiki</ h2 > < h4 >Semantic UI Sidebar Variations</ h4 > < hr > < br /> < button class = "ui button" onclick = "toggleLeft()" > Toggle Thin Sidebar </ button > < button class = "ui button" onclick = "toggleRight()" > Toggle Very Thin Sidebar </ button > < button class = "ui button" onclick = "toggleTop()" > Toggle Wide Sidebar </ button > < button class = "ui button" onclick = "toggleBottom()" > Toggle Very Wide Sidebar </ button > </ div > < script > const toggleLeft = () => $('.ui.t.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); const toggleRight = () => $('.ui.vt.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); const toggleTop = () => $('.ui.w.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); const toggleBottom = () => $('.ui.vw.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle'); </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/modules/sidebar.html
Contact Us