Semantic-UI | Sidebar
Last Updated :
21 Jun, 2020
Semantic-UI open-source framework that provides sidebar features to create amazing user interfaces using CSS, jQuery which is very much similar to bootstrap. It has all different elements for creating amazing websites. It uses a class to add styles to HTML elements. A sidebar hides extra content beside a page. The page contents are usually shown on a side of the webpage.
Example: The following example demonstrates the semantic-UI sidebar feature in the webpage.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Sidebar</h2>
<button class="ui button primary">
Show Menu
</button>
<div class="ui sidebar inverted
vertical menu">
<h2 style="color:white">Menu</h2>
<a class="item">
Data Structure
</a>
<a class="item">
Web Designing
</a>
<a class="item">
Basic programming
</a>
</div>
<div class="pusher">
</div>
<h2>
Hello welcome to
geeksforgeeks
</h2>
</div>
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
<script>
$('button').click(function () {
$('.ui.sidebar').sidebar('toggle');
})
</script>
</body>
</html>
|
Output:
Example: The following example demonstrates semantic-UI sidebar on top.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Sidebar</h2>
<button class="ui button primary">
Show Menu
</button>
<div class="ui top sidebar
inverted vertical menu">
<h2 style="color:white">Menu</h2>
<a class="item">
Data Structure
</a>
<a class="item">
Web Designing
</a>
<a class="item">
Basic programming
</a>
</div>
<div class="pusher">
</div>
<h2>Hello welcome to geeksforgeeks</h2>
</div>
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
<script>
$('button').click(function () {
$('.ui.sidebar').sidebar('toggle');
})
</script>
</body>
</html>
|
Output:
Example: The following example demonstrates semantic-UI menu with icons.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Sidebar</h2>
<button class="ui button primary">
Show Menu
</button>
<div class="ui left demo vertical
inverted sidebar labeled
icon menu">
<a class="item">
<i class="globe icon"></i>
Internet
</a>
<a class="item">
<i class="code icon"></i>
Coding
</a>
<a class="item">
<i class="phone icon"></i>
Help
</a>
</div>
<h2>Hello welcome to geeksforgeeks</h2>
</div>
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
<script>
$('button').click(function () {
$('.ui.sidebar').sidebar('toggle');
})
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...