<
head
>
<
meta
charset
=
'utf-8'
/>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
,
maximum-scale
=
1
" />
<
link
type
=
"text/css"
rel
=
"stylesheet"
media
=
"screen"
href
=
"sidetap.css"
/>
<
link
type
=
"text/css"
rel
=
"stylesheet"
media
=
"screen"
href
=
"theme/default/default.css"
/>
</
head
>
<
body
>
<
div
class
=
"sidetap"
>
<
div
class
=
"stp-nav"
>
<
div
>
<
nav
>
<
a
href
=
"#"
class
=
"selected"
>
First Navigation(selected)
</
a
>
<
a
href
=
"#"
>Second Nav link</
a
>
<
a
href
=
"#"
>Third nav link</
a
>
<
a
href
=
"#"
>Fourth Nav link</
a
>
</
nav
>
</
div
>
</
div
>
<
div
class
=
"stp-content"
id
=
"content"
>
<
div
class
=
"stp-content-panel"
>
<
header
>
<
a
href
=
"javascript:void(0)"
class
=
"header-button icon menu"
>
<
span
>Menu</
span
></
a
>
<
h1
> Sidetap Plugin</
h1
>
</
header
>
<
div
class
=
"stp-content-frame"
>
<
div
class
=
"stp-content-body"
>
<
div
>
<
p
>Body content.</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
src
=
"jquery.1.7.2.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"sidetap.js"
>
</
script
>
<
script
>
/* Instantiate sidetap in the top
left side, refer output */
var sidetapVar = sidetap();
/* On click of the header menu
button icon */
/* The navigation is toggled */
$(".header-button.menu")
.on("click", sidetapVar.toggle_nav)
</
script
>