Selamat datang para sahabat blogger
dimanapun berada. Pada kesempatan ini saya mencoba berbagi pengalaman
atau sebuah tutorial tentang cara membuat multi dropdown menu di blog.
Dimana pengalaman ini saya perolah saat mencoba mengotak-atik script di blog ini supaya tampilan menunya menarik dan elegant.
Menu
multi dropdown seperti diatas sangat di butuhkan apabila sebuah blog
memang mempunyai banyak kategori atau bisa juga untuk meringkas artikle
yang terkait yang di masukan ke menubar tersebut. Jika ingin menerapkan
menubar ini di blog seperti diatas, okee tanpa panjang lebar dan lama-lama silahkan ikuti tutorial dibawah ini.
Cara Membuat Menu Bar Multi Dropdown.
1. Buka akun blogger anda.
2. Pilih menu template > klik Edit Html
3. Lalu letakan kode css di bawah ini tepat di atas kode ]]>
atau
nav {
display: block;
margin-top: 100px;
background: #374147;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: #9ca3da;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a.homer {
background: #9ca3da;
}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap {
width: 768px;
}
.menu ul {
top: 37px;
}
.menu li a {
font-size: 12px;
}
a.homer {
background: #374147;
}
}
@media (max-width: 767px) {
.mainWrap {
width: auto;
padding: 50px 20px;
}
.menu {
display: none;
}
.responsive-menu {
display: block;
margin-top: 100px;
}
nav {
margin: 0;
background: none;
}
.menu li {
display: block;
margin: 0;
}
.menu li a {
background: #fff;
color: #797979;
}
.menu li a:hover,.menu li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}
4. Selanjutnya letakan kode html di bawah ini tepat di bawah kode
5. Langkah terakhir simpan kode di bawah ini tepat di atas kode
6. Jika sudah, silahkan klik pertinjau terlebih dahulu,kalo sudah ok, save template.
Selamat mencoba tutorial tersebut untuk membuat multi dropdown menu, kurang lebihnya saya mohon maaf dan semoga sukses. ^_^
Sumber :
https://plus.google.com/+ArlinaFitriyaniDee/about
http://kusnul-nasikin.blogspot.co.id/2015/06/cara-membuat-multi-dropdown-menumulti.html
Blog Tempatnya Ilmu dan Pengetahuan
Popular Posts
-
Kecanggihan gadget semakin memudahkan penggunanya dibidang komunikasi. Secanggih - canggihnya Smartphone namun ada rusak dan errornya jug...
-
Sebelumnya kita sudah membahas cara setting footer blog , kali ini saya akan membahas Cara Membuat Footer 3 Kolom di Blog. Jadi disini kita...
-
OK sobat kali ini saya akan posting cara membuat booting HBCD melalui flasdisk, tetapi sebelum Ke TKP saya akan berbagi sedikit mengul...
-
Siap Sedia Tanganmu nanti tegang kaku, Jantungmu nanti berdebar berhenti, Tubuhmu nanti mengeras membatu, Tapi kami sederap mengga...
-
Sebenarnya selama menggunakan komputer, ada riwayat tersendiri bagi windows dengan menyimpan "temporary files" yang telah digunaka...
-
Pernahkah Anda mengalami masalah dengan komputer yang Anda gunakan? Saya yakin hampir semua pengguna komputer (Windows PC) pernah mengalami...
-
Selamat datang para agan-agan semua, kali ini saya akan membagikan artikel tentang setting footer blog. Berbicara mengenai footer blog, d...
-
Postingan kali ini mencoba membagi pengalaman saya untuk meng-edit websitenya temanku, dimana platfomnya adalah WP.., awalnya si...
-
Selamat datang para agan-agan semua, pada kesempatan ini saya akan memperkenalkan game yang mencerdaskan anak bangsa yaitu game du...
-
Cara membuat blog di blogger kini jadi lebih mudah, Anda hanya perlu satu buah akun gmail. Oleh karena itu silakan Anda medaftar dahulu ...
About
Followers
Copyright © 2014 The-paculz - All Rights Reserved
Template By. Catatan Info
0 Komentar untuk "Cara Membuat Multi Dropdown Menu/Multi Sub Menu Di Blogspot "
Silahkan berkomentar dengan sopan dan bijak sesuai dengan tema artikel dan pastinya
NO SPAM NO SARA AND NO LIVE LINK ALLOWED... okk ;-)