<!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
>
</
head
>
<
body
>
<
div
style
=
"margin:4rem;"
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
strong
>
Foundation CSS Nested Off-canvas
</
strong
>
</
div
>
<
div
style
=
"margin:1rem 5rem;"
>
<
button
type
=
"button"
class
=
"button"
data-toggle
=
"offCanvasNestedPush"
>
Open Nested Off-Canvas Push
</
button
>
<
p
>Hello, this is an example line.</
p
>
<
div
class
=
"off-canvas position-left is-closed"
id
=
"offCanvasNestedPush"
data-off-canvas>
<
div
class
=
"callout"
>
<
p
>Hii Geek!!!</
p
>
<
br
>
<
p
>
Push transition is not supported in the
nested off-canvas, so here we can see
that it takes the Overlay transition.
</
p
>
<
br
>
<
p
>
I'm a nested off-canvas that mustn't be
a sibling of the off-canvas content anymore.
</
p
>
<
p
>
I can be used a nice hidden menu
in small screen sizes.
</
p
>
</
div
>
</
div
>
<
p
>
Hello, this is an example paragraph.
Hello, this is an example paragraph.
</
p
>
<
p
>
Hello, this is an example paragraph.
</
p
>
<
p
>
Hello, this is an example paragraph.
Hello, this is an example paragraph.
</
p
>
<
p
>
Hello, this is an example paragraph.
</
p
>
<
p
>
Hello, this is an example paragraph.
Hello, this is an example paragraph.
</
p
>
<
p
>
Hello, this is an example paragraph.
</
p
>
<
p
>
Hello, this is an example paragraph.
Hello, this is an example paragraph.
</
p
>
<
p
>
Hello, this is an example paragraph.
</
p
>
</
div
>
<
script
>
$(document).foundation();
</
script
>
</
body
>
</
html
>