<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin
=
"anonymous"
>
<
script
src
=
integrity
=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"row"
>
<
div
class
=
"col-3"
id
=
"mySidebar"
style="display: none;
background-color: #fbdeff;">
<
button
onclick
=
"side_close()"
>
Close ×
</
button
>
<
h1
>Menu</
h1
>
<
a
href
=
"#"
>Link 1</
a
>
<
br
/>
<
br
/>
<
a
href
=
"#"
>Link 2</
a
>
<
br
/>
<
br
/>
<
a
href
=
"#"
>Link 3</
a
>
</
div
>
<
div
class
=
"col-9"
id
=
"main"
>
<
button
id
=
"openNav"
onclick
=
"side_open()"
>☰</
button
>
<
div
class
=
"row"
style
=
"background-color: #c2ff95;"
>
<
div
class
=
"col"
>
<
h1
>Page Content</
h1
>
</
div
>
</
div
>
<
div
class
=
"row"
style
=
"background-color: #deffe2;"
>
<
div
class
=
"col"
>
Bootstrap is a free and open-source
tool collection for creating
responsive websites and web
applications. It is the most
popular HTML, CSS, and JavaScript
framework for developing responsive,
mobile-first web
sites.
</
div
>
</
div
>
<
div
class
=
"row"
style
=
"background-color: #b8b7f9;"
>
<
div
class
=
"col"
>
Bootstrap is a free and open-source
tool collection for creating
responsive websites and web
applications. It is the most
popular HTML, CSS, and JavaScript
framework for developing responsive,
mobile-first web
sites.
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
// JavaScript functions to open the sidebar
function side_open() {
/* Sidebar takes 25% of the total width
of main container in open state */
document.getElementById(
"mySidebar").style.width = "25%";
document.getElementById(
"mySidebar").style.display = "block";
document.getElementById(
"openNav").style.display = "none";
}
// JavaScript functions to close the sidebar
function side_close() {
// Sidebar takes 0% of the total width
// of main container in open state
document.getElementById(
"main").style.marginLeft = "0%";
// Visibility is hidden
document.getElementById(
"mySidebar").style.display = "none";
document.getElementById(
"openNav").style.display = "inline-block";
}
</
script
>
</
body
>
</
html
>