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
-
Salam Hangat untuk kita semua., Hal yang paling mendasar ketika Anda ingin melakukan penetrasi kedalam sebuah sistem, yang anda perlukan ...
-
Bagaimana cara memperbaiki feature-feature Corel Draw yang tidak bisa berfungsi maupun tidak bisa dijalankan di versi trial?? ...
-
Seorang blogger itu kerjaannya pasti menulis artikel untuk mereka publish di blognya. Pekerjaan menulis itu bukan hal yang mudah dan insta...
-
Salah satu faktor penting menghasilkan uang dengan blog lewat program periklanan seperti Google AdSense adalah penempatan posisi iklan yang...
-
“Pengaruh Cahaya Matahari Terhadap Pertumbuhan Tanaman Kacang Hijau” BAB I PENDAHULUAN 1.1 Latar Belakang Tumbuhan m...
-
ALLAHUMMA SHOLLI 'ALA SAYYIDINA. MUHAMMADIN THIBBIL QULUBI WADAWAIHA. WA'AFIYATIL ABDANI WA SYIFA'IHA. WA NUURIL ABSHO...
-
Hardisk merupakan sebuah perangkat keras pada komputer yang difungsikan sebagai media penyimpanan dalam pengoperasian komputer. Dalam peng...
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 ;-)