Skip to content

Instantly share code, notes, and snippets.

@geoffreycrofte

geoffreycrofte/dabblet.css

Created February 27, 2012 10:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save geoffreycrofte/1922992 to your computer and use it in GitHub Desktop.
Save geoffreycrofte/1922992 to your computer and use it in GitHub Desktop.
Download ZIP
Drop Down Menu with CSS3 and Max-height animation
Raw
dabblet.css
/**
* Drop Down Menu with CSS3 and Max-height animation
* an idea inspirated from http://jsfiddle.net/leaverou/zwvNY/
* visit http://www.creativejuiz.fr/blog/ for fun.
*/
a {
display:block;
color: #fff;
text-decoration:none;
}
#dd > li,
#dd > li li {
position: relative;
display:inline-block;
width: 110px;
padding: 6px 15px;
background-color: #777;
background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
#dd > li li { background: transparent none; }
#dd > li li a { color: #444; }
#dd > li li:hover { background:#eee; }
#dd > li:first-child {
border-right: 1px solid #777;
border-radius: 8px 0 0 8px;
}
#dd>li + li {
border-left: 1px solid #aaa;
border-right: 1px solid #777;
}
#dd>li:last-child {
border-right:0;
border-left: 1px solid #aaa;
border-radius: 0 8px 8px 0 ;
}
#dd ul {
position: absolute;
top: 2em; left:0;
max-height:0em;
margin:0; padding:0;
background-color:#ddd;
background-image: linear-gradient(#fff,#ddd);
overflow:hidden;
transition: 1s max-height 0.3s;
border-radius: 0 0 8px 8px;
}
#dd>li:hover {
background-color: #999;
background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}
#dd>li:hover ul {
/* need an adaptation, lower is better, but see it large ;) */
max-height:13em;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul id="dd">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Level 1.1</a></li>
<li><a href="#">Level 1.2</a></li>
</ul>
</li><li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a></li>
<li><a href="#">Level 2.4</a></li>
</ul>
</li><li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Level 3.1</a></li>
<li><a href="#">Level 3.2</a></li>
<li><a href="#">Level 3.3</a></li>
</ul>
</li>
</ul>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment