.post-thumbnail{float:left;margin-right:20px}
Pasang Iklan Anda

Thursday, September 19, 2013
Membuat Menu Navigasi Simpel


Menu navigasi tentunya sudah tidak asing bagi Anda. Di beberapa Blogger lain pun juga sudah banyak yang share mengenai Menu Navigasi. Nah, kali ini saya akan coba share Membuat Menu Navigasi Simpel ala Master Jin. Bisa Anda lihat preview di atas, tampilan yang biasa-biasa aja, ya bisa saja disebut kerangkanya dan karena saya suka yang bertema simpel. Dengan gaya tombol search menggeser mungkin akan sedikit lebih unik.

Letakkan di atas ]]></b:skin>
ul.dark_menu {
  list-style:none;
  padding:5px 1px;
  font-weight:200;
  font-size:13px;
  letter-spacing:0.01em;
  color:#fff;
  line-height:15px;
  margin-left:85px;
  width:300px;
  position:relative;
  background:#bbb;
  border-radius:5px;
  border:4px solid #AD3000;
}

ul.dark_menu:after {
  content:"";
  clear:both;
  display:block;
  overflow:hidden;
  visibility:hidden;
  width:0;
  height:0;
}

ul.dark_menu li {
  float:left;
  position:relative;
  border-right:1px dashed #ddd;
}

ul.dark_menu li a,
ul.dark_menu li a:link {
  color:#fafafa;
  text-decoration:none;
  display:block;
  padding:8px 10px;
  transition:all 0.2s ease;
}

ul.dark_menu li a:hover {
  color:#fff;
  transition:all 0.5s ease;
}

ul.dark_menu li a.selected {
  border-radius:15px/45px;
}

ul.dark_menu li a.selected,
ul.dark_menu li a:active {
  color:#fff;
  transition:all 0.5s ease;
}

ul.dark_menu li ul {
  display:none;
}

ul.dark_menu li ul:before {
  content:" ";
  position:absolute;
  display:block;
  z-index:1500;
  left:0;
  top:-10px;
  height:10px;
  width:100%;
}

ul.dark_menu li ul {
  transition:all 0.5s ease;
  top:55px;
}

ul.dark_menu li:hover ul {
  position:absolute;
  display:block;
  z-index:1000;
  box-shadow:inset 0 4px 3px rgba(0,0,0,0.3),0 1px 0 #ddd,0 5px 10px rgba(0,0,0,0.2);
  left:0;
  border-radius:0 0 5px 5px;
  top:36px;
  padding:5px 0;
  list-style:none;
  background:#fff;
}

ul.dark_menu li ul li {
  float:none;
  margin:0;
}

ul.dark_menu li ul li:first-child {
  margin:0;
  border-top:0 none;
}

ul.dark_menu li ul li:last-child {
  border-bottom:0 none;
}

ul.dark_menu li ul li a,
ul.dark_menu li ul li a:link {
  color:#222;
  display:block;
  background:transparent none;
  padding:10px 25px 10px 25px;
  white-space:nowrap;
}

ul.dark_menu li ul li a:hover {
  background:#bbb;
  transition:all 0.1s ease-in-out;
  color:#fff;
}

.menu-mj-elegant {
  position:absolute;
  z-index:99;
  width:520px;
  border-radius:5px;
}

#search input[type="text"]:hover {
  background:#fff url("http://1.bp.blogspot.com/-V0HUmNl7SIw/UU0aHf73gBI/AAAAAAAAB-U/kqOTcg5llSY/s000/search_32x32-32.png")no-repeat center left;
  width:120px;opacity: 0.8
}

#search input[type="text"] {
  background:#fff url("http://1.bp.blogspot.com/-V0HUmNl7SIw/UU0aHf73gBI/AAAAAAAAB-U/kqOTcg5llSY/s000/search_32x32-32.png")no-repeat center center;
  font-size:13px;
  color:#222;
  width:0;
  padding:8px 7px 7px 35px;
  z-index:9;
  border:1px solid #ddd;
  transition:all 0.5s ease-in-out;
  margin-top:18px;
  position:absolute;
  top:0;
  right:130px;
  border-radius:5px;
  height:22px;opacity: 0.4;
}

Letakkan di atas </head>
<div class="menu-mj-elegant">
<ul class="dark_menu">
<li><a class="selected" expr:href="data:blog.homepageUrl" href="" title="Home">Home</a></li>
<li><a href="#">Master Jin</a><ul>
<li><a href="#">Lain-kali</a></li>
<li><a href="#">Lain-lain</a></li>
</ul>
</li>
<li><a href="#">Paling</a></li>
<li><a href="#">Jos</a></li>
</ul>
<form expr:action="data:blog.homepageUrl + &quot;search/&quot;" id="search" method="get">
<input name="q" placeholder="Search Somethings.." size="40" type="text" /></form>
</div>

Untuk Menu Navigasi di atas, Anda hanya tinggal mengatur height - margin . Anda juga bisa mengubah warnanya sesuka Anda. Selamat mencoba.

35 comments

Sesuai dengan judulnya, emang simple mas... siipp...keren

deleteX

hehe makasih Mas Kompi :)

deleteX
avatar
Anonymous

biasanya yg simple simple kaya gini ringan dimuat, makasih gan :)

deleteX

yups..saya juga mengandalkan fast loading juga Mas :-d

deleteX

sederhana sekali ya menu navigasinya. jadi tidak terlalu memperberat loading blog. :)

deleteX

yang simple ni yg cocok buat newbie seperti saya :)
salam blogger mas

deleteX

bagus menunya master dilengkapi dengan seacrhnya juga :-d :-d

deleteX
avatar
Anonymous

simple namun menarik.. mantafff

deleteX

imut.., seperti pembuatnya hehe.. :)

deleteX
avatar
Anonymous

benar2 simple nih.

deleteX

hehe yups bener banget. coba aja Mbak :)

deleteX

ahaha nuwun Mas..

deleteX

suka yang simpel soalnya..hehe

deleteX

terkadang yang simple juga menjadi pilihan master :D

deleteX

wah mantap nih, saya suka :D
coba kotak searchnya tampilannya nggak gitu mungkin lebih keren lagi :p

deleteX

betul betul betul

deleteX

emg maunya seperti apa mas ??

deleteX

abu2 mantaf gan lanjutkan kreasi nya :D

deleteX
avatar
Anonymous

Bener-bener simple mas jin. Lanjutkan kreasinya sob.

Oh iya sob, kalau mau menghapus threaded comment di blog ane gimana caranya ya mas? Ane udah coba tutorial di blognya kang ismet tapi tidak berhasil. Rencananya mau ane ganti dengan threaded comment hack V.3, bisa bantu mas jin?

deleteX

ada berita hangat nih jam enam sore rilis :D
http://bmaster23.blogspot.com/2013/09/cara-mendownload-bbm-for-android-apk.html

deleteX

kayak punya kang DTE, mungkin lebih bagus :)

deleteX

saya suka yang simple simple :D

deleteX
avatar
Anonymous

Simple Tapi Kerennya Luarr Biasa :D

deleteX

ya silahkan copas sendiri kodenya mas..tidak mungkin saya membocorkan yang lebih-lebih

deleteX

hahahaha :D
oke deh Mas :-bd

deleteX

hapus css threaded commentsnya terlebih dahulu mas..lalu ikuti triks milik kang ismet. ane pernah nyoba bisa kok :)

deleteX

okedeh..segera ke tkp

deleteX

ahaha..makasih mas taufik

deleteX

ahaha sip deh :D

deleteX

mantap :-d

deleteX

Menyimak sambil belajar moga diberi kepahaman

deleteX
Catatan :
1. Dilarang menanamkan link aktif
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan
4. Untuk memasukkan gambar : copy url gambar lalu paste di form komentar

Tambahan :
✓ Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "KONVERSI KODE"

KONVERSI KODEEMOTICON
 
Back to Top