Skip to content

Instantly share code, notes, and snippets.

@fizerkhan
Created December 12, 2012 05:29
Show Gist options
  • Save fizerkhan/4265090 to your computer and use it in GitHub Desktop.
Save fizerkhan/4265090 to your computer and use it in GitHub Desktop.
A CodePen by Sara Soueidan. Responsive CSS3 Side Navigation Menu - Media Queries Transitions (resize the window slowly to see the transitions), nav items slide out on hover when it collapses on smaller screens.
<h1>Slowly resize screen to see the width transition</h1>
<div class="nav-container">
<ul class="nav">
<li class="active">
<a href="#">
<span class="icon-home"></span>
<span class="text">home</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-user"></span>
<span class="text">about</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-headphones"></span>
<span class="text">Audio</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-picture"></span>
<span class="text">Portfolio</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-facetime-video"></span><span class="text">video</span>
</a>
</li>
</ul>
</div>
$('li').click(function(){
$(this).addClass('active')
.siblings()
.removeClass('active');
});
/*
Inspired by Asif Aleem's work: http://www.freebiesgallery.com/responsive-website-navigation/
Feel free to fork it and make it better, AND use it however u want, the whole functionality could, of course, have been done with jQuery alone, but I thought I'd try to do it with CSS3, to make use of media query transitions, and of course, just to practice more.
You can use this when changing orientation on a tablet or smart phone for example.. and of course, use ur creative minds for any more uses u can come up with :)
Follow me on Twitter: http://twitter.com/SaraSoueidan
*/
*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:300px;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px;
position:relative;
background: linear-gradient(#292929, #242424);
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:block;
height:100%;
width:100%;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
padding-left:25%;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
@media only screen and (max-width : 860px){
.text{
display:none;
}
.nav-container , a{
width: 70px;
}
a:hover{
width:200px;
z-index:1;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
box-shadow: 0 0 1px 1px black;
}
a:hover .text {
display:block;
padding-left:30%;
}
}
@media only screen and (max-width : 480px){
.nav-container, a{ width:50px;}
span[class ^= "icon"]{ left:8px;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment