CSS Menu
by nathanziarek
HTML
<nav> <a href="#" class="ex"></a> </nav>
<nav> <a href="#" class="menu"></a> </nav>
<nav> <a href="#" class="none"></a> </nav>
<nav> <a href="#" class="forward"></a> </nav>
<nav> <a href="#" class="back"></a> </nav>CSS
nav {
background: #336699;
height: 40px;
display: block;
margin: 20px 0;
}
a {
margin: 0;
padding: 0;
height: 100%;
width: 40px;
border: 0;
display: block;
background: #295989;
position: relative;
-webkit-transition: opacity 500ms ease;
}
a.none {
opacity: 0;
}
a:after, a:before {
width: 50%;
height: 3px;
border-radius: 1px;
background: white;
position: absolute;
content:"";
-webkit-transition: width 500ms ease, top 500ms ease, left 500ms ease, -webkit-transform 500ms ease;
}
.menu:before {
top: 30%;
left: 25%;
}
.menu:after {
top: 60%;
left: 25%;
}
.ex:before {
-webkit-transform: rotate(45deg);
left: 10px;
top: 19px;
}
.ex:after {
-webkit-transform: rotate(-45deg);
left: 10px;
top: 19px;
}
.back:before {
-webkit-transform: rotate(45deg);
width: 35%;
left: 12px;
top: 22px;
}
.back:after {
-webkit-transform: rotate(-45deg);
width: 35%;
left: 12px;
top: 14px;
}
.forward:before {
-webkit-transform: rotate(-45deg);
width: 35%;
left: 14px;
top: 22px;
}
.forward:after {
-webkit-transform: rotate(45deg);
width: 35%;
left: 14px;
top: 14px;
}
.none:before {
width: 4%;
left: 48%;
top: 48%;
height: 4%;
}
.none:after {
width: 4%;
left: 48%;
top: 48%;
height: 4%;
}JavaScript
types = "menu ex forward back none";
typesA = types.split(" ");
function blah() {
$("a").each(function () {
$(this).removeClass(types);
$(this).addClass(typesA[Math.floor(Math.random() * typesA.length)]);
});
}
setInterval(blah, 1500);