Silver Transparent Horizontal Navigation

di
Silver Transparent Horizontal Navigation  - Rasa dahaga saya untuk terus berbagi cara dalam membuat menu navigasi semakin kuat . Bukan tanpa alasan tentunya , karena pada awal saya belajar ngeblog , kesulitan dalam mencari menu saya rasakan begitu memprihatinkan . Melihat pada pengalaman itu untuk beberapa waktu kedepan saya akan terus berbagi tutorial tentang menu navigasi bagi blogger pemula. 

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 - */
#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);
}
HTML 
<nav id="nav">
<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> 
Ini hanya dasar saja , tentunya bisa dikembangkan lebih jauh.
Tapi kalau cukup puas dengan tampilan ini silahkan tempatkan kode CSS diatas kode ]]></b:skin> atau </style> . kode HTML bisa brada tempatkan sesuai selera.

Artikel Menarik Lainnya :