Skip to content

Instantly share code, notes, and snippets.

@aniketpant
Created January 15, 2012 05:06
Show Gist options
  • Select an option

  • Save aniketpant/1614434 to your computer and use it in GitHub Desktop.

Select an option

Save aniketpant/1614434 to your computer and use it in GitHub Desktop.
Smashing Magazine like side menu
/**
* Smashing Magazine like side menu
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
a {
display: block;
text-decoration: none;
}
ul.mainlist {
width: 300px;
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
list-style: none;
}
ul.mainlist li.list {
margin: 0 0 20px;
}
ul.mainlist li a {
margin: 0 30px 0;
padding: 5px 50px;
transition: all 250ms ease-in-out;
}
ul.mainlist li a:hover {
background: rgba(255,255,102,1);
}
ul.mainlist li:hover a.title {
border-color: rgba(229, 59, 44, 1);
}
ul.mainlist li a.title {
color: #0af;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.25em;
border-bottom: 1px solid rgba(0,0,0,0.1);
transition: all 250ms linear;
}
ul.mainlist li a.title:hover {
color: #222;
}
ul.mainlist li ul.sublist {
list-style: none;
display: block;
padding: 0;
}
ul.mainlist li ul.sublist li a {
color: #666;
display: block;
transition: all 250ms ease-in-out;
}
ul.mainlist li ul.sublist li a:hover {
color: #222;
}
<!-- content to be placed inside <body>…</body> -->
<ul class="mainlist">
<li class="list">
<a href="#" class="title">Title 1</a>
<ul class="sublist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li class="list">
<a href="#" class="title">Title 2</a>
<ul class="sublist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li class="list">
<a href="#" class="title">Title 3</a>
<ul class="sublist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment