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 + "search/"" 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
X ✓hehe makasih Mas Kompi :)
X ✓biasanya yg simple simple kaya gini ringan dimuat, makasih gan :)
X ✓yups..saya juga mengandalkan fast loading juga Mas :-d
X ✓sederhana sekali ya menu navigasinya. jadi tidak terlalu memperberat loading blog. :)
X ✓yang simple ni yg cocok buat newbie seperti saya :)
X ✓salam blogger mas
bagus menunya master dilengkapi dengan seacrhnya juga :-d :-d
X ✓simple namun menarik.. mantafff
X ✓imut.., seperti pembuatnya hehe.. :)
X ✓benar2 simple nih.
X ✓hehe yups bener banget. coba aja Mbak :)
X ✓ahaha :D
X ✓makasih Mas..
X ✓ahaha nuwun Mas..
X ✓suka yang simpel soalnya..hehe
X ✓terkadang yang simple juga menjadi pilihan master :D
X ✓wah mantap nih, saya suka :D
X ✓coba kotak searchnya tampilannya nggak gitu mungkin lebih keren lagi :p
betul betul betul
X ✓emg maunya seperti apa mas ??
X ✓abu2 mantaf gan lanjutkan kreasi nya :D
X ✓Bener-bener simple mas jin. Lanjutkan kreasinya sob.
X ✓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?
Simple, saya suka
X ✓ada berita hangat nih jam enam sore rilis :D
X ✓http://bmaster23.blogspot.com/2013/09/cara-mendownload-bbm-for-android-apk.html
kayak punya kang DTE, mungkin lebih bagus :)
X ✓saya suka yang simple simple :D
X ✓Simple Tapi Kerennya Luarr Biasa :D
X ✓ya silahkan copas sendiri kodenya mas..tidak mungkin saya membocorkan yang lebih-lebih
X ✓hahahaha :D
X ✓oke deh Mas :-bd
hapus css threaded commentsnya terlebih dahulu mas..lalu ikuti triks milik kang ismet. ane pernah nyoba bisa kok :)
X ✓okedeh..segera ke tkp
X ✓ahaha..makasih mas taufik
X ✓ahaha sip deh :D
X ✓mantap :-d
X ✓makasih Mas :)
X ✓Menyimak sambil belajar moga diberi kepahaman
X ✓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