Skip to content

Instantly share code, notes, and snippets.

@thomashandorf

thomashandorf/menu.html

Last active March 15, 2018 12:05
Show Gist options
  • Save thomashandorf/9763e88b31ae292d8e84551ac8d18424 to your computer and use it in GitHub Desktop.
Save thomashandorf/9763e88b31ae292d8e84551ac8d18424 to your computer and use it in GitHub Desktop.
Download ZIP
side menu demo
Raw
menu.html
<body lj-type="stage">
<div lj-type="layer" id="content-layer" lj-fit-to="responsive-width" lj-transition="fade">
...
</div>
<div lj-type="layer" id="menu-layer" lj-native-scroll="false" lj-no-url="true">
<a lj-type="frame" id="hamburger" lj-transition="fade" lj-fit-to="fixed" lj-start-position="top-right" href="#main-menu">
M
</a>
<div lj-type="frame" id="main-menu" lj-transition="left" lj-fit-to="responsive-height" lj-start-position="top-right">
Menu Item<br>
Menu Item<br>
Menu Item<br>
<a href="#hamburger">Close</a>
</div>
</div>
</body>
Raw
style.css
#hamburger {
margin: 10px;
border: 1px solid black;
width: 30px;
height: 30px;
border-radius: 15px;
line-height: 28px;
text-align: center;
color: black;
text-decoration: none;
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 0px 5px 0px gray;
}
#main-menu {
border: 1px solid black;
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 0px 5px 0px gray;
padding: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment