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
Related Post
Cara Setting SEO Plugin / Yoast SEO di WordPress Cara Setting WordPress SEO Plugin – Mengaplikasikan teknik SEO dalam mengurus sebuah blog adalah hal wajib yang …
Cara Membuat Multi Dropdown Menu/Multi Sub Menu Di Blogspot Selamat datang para sahabat blogger dimanapun berada. Pada kesempatan ini saya mencoba berbagi pengalaman atau se…
Cara meng-non aktifkan kolom komentar di page/post pada Wordpress Postingan kali ini mencoba membagi pengalaman saya untuk meng-edit websitenya temanku, dimana platfomnya…
Setting Header Blog Valid Schema.Org dan HTML5Selamat datang di blog kami, kali Saya akan buat tutorial cara membuat header blog valid schema.org dan HTML5 . S…
Cara Menghapus Artikel Blog yang Benar Suatu saat mungkin sobat harus menghpus artikel di blog. Ada beberapa kemungkinan artikel ters…
Popular Posts
-
Faktor penempatan posisi iklan sangat berpengaruh terhadap penghasilan seorang blogger. Oleh karena itulah Saya akan menjelaskan mengenai me...
-
Karl Heinrich Marx lahir di Trier, Prusia, 5 Mei 1818, dia adalah seorang filsuf, pakar ekonomi politik dan teori kemasyarakatan dari Pr...
-
Apakah Kidmah itu ? Dalam segi bahasa, lafadz khidmah musytaq dari fi'il madli lafadz khadama yang berarti melayani, pelayanan . Lafa...
-
Blaise Pascal (1623 1662 M) terlahir di Clermont Ferrand pada 19 June 1623. Ayahnya Etienne Pascal, penasehat kerajaan yang ke...
-
Pernahkah Anda mengalami masalah dengan komputer yang Anda gunakan? Saya yakin hampir semua pengguna komputer (Windows PC) pernah mengalami...
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 ;-)