<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"
/>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
h2,
h3 {
margin-left: 20px;
}
</
style
>
</
head
>
<
body
>
<
h2
style
=
"color:green;"
>
GeeksforGeeks
</
h2
>
<
h3
>Foundation CSS off-canvas position</
h3
>
<
div
style
=
"margin:1rem 5rem;"
>
<
button
type
=
"button"
class
=
"button"
data-toggle
=
"offCanvasLeftSplit1"
>
Open off-canvas with absolute position
</
button
>
<
button
type
=
"button"
class
=
"button"
data-toggle
=
"offCanvasRightSplit2"
style
=
"margin-left:26rem;"
>
Open off-canvas with fixed position
</
button
>
<
div
class
=
"grid-x grid-margin-x"
>
<
div
class
=
"cell small-6"
>
<
div
class
=
"off-canvas-wrapper"
>
<
div
class
=
"off-canvas-absolute position-left"
id
=
"offCanvasLeftSplit1"
data-off-canvas>
<
ul
style
=
"margin:2rem;"
>
<
li
><
a
>DSA</
a
></
li
>
<
li
><
a
>Algorithms</
a
></
li
>
<
li
><
a
>Competetive Programming</
a
></
li
>
<
li
><
a
>Java</
a
></
li
>
<
li
><
a
>C++</
a
></
li
>
<
li
><
a
>Python</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"off-canvas-content"
style
=
"min-height:300px;"
data-off-canvas-content>
<
p
>My off-canvas viewport is of my size!</
p
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"cell small-6"
>
<
div
class
=
"off-canvas-wrapper"
>
<
div
class
=
"off-canvas position-right"
id
=
"offCanvasRightSplit2"
data-off-canvas>
<
ul
style
=
"margin: 2rem;"
>
<
li
><
a
>DSA</
a
></
li
>
<
li
><
a
>Algorithms</
a
></
li
>
<
li
><
a
>Competetive Programming</
a
></
li
>
<
li
><
a
>Java</
a
></
li
>
<
li
><
a
>C++</
a
></
li
>
<
li
><
a
>Python</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"off-canvas-content"
style
=
"min-height:300px;"
data-off-canvas-content>
<
p
>
My off-canvas viewport is
of full screen-size!
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
$(document).ready(function () {
$(document).foundation();
})
</
script
>
</
body
>
</
html
>