Hosting Unlimited Indonesia
/ / Cara Membuat Menu Drop Down Terpecah di Blog

Cara Membuat Menu Drop Down Terpecah di Blog

Edit





Dengan menggunakan kombinasi selektor dari CSS2, pseudo classes, CSS3 transisi, ditambah Java Script, akhirnya kita capai tombol menu yang terpecah/terpisah berbasis CSS. Konten yang dihasilkan pada tombol menu di sebelah kanan sangat dinamis menggunakan CSS2. Sedangkan Java Script disini hanya digunakan untuk mengaktifkan kotak centang / tombol arah bawah, secara menyeluruh dan dinamis.

KODE CSS DAN CARA MENAMBAHKAN MENUNYA DI BLOG 
1. Silahkan anda lihat kode CSS Disini => bisa dilihat di email dazikof@gmail.com
 div.css3splitmenu {
    position: relative;
    display: inline-block;
    margin-right: 28px; /* margin to make room for menu toggler (generated content) */
    }

div.css3splitmenu > a, div.css3splitmenu > a:after { /* style main button plus split menu toggler */
    color: white;
    position: relative;
    background: green; /* bg color of button */
    text-decoration: none;
    font: bold 13px Georgia;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: block;
    padding: 8px;
    line-height: 1em;
    }


div.css3splitmenu > a:hover {
    background: #2b581f;  /* hover color for menu button */
    }

div.css3splitmenu > a:after { /* split menu toggler CSS (generated content) */
    content: "\25be"; /* down arrow HTML entity */
    position: absolute;
    left: 101%; /* the extra 1 % is so there's a bit of a gap next to menu button */
    top: 0;
    cursor: pointer;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    }

div.nocss3splitmenu > a:after { /* if this class is defined on a button, hide split menu toggler */
content: '';
display: none;
}

div.css3splitmenu > input[type=checkbox] { /* style input control that will act as actual toggler control */
    position: absolute;
    left: 101%;
    top: 0;
    opacity: 0; /* make it invisible yet still respond to mouse events */
    width: 25px; /* width of control */
    height: 100%;
    cursor: pointer;
    }

div.css3splitmenu > ul { /* style drop menu UL */
    position: absolute;
-moz-transform: scaleY(0) translateY(10px);
-ms-transform: scaleY(0) translateY(10px);
-webkit-transform: scaleY(0) translateY(10px);
transform: scaleY(0) translateY(10px);
-moz-transform-origin: top;
-webkit-transform-origin: top;
transform-origin: top;
    opacity: 0;
    background: white;
    min-width: 170px; /* minimum width of menu */
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid gray;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 5px 5px 5px #eee;
    -webkit-box-shadow: 5px 5px 5px #eee;
    box-shadow: 5px 5px 5px #eee;
    -moz-transition: all 0.2s ease-in-out 0.2s;  /* CSS3 transition of UL state. Last 0.2s specifies delay before animation for default state */
-ms-transition: all 0.2s ease-in-out 0.2s;
    -webkit-transition: all 0.2s ease-in-out 0.2s;
    transition: all 0.2s ease-in-out 0.2s;
    }

div.css3splitmenu > input[type=checkbox]:checked ~ ul { /* UL style when user clicks on input menu toggler */
z-index: 100;
    opacity: 1;
-moz-transform: scaleY(1) translateY(12px);
-ms-transform: scaleY(1) translateY(12px);
-webkit-transform: scaleY(1) translateY(12px);
transform: scaleY(1) translateY(12px);
    -moz-transition-delay: 0; /* Set transition delay for "focus" state to 0 */
    -ms-transition-delay: 0;
    -webkit-transition-delay: 0;
    transition-delay: 0;
    }

div.css3splitmenu > ul li {
    border-bottom: 1px solid #eee; /* add border to the end of each li within UL */
    }

div.css3splitmenu > ul li a { /* style each link within drop down menu */
    display: block;
    padding: 7px 4px;
    color: black;
    text-decoration: none;
    }


div.css3splitmenu > ul li a:hover {
    background: #c8f1bd;
    }

div.css3splitmenu > ul:before { /* outer arrow of drop down menu (black) */
    content: "";
    display: block;
    position: absolute;
    top: -14px; /*should be set to -border-width x 2 */
    left: 30px;
    width: 0;
    height: 0;
    border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
    border-style: solid;
    border-width: 7px;
    }

div.css3splitmenu > ul:after { /* inner arrow (white), so the two arrows overlap, forming a bordered arrow */
    content: "";
    display: block;
    position: absolute;
    top: -12px; /*should be set to -border-width x 2 */
    left: 31px;
    width: 0;
    height: 0;
    border-color: transparent transparent white transparent; /*border color should be same as div div background color*/
    border-style: solid;
    border-width: 6px;
    }

2. Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu 
3. Kemudian pilih -> Template -> Edit HTML 
 = Cari tag/kode ]]></b:skin> tekan CTRL + F  untuk memudahkan pencarian 
= Berikutnya pastekan kode CSS tepat diatas tag  ]]></b:skin>    
= Simpan template... 
= Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript   
= Pastekan kode berikut di bawah ini didalamnya:



<div class="css3splitmenu">
<a href="#">Blogging</a> <input type="checkbox" />

<ul id="t">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan trik blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery java script</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
</ul>
</div>

<div class="css3splitmenu">
<a href="#">Dunia spiritual</a> <input type="checkbox" />

<ul>
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual" >Wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">Sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
</ul>
</div>

<div class="css3splitmenu nocss3splitmenu">
<a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">Jejaring sosial</a>
</div>


<!-- Script below should follow all split menus -->

<script type="text/javascript">

( function(){ // local scope

    if (!document.querySelectorAll || !document.addEventListener)
        return
    var uls = document.querySelectorAll('div.css3splitmenu > ul'),
            docbody = document.documentElement || document.body,
            checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
            zindexvalue = 100

    for (var i=0; i<uls.length; i++){
        ( function(x){ // closure to capture each i value
            checkboxes[i].addEventListener('click', function(e){
                uls[x].style.zIndex = ++zindexvalue
                for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
                    if (y != x)
                        checkboxes[y].checked = false
                }
                e.cancelBubble = true
            })
            checkboxes[i].addEventListener('blur', function(e){
                setTimeout(function(){checkboxes[x].checked = false}, 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
                e.cancelBubble = true
            })
        }) (i)
    }

    docbody.addEventListener('click', function(e){
        for (var i=0; i<uls.length; i++){
            checkboxes[i].checked = false
        }
    })

})();

</script>

 = Silahkan Ganti link warna kuning dengan URL/Link anda 
= Ganti judul Menu sesuai dengan yang anda inginkan 
= Ganti judul Sub Menu sesuai Sub Menu yang di inginkan 
= Simpan Gadget dan lihat hasilnya...

CATATAN: Untuk menambahkan tombol menu dan sub menu, tambahkan tag DIV dengan tag class="css3splitmenu dan menambahkan 3 element berikut:


<div class="css3splitmenu">
<a href="Link anda">Judul Menu</a> <input type="checkbox" />

<ul>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
</ul>
</div>  


Mohon maaf kalau ada kekurangan dan kesalahan...
Semoga bermanfa'at and Keep blogging..!
Terima Kasih Atas Kunjungan Anda
Judul: Cara membuat menu drop down terpecah di blog
Ditulis Oleh jalupangna
Jika mengutip harap berikan link yang menuju ke artikel Cara membuat menu drop down terpecah di blog ini. Terima kasih atas perhatiannya
Judul: Cara membuat menu drop down terpecah di blog
Rating: 10 out of 10 based on 24 ratings. 155 user reviews.
Ditulis Oleh jalupangna
Description :
Post Author

jalupangna

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.
Anda Menyukai Postingan di Atas? Silahkan di share..
Label: blog tutorial, CSS, jquery-javascript, tips dan triks blog

12 komentar:

  1. gan tanya...kalau untuk membuat menu dropdown bercabang caranya bagaimana gan?maklum newbie aku nya
    BalasHapus1
    Balasan
    1. Ikuti aja tutorial diatas dengan teliti, nanti anda klik script kode css nya (yang ada tulisan warna merah "disini") kemudian nanti saya share di pengaturan google code, karena script kode css ini saya simpan di drive google code. Langkah selanjutnya ikuti tutorialnya dengan teliti. Terima kasih kunjungannya. Salam.. :)
      Hapus2
  2. broo.. aku minta css nya dong segera
    BalasHapus3
    Balasan
    1. Silahkan klik script kode css nya dulu mas bro(yang ada tulisan warna merah "disini") kemudian nanti saya share di pengaturan google code. Trims kunjungannya.. :)
      Hapus4
  4. Yah Ribet Bener jdi susah nie :'(
    BalasHapus7
    Balasan
    1. Baca secara intensive dan cermati tutorialnya mas, hehe...terima kasih kunjungannnya.. :)
      Hapus8
  5. Komentar ini telah dihapus oleh penulis.
    BalasHapus9
  6. Makasih gan. sangat membantu para newbie.
    keren blognya..
    :)
    BalasHapus10
    Balasan
    1. Sama-sama mas jeck blue, terima kasih atas kunjungannya. Salam.. :)
      Hapus11
  7. Trmksh bnyk mas....sangat bermanfaat sekali bagi pemula seperti saya... (h)
    BalasHapus
Share on Google Plus

About Unknown

    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar

Langganan: Posting Komentar ( Atom )