Silver Transparent Horizontal Navigation
Menu kali ini mengusung tema silver ( itu efect dari background body saja ) karena pada dasarnya menu ini adalah white transparent ( sedikit bisa menyesuaikan warna dengan background body template brada ) .Bahan dasar menu kali ini kita hanya memanfaatkan CSS dan linear-gradient sebagai warna pendukung serta konsep rgba pada border-bottom hover .
CSS
/* - NAVIGATION - */HTML
#nav {
position:absolute;
top:0;left:0;right:0;bottom:0;
width:100%;height:2.3em;
padding:0;margin:auto;
outline:.5em solid rgba(255,255,255,.2);
-moz-box-shadow:0 0 3em 3em rgba(0,0,0,.3);
-webkit-box-shadow:0 0 3em 3em rgba(0,0,0,.3);
box-shadow:0 0 3em 3em rgba(0,0,0,.3);
background:rgba(255,255,255,.3);
background-image:-ms-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
background-image:-moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
background-image:-o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
background-image:-webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
background-image:linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,.1)), color-stop(1, rgba(0,0,0,.3)));
display:block;
}
/*- HEADER - */
#nav:before {
content:'Action Blog Nakula';
position:absolute;
top:-2em;left:0;right:0;
display:inline-block;
font-size:2.5em;
color:rgba(255,255,255,.4);
line-height:2.7em;
letter-spacing:.05em;
text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
/* - FOOTER - */
#nav:after {
content:'';
position:absolute;
bottom:-3em;left:0;right:0;
width:1.3em;height:1.1em;
margin:auto;
background:transparent url('http://static.tumblr.com/epkyugq/2NTmek7iz/logo.png') center center no-repeat;
background-size:100% 100%;
display:inline-block;
opacity:.5;
}
/* - LINKS - */
a, a:hover {
position:relative;
padding:.3em 1em 0;margin:0;
-moz-transition:.2s ease-in-out;
-webkit-transition:.2s ease-in-out;
-o-transition:.2s ease-in-out;
transition:.2s ease-in-out;
background:rgba(0,0,0,0);
display:inline-block;
color:rgba(255,255,255,.5);
letter-spacing:.1em;
text-transform:uppercase;
text-decoration:none;
}
a:hover {
padding:.3em 2em 0;margin:0 2em;
color:rgba(255,255,255,.6);
}
.about:hover:before, .contact:hover:before, .blog:hover:before {
content:'';
position:absolute;
top:0;left:-.3em;bottom:0;
width:.5em;height:.01em;
padding:0;margin:auto;
-moz-box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
-webkit-box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
background:rgb(255,255,255);
display:block;
}
.home:hover:after, .about:hover:after, .contact:hover:after {
content:'';
position:absolute;
top:0;right:-.3em;bottom:0;
width:.5em;height:.01em;
padding:0;margin:auto;
-moz-box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
-webkit-box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
box-shadow:0 0 .05em .04em rgba(255,255,255,.9);
background:rgb(255,255,255);
display:block;
}
.home {
border-bottom:.6em solid transparent;
text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
.home:hover {
border-bottom:.6em solid rgba(0,0,0,.2);
}
.about {
border-bottom:.6em solid transparent;
text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
.about:hover {
border-bottom:.6em solid rgba(0,0,0,.4);
}
.contact {
border-bottom:.6em solid transparent;
text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
.contact:hover {
border-bottom:.6em solid rgba(0,0,0,.6);
}
.blog {
border-bottom:.6em solid transparent;
text-shadow:.04em .04em .03em rgba(0,0,0,.2);
}
.blog:hover {
border-bottom:.6em solid rgba(0,0,0,.8);
}
<nav id="nav">Ini hanya dasar saja , tentunya bisa dikembangkan lebih jauh.
<a href="#" class="home">Home</a>
<a href="#" class="about">About</a>
<a href="#" class="contact">Contact</a>
<a href="#" class="blog">Blog</a>
</nav>
Tapi kalau cukup puas dengan tampilan ini silahkan tempatkan kode CSS diatas kode ]]></b:skin> atau </style> . kode HTML bisa brada tempatkan sesuai selera.