Skip to content

Instantly share code, notes, and snippets.

@toburger

toburger/dabblet.css

Forked from anonymous/dabblet.css
Created April 4, 2013 09:27
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save toburger/5309036 to your computer and use it in GitHub Desktop.
Save toburger/5309036 to your computer and use it in GitHub Desktop.
Download ZIP
Simple CSS only flyout menu
Raw
dabblet.css
/**
* Simple CSS only flyout menu
*/
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
font-family: Arial;
}
nav {
width: 100%;
float: left;
font-weight: bold;
}
nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
nav li {
position: relative;
float: left;
padding: 5px;
cursor: pointer;
}
nav ul ul {
left: 0px;
opacity: 0;
transition-property: opacity, transform;
transition-duration: 100ms, 100ms;
transform: translate(0px,-10px);
transition-timing-function: ease ease;
transition-delay: 200ms;
}
nav li li {
float: none;
padding: 5px 0px;
}
nav li:hover ul {
transform: translate(0px,0px);
opacity: 1;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<nav>
<ul>
<li>Home</li>
<li>To be expanded
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li>About</li>
</ul>
</nav>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment