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
-
Perkara install ulang merupakan hal yang cukup membosankan. Mulai dari proses install ulang itu sendiri, pemasangan driver-driver ...
-
Qulul qulub Qulul qulubi Ilal habibi tammilu … x2 Wama’i biza lika shaahidun Shaahidun wa dalilu Ammad dalilu iza zakhartum ul M...
-
Setelah tahu tentang cara screenshot pada hp android, lalu bagaimana cara screenshot pada layar komputer? Bisa tidak memotret layar komp...
-
Suatu saat mungkin sobat harus menghpus artikel di blog. Ada beberapa kemungkinan artikel tersebut dihapus, diantaranya : Artikel yang...
-
Seorang ilmuwan yang terkenal dengan pengukuran "derajat celciusnya". Lahir di Upssala tahun 1701. Ayahnya seorang p...
-
DOWNLOAD SOFTWARE CONVERT WORD TO PDF Pada dasarnya di Microsoft Office dengan versi 2007 tidak memiliki fasilitas untuk menyimpan...
-
Bob Sadino (Lampung, 9 Maret 1933), atau akrab dipanggil om Bob , adalah seorang pengusaha asal Indonesia yang berbisnis di...
-
Kelahiran dan masa kecil KH. Iskandar Umar Abdul Latif dilahirkan pada hari kamis 1 Romadhon atau 10 November 1956. Beliau ada...
-
Bagaimana cara memperbaiki feature-feature Corel Draw yang tidak bisa berfungsi maupun tidak bisa dijalankan di versi trial?? ...
-
Dalam menyimak suatu informasi, kita harus teliti sehingga tidak terjebak pada isi informasi yang kita simak. Dari segi sifat dan uraia...
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 ;-)