tyos2002.blogspot.com: Membuat Menu Bar Multi Dropdown

Kali ini kami akan membagikan tutorial tentang bagaimana cara membuat menu bar multi dropdown di blog. Tutorial ini kami ambil dari sumber-sumber yang kami cantumkan pada akhir dari tulisan ini dan terimakasih sebelumnya untuk para blogger yang artikelnya kami jadikan referensi dan telah berbagi.

Menubar ini selain tampilannya elegant dan menarik dengan kelebihan multi dropdown menu atau multi sub menu. Menu multi dropdown seperti ini pasti sangat di butuhkan jika sebuah blog memang mempunyai banyak kategori yang terkait atau dapat juga untuk meringkas artikle yang terkait yang di masukkan ke menubar tersebut.

silahkan ikuti tutorialnya jika anda ingin menerapkan menu bar ini di blog anda. Tetapi sebelum merubah atau menambahkan scrift ini, sebaiknya BACK-UP lah terlebih dahulu TEMPLATE anda agar dapat dimanfaatkan kembali jika terjadi permasalahan dengan penambahan srcritf MENUBAR MULTI DROPDOWN dibawah ini. Dengan cara mengklik CADANGKAN / PULIHKAN template yang berada di pojok kanan atas pada menu TEMPLATE.

Cara Membuat Menu Bar Multi Dropdown :
1. Buka AKUN BLOGGER anda.
2. Pilih MENU TEMPLATE > klik EDIT HTML

3. Copy dan Paste-kan KODE CSS di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style>. Agar lebih mudah, copas saja salah satu scrif, lalu klik saja F3 atau ctrl+F pada keyboard.

nav {    
    display: block;
    margin-top: 100px;
    background: #000000;
}

.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: #FF0000;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #0000CD;
    background: #FFFF00;
}

.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: #0000CD;
    background: #000000;

}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #0000CD;
    color: #00FF00;
}

.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 Copy dan Paste-kan KODE HTML di bawah ini dan letakan tepat di bawah kode </header>. Agar lebih mudah, copas </header> lalu klik F3 atau ctrl+F pada keyboard.

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
<li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a> 
   <ul class="sub-menu">
<li><a href="#">Sub-Menu HOME 1</a></li>
<li><a href="#">Sub-Menu HOME 2</a></li>
<li><a href="#">Sub-Menu HOME 3</a></li>
<li><a href="#">Sub-Menu HOME 4</a></li>
<li><a href="#">Sub-Menu HOME 5</a></li>
</ul>
</li>
<li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
<li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
<li><a href="#">Sub-Menu PORTFOLIO 1</a>
<ul>
<li><a href='#' title="Kode Warna">Sub Sub-Menu PORTFOLIO 11</a></li>
<li><a href='#'> Sub Sub-Menu PORTFOLIO 12</a></li>
<li><a href='#'> Sub Sub-Menu PORTFOLIO 13</a></li>
<li><a href='#'> Sub Sub-Menu PORTFOLIO 14</a></li>
<li><a href='#'> Sub Sub-Menu PORTFOLIO 15</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu PORTFOLIO 2</a>
    <ul>
<li><a href="#">Sub Sub-Menu PORTFOLIO 21</a>
<ul>
<li><a href='#'>Sub dari Sub Sub-Menu PORTFOLIO 211</a></li>
<li><a href='#'>Sub dari Sub Sub-Menu PORTFOLIO 212</a></li>
<li><a href='#'>Sub dari Sub Sub-Menu PORTFOLIO 213</a></li>
<li><a href='#'>Sub dari Sub Sub-Menu PORTFOLIO 214</a></li>
<li><a href='#'>Sub dari Sub Sub-Menu PORTFOLIO 215</a></li>
</ul>
</li>
<li><a href="#">Sub Sub-Menu PORTFOLIO 22</a></li>
<li><a href="#">Sub Sub-Menu PORTFOLIO 23</a></li>
<li><a href="#">Sub Sub-Menu PORTFOLIO 24</a></li>
<li><a href="#">Sub Sub-Menu PORTFOLIO 25</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu PORTFOLIO 3</a>
    <ul>
<li><a href="#">Sub Sub-Menu PORTFOLIO 31</a></li>
<li><a href="#">Sub Sub-Menu PORTFOLIO 32</a></li>
<li><a href="#">Sub Sub-Menu PORTFOLIO 33</a></li>
<li><a href="#">Sub Sub-Menu PORTFOLIO 34</a></li>
<li><a href="#">Sub Sub-Menu PORTFOLIO 35</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
<li><a href="#">Sub-Menu CATEGORIES 1</a></li>
<li><a href="#">Sub-Menu CATEGORIES 2</a>
    <ul>
<li><a href="#">Sub Sub-Menu CATEGORIES 21</a></li>
<li><a href="#">Sub Sub-Menu CATEGORIES 22</a></li>
<li><a href="#">Sub Sub-Menu CATEGORIES 23</a></li>
<li><a href="#">Sub Sub-Menu CATEGORIES 24</a></li>
<li><a href="#">Sub Sub-Menu CATEGORIES 25</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu CATEGORIES 3</a>
    <ul>
<li><a href="#">Sub Sub-Menu CATEGORIES 31</a></li>
<li><a href="#">Sub Sub-Menu CATEGORIES 32</a></li>
<li><a href="#">Sub Sub-Menu CATEGORIES 33</a></li>
<li><a href="#">Sub Sub-Menu CATEGORIES 34</a></li>
<li><a href="#">Sub Sub-Menu CATEGORIES 35</a></li>
</ul>
</li>
</ul>
</li>
<li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
<li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
</ul>
</nav>

5. Kemudian Copy dan Paste-kan KODE di bawah ini dan letakkan tepat di atas kode </body>. Agar lebih mudah, copas </body> lalu klik F3 atau ctrl+F pada keyboard.

PENJELASAN :

POINT 3.

Untuk memperpendek jarak antara NAVBAR – HEADER blog– Skrip MENUBAR MULTI DROPDOWN pada tata letak di dalam blog, maka MARGIN-TOP: 100PX; dapat dirubah menjadimaka MARGIN-TOP: 0PX;
Warna LATAR BELAKANG MENU adalah HITAM (#000000) .
Warna FONT MENU adalah MERAH (#FF0000) jika ingin membuat warnanya PUTIH masukkan kode (#fff)
Warna FONT MENU DIPILIH/DIBLOK adalah BIRU (#0000CD)jika ingin membuat warnanya PUTIH masukkan kode (#fff).
Warna LATAR MENU DIPILIH/DIBLOK adalah KUNING (#FFFF00)
Warna FONT SUB MENU adalah BIRU (#0000CD).
Warna LATAR BELAKANG SUB MENU adalah HITAM (#000000) jika ingin membuat warnanya PUTIH masukkan kode (#fff).
Warna LATAR BELAKANG SUB MENU DIPILIH/DIBLOK adalah BIRU (#0000CD).
Warna FONT SUB MENU DIPILIH/DIBLOK adalah HIJAU (#00FF00) jika ingin membuat warnanya PUTIH masukkan kode (#fff).

POINT 4.

(class="homer") dapat dihilangkkan , karena MENU HOME INI AKAN DI TERBLOK SELAMANYA oleh warna latar belakang.
Untuk menambahkan TITLE pada menu/sub menu (title="Kode Warna"), maka tulisan KODE WARNA dapat di ganti menjadi title yang anda sukai. Jika anda tidak menyukai munculnya title, maka title ini dapat dihilangkan dengan cara menghapusnya dari scrift ini .
Ganti tanda (#) dengan LINK/URL anda atau LINK/URL yang anda inginkan. Bisa juga link posting atau label (katagori) yang ada pada blog anda. Tetapi jangan copy-paste alamat URL dari homepage .Cara mengisi URL adalah, masuklah ke BLOGGER kemudian Masuk ke blog anda dari dasbor, lalu pilih POS, klik DITERBITKAN, lalu pada judul artikel yang akan kita masukkan klik LIHAT. Akan tampil ALAMAT URL-nya di kotak pencarian atas, Kemudian Copy alamat url yang tampak di atas tersebut dan Paste-kan pada posisi '#' di skript . Contoh : http://tyos2002.blogspot.com/search/label/Movies.
Ganti Tulisan (BLOG) dengan NAMA MENU yang anda inginkan dan tentu saja disesuaikan dengan nama posting atau label (katagori) yang ada pada blog anda. Pada tulisan ini, kata BLOG diganti menjadi MOVIE.
Jika kamu tidak menyukai dan ingin meletakkan meu BERANDA atau MOVIES berada pada urutan/tata letak menu yang berbeda, maka anda dapat memindahkan menu BERANDA atau MOVIES tersebut pada bagian lain pada Area Menubar Multi Dropdown, dengan cara copas Skrip yang ada (1 porsi menu).
jumlah MENU, SUB-MENU, SUB SUB-MENU ATAU SUB DARI SUB SUB-MENU bisa ditambah ataupun dikurangi sesuai dengan selera anda. Dengan cara copas atau hapus Skrip yang ada (1 porsi menu).

Oke sobat saya rasa sudah selesai di tutorial cara membuat menubar multi dropdown di blog, untuk lebih dan kurangnya saya mohon maaf. …
SEMOGA BERMANFAAT..

SUMBER :
www.arlinadzgn.com www.madamvia.web.id blogoooblok.blogspot.com
ngeblogayo.blogspot.com www.blogbacatulis.com www.jadipintar.com

tyos2002.blogspot.com

Kamis, 13 Agustus 2015

Membuat Menu Bar Multi Dropdown

Tidak ada komentar:

Posting Komentar