Css Horizontal menu
berikut ini memang pure css di buat dengan tanpa menggunakan javascript sehingga lebih responsif dan user friendly karena tidak menimbulkan loading yang lama, desain flat dark elegant dan modern
berikut ini adalah kode htmlnya:
<section>
<ul class="navigator">
<li><a class="navigator-icon" href="http://taufaner.blogspot.com/" title="Home"><span class="entypo-home"> Home</span></a></li>
<li class="active"><a href="http://taufaner.blogspot.com/" title="Products">Products</a></li>
<li><a href="url" title="About">Download</a></li>
<li><a href="url" title="Blog">Music</a></li>
<li><a href="url" title="Contact">Movie</a></li>
<li><a href="url" title="Contact">Software</a></li>
</ul>
</nav>
</section>
Kode Css Dark Horizontal Menu
.navigationcontainer {
margin: 100px auto;
width: 720px;
text-align: center;
}
.navigator {
height: 48px;
display: inline-block;
}
.navigator > li, .navigator:active > .active {
float: left;
position: relative;
margin: 0 0 4px;
height: 44px;
color: #ccc;
text-shadow: 0 1px rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid #232428;
border-bottom-color: #1f2326;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255,
255, 255, 0));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255,
255, 255, 0));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255,
255, 0));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255,
255, 255, 0));
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px
#1f2326, 0 4px 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px
#1f2326, 0 4px 3px rgba(0, 0, 0, 0.2);
}
.navigator > li:hover {
color: #b0d157;
text-shadow: 0 1px black, 0 0 20px rgba(255, 255, 255, 0.5);
}
.navigator> li.active,
.navigator> .active:active,
.navigator> li:active {
z-index: 2;
margin: 4px 0 0;
height: 43px;
color: #aaa;
text-shadow: 0 1px black;
background-color: rgba(255, 255, 255, 0.03);
border-color: #212425;
border-width: 1px 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0,
0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255,
255, 0.05);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0,
0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255,
0.05);
}
.navigator > li:active {
z-index: 3;
}
.navigator> li:first-child {
border-left-width: 1px !important;
border-left-color: #212425;
border-radius: 5px 0 0 5px;
}
.navigator > li:last-child {
border-right-width: 1px !important;
border-right-color: #212425;
border-radius: 0 5px 5px 0;
}
.navigator> li + li, .nav:active > .active + li, .nav:active > li + .active {
border-left-width: 0;
}
.navigator> .active + li,
.navigator > .active:active + li,
.navigator > li:active + li,
.navigator> li:active + .active {
border-left-width: 1px;
}
.navigator> li > a {
display: block;
line-height: 44px;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
color: inherit;
text-decoration: none;
outline: 0;
}
.navigator .navigator-icon {
padding: 0 15px;
}
[class*="icon-"] {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: text-top;
font: 0/0 serif;
text-shadow: none;
color: transparent;
}
.icon-home {
background-position: 0 0;
}
