SCSS
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300);
$activeColor: #2ba6cb;
$bgColor: #1d1f20;
body {
background-color: $bgColor;
font-family: 'Roboto Condensed', sans-serif;
}
header {
background-color: darken($bgColor, 2%);
border-radius: 90px;
box-shadow: 1px 1px 0 rgba(255,255,255,0.05), inset 1px 1px 1px rgba(0,0,0,0.3);
left: 50%;
max-width: 800px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
nav {
border-radius: 90px;
box-shadow: 0 2px 2px rgba(0,0,0,0.3);
margin: .5em;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
a {
background-color: lighten($bgColor, 10%);
color: #fff;
display: block;
line-height: 1em;
padding: 1em;
text-align: center;
text-decoration: none;
transition: all 100ms ease-out;
&:hover,
&:active,
&.active {
background-color: $activeColor;
box-shadow: inset 0 -.3em 0 rgba(0,0,0,0.3);
margin-top: -.3em;
padding-bottom: 1.3em;
position: relative;
&:after {
background-color: rgba(0,0,0,0.05);
border-bottom: 1px solid transparentize($activeColor, 0.3);
bottom: -.5em;
content: '';
display: block;
left: 0;
position: absolute;
right: 0;
top: .3em;
}
}
}
li {
flex: 1;
& + li {
box-shadow: -2px 0 0 rgba(0,0,0,0.2), -1px 0 0 rgba(255,255,255,0.15);
}
&:first-child a {
border-top-left-radius: 90px;
border-bottom-left-radius: 90px;
&:hover:after,
&:active:after,
&.active:after {
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
left: -.5em;
}
}
&:last-child a {
border-top-right-radius: 90px;
border-bottom-right-radius: 90px;
&:hover:after,
&:active:after,
&.active:after {
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
right: -.5em;
}
}
}
}
JAVASCRIPT
(function(){
var nav = $('nav');
nav.delegate('a','click', function(e){
nav.find('.active').removeClass('active');
$(e.target).closest('a').addClass('active');
})
})();
