Silver Transparent Horizontal Navigation

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.

25 komentar

Wah ini baru yang namanya keren bang Bro

mantaaaaap kang, di sorot mouse Linknya bisa gerak otomatis yah menunya..... hehehe... :)

Lumayan sob ...

itu mungkin kelebihan menu kali ini kang .......

macacih hehe

keren gan, blognnya rapi dan cerah, salam damai!

Makasih infonya mas, mampir ke blog butut ku ya.

lumayan sob ... damai selalu

siap meluncur sob

blognya mau di apain lagi kang, kayaknya masih di oles2 nih.. hehe
btw navigasinya keren kang asik ueyy goyangannya hehehe

Itu bagian dari menghilangkan jenuh saat ngeblog mas .. kalau ada perubahan dikit jadi betah lagi ngeblog'y ...

Kang Ruli orangnya ndak betahan ya... :)
Nguprak ngaprik tampilan blognya teyus...hehe
Namun keren deh ih :)

gitu deh mas .. jgnkan sama blog lagi ngobrol sama org kalau dah bosen saya suka pergi gitu aja mas .. entahlah saya juga gak ngerti hehe

maaanggg.. nuju ngedit? coba solusi loncatan hash tos di waler di blog abdi :)

muhun kang hehe .. siapppp meluncur

nganggo smooth scrollnya kang? kalau pake smooth scroll, mending jangan pake CSS target, mending pake ini :
http://blog.kangismet.net/2013/10/membuat-smooth-scroll-pada-anchor-point.html

punten nyimpen link

iya pantesan aja kang masih tetep .. urang cobian atuh kunu eta ..duh punten we ngarepotkeun yeuh

kumaha kang? siga teu ditambihan scriptna ning....
mengatasi fixed bar tambih script ieu:

'scrollTop': $target.offset().top

jadi

'scrollTop': $target.offset().top - 65

sudah saya tambahkan ..Masih tetep kang cobi we di klik kang ...

teu sing ah... sudah rebes oge.. di refresh heula atuh halaman na kang :)

eh iya kang saya tidak merefreshnya .. sudah oke kang ..duh makasih banyak kang atas bantuan'y hanya allah yg bisa membalas ..amiennn

amieennn.. balesanamah kirim kupat we.. :) wilujeng boboran we kang.. sok edan keun ngeditna, enjing mah takbiran :)

JNE na tutup cenah hehe .. di hadiahan we nya ..
sawangsulna kang .. Allahu Akbar

wah sexy euy,,,, hehhehhehhe