<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI Sidebar Variations</
title
>
<
link
href
=
rel
=
"stylesheet"
/>
<
script
src
=
integrity
=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
</
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"
>GeeksforGeeks</
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
>