Draft Blogger: Cara Membuat Menu Mega Drop Down untuk Blogger

Menu mega drop-down adalah menu terbaik untuk situs / blog yang memiliki banyak item navigasi atau link, hal ini membantu pengunjung menemukan kategori apapun dengan mudah dalam menavigasi blog kita. Hari ini saya berikan cara membuat menu mega drop down yang dirancang oleh codrops Instalasi sangat mudah sehingga Anda tidak akan menghadapi masalah ketika menambahkannya ke blog Anda, sekarang mari kita lihat bagaimana untuk menambahkan ke blog kita. Pertama Anda lihat dulu previewnya dengan mengklik tombol Live Demo di bawah ini,

Pertama langsung aja ke Blogger Dashboard> Layout

Klik Tambah Gadget (di bawah header)

Pilih HTML / JavaScript

Paste kode di bawah ini setelah mengubahnya sesuai keinginan

Lalu Simpan/Save.

<style> ul.ldd_menu {

    margin: 0px;

    padding: 0;

    display: block;

    height: 50px;

    background-color: #D04528;

    list-style: none;

    font-family: "Trebuchet MS", sans-serif;

    border-top: 1px solid #EF593B;

    border-bottom: 1px solid #EF593B;

    border-left: 10px solid #D04528;

    -moz-box-shadow: 0px 3px 4px #591E12;

    -webkit-box-shadow: 0px 3px 4px #591E12;

    -box-shadow: 0px 3px 4px #591E12;

}

ul.ldd_menu a {

    text-decoration: none;

}

ul.ldd_menu > li {

    float: left;

    position: relative;

}

ul.ldd_menu > li > span {

    float: left;

    color: #fff;

    background-color: #D04528;

    height: 50px;

    line-height: 50px;

    cursor: default;

    padding: 0px 20px;

    text-shadow: 0px 0px 1px #fff;

    border-right: 1px solid #DF7B61;

    border-left: 1px solid #C44D37;

}

ul.ldd_menu .ldd_submenu {

    position: absolute;

    top: 50px;

    width: 550px;

    display: none;

    opacity: 0.95;

    left: 0px;

    font-size: 10px;

    background: #C34328;

    border-top: 1px solid #EF593B;

    -moz-box-shadow: 0px 3px 4px #591E12 inset;

    -webkit-box-shadow: 0px 3px 4px #591E12 inset;

    -box-shadow: 0px 3px 4px #591E12 inset;

}

a.ldd_subfoot {

    background-color: #f0f0f0;

    color: #444;

    display: block;

    clear: both;

    padding: 15px 20px;

    text-transform: uppercase;

    font-family: Arial, serif;

    font-size: 12px;

    text-shadow: 0px 0px 1px #fff;

    -moz-box-shadow: 0px 0px 2px #777 inset;

    -webkit-box-shadow: 0px 0px 2px #777 inset;

    -box-shadow: 0px 0px 2px #777 inset;

}

ul.ldd_menu ul {

    list-style: none;

    float: left;

    border-left: 1px solid #DF7B61;

    margin: 20px 0px 10px 30px;

    padding: 10px;

}

li.ldd_heading {

    font-family: Georgia, serif;

    font-size: 13px;

    font-style: italic;

    color: #FFB39F;

    text-shadow: 0px 0px 1px #B03E23;

    padding: 0px 0px 10px 0px;

}

ul.ldd_menu ul li a {

    font-family: Arial, serif;

    font-size: 10px;

    line-height: 20px;

    color: #fff;

    padding: 1px 3px;

}

ul.ldd_menu ul li a:hover {

    -moz-box-shadow: 0px 0px 2px #333;

    -webkit-box-shadow: 0px 0px 2px #333;

    box-shadow: 0px 0px 2px #333;

    background: #AF412B;

} </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        /**

         * the menu

         */

        var $menu = $('#ldd_menu');

        /**

         * for each list element,

         * we show the submenu when hovering and

         * expand the span element (title) to 510px

         */

        $menu.children('li').each(function () {

            var $this = $(this);

            var $span = $this.children('span');

            $span.data('width', $span.width());

            $this.bind('mouseenter', function () {

                $menu.find('.ldd_submenu').stop(true, true).hide();

                $span.stop().animate({

                    'width': '510px'

                }, 300, function () {

                    $this.find('.ldd_submenu').slideDown(300);

                });

            }).bind('mouseleave', function () {

                $this.find('.ldd_submenu').stop(true, true).hide();

                $span.stop().animate({

                    'width': $span.data('width') + 'px'

                }, 300);

            });

        });

    });

</script>

<ul id="ldd_menu" class="ldd_menu">

<li>

<span>Vacations</span>



<div class="ldd_submenu">

  <ul>

   <li class="ldd_heading">By Location</li>

   <li><a href="#">South America</a></li>

   <li><a href="#">Antartica</a></li>

   <li><a href="#">Africa</a></li>

   <li><a href="#">Asia and Australia</a></li>

   <li><a href="#">Europe</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Category</li>

   <li><a href="#">Sun & Beach</a></li>

   <li><a href="#">Adventure</a></li>

   <li><a href="#">Science & Education</a></li>

   <li><a href="#">Extreme Sports</a></li>

   <li><a href="#">Relaxing</a></li>

   <li><a href="#">Spa and Wellness</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Theme</li>

   <li><a href="#">Paradise Islands</a></li>

   <li><a href="#">Cruises & Boat Trips</a></li>

   <li><a href="#">Wild Animals & Safaris</a></li>

   <li><a href="#">Nature Pure</a></li>

   <li><a href="#">Helping others & For Hope</a></li>

   <li><a href="#">Diving</a></li>

  </ul>

  <a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

<li>

<span>Equipment</span>

<div class="ldd_submenu">

  <ul>

   <li class="ldd_heading">By Location</li>

   <li><a href="#">South America</a></li>

   <li><a href="#">Antartica</a></li>

   <li><a href="#">Africa</a></li>

   <li><a href="#">Asia and Australia</a></li>

   <li><a href="#">Europe</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Category</li>

   <li><a href="#">Sun & Beach</a></li>

   <li><a href="#">Adventure</a></li>

   <li><a href="#">Science & Education</a></li>

   <li><a href="#">Extreme Sports</a></li>

   <li><a href="#">Relaxing</a></li>

   <li><a href="#">Spa and Wellness</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Theme</li>

   <li><a href="#">Paradise Islands</a></li>

   <li><a href="#">Cruises & Boat Trips</a></li>

   <li><a href="#">Wild Animals & Safaris</a></li>

   <li><a href="#">Nature Pure</a></li>

   <li><a href="#">Helping others & For Hope</a></li>

   <li><a href="#">Diving</a></li>

  </ul>

  <a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

<li>

<span>Locations</span>

<div class="ldd_submenu">

  <ul>

   <li class="ldd_heading">By Location</li>

   <li><a href="#">South America</a></li>

   <li><a href="#">Antartica</a></li>

   <li><a href="#">Africa</a></li>

   <li><a href="#">Asia and Australia</a></li>

   <li><a href="#">Europe</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Category</li>

   <li><a href="#">Sun & Beach</a></li>

   <li><a href="#">Adventure</a></li>

   <li><a href="#">Science & Education</a></li>

   <li><a href="#">Extreme Sports</a></li>

   <li><a href="#">Relaxing</a></li>

   <li><a href="#">Spa and Wellness</a></li>

  </ul>

  <ul>

   <li class="ldd_heading">By Theme</li>

   <li><a href="#">Paradise Islands</a></li>

   <li><a href="#">Cruises & Boat Trips</a></li>

   <li><a href="#">Wild Animals & Safaris</a></li>

   <li><a href="#">Nature Pure</a></li>

   <li><a href="#">Helping others & For Hope</a></li>

   <li><a href="#">Diving</a></li>

  </ul>

  <a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

</ul>

Penting - Hapus kode yang tanda kuning jika Anda telah menambahkan sebuah plugin jQuery untuk blog Anda.

Catatan - Saya sarankan Anda untuk menggunakan Editor HTML untuk menyesuaikan ini atau menu apapun, karena Anda bisa melihat live preview menu Anda ketika Anda melakukan perubahan dalam menu Anda coba lihat gambar di bawah.

Menu ini dirancang oleh Codrops dan telah saya coba, jika Anda ingin berbagi dengan pembaca Anda maka silakan link kembali ke artikel ini.

Jangan ragu untuk posting pertanyaan Anda di bawah ini :)

pEaCe aNd BlEsSiNGs .......

Draft Blogger

0 Cara Membuat Menu Mega Drop Down untuk Blogger

Tidak ada komentar:

Posting Komentar