Selasa, 18 Januari 2011

Cara Membuat Mega Drop Down Menus Menggunakan CSS dan jQuery pada Blogger

Soh Tanaka melakukan penelitian dan melihat trend baru untuk situs e-commerce dalam memiliki apa yang mereka sebut "mega drop down menu".

Menurut ahli kegunaan Jakob Nielson, mega drop down menu diuji untuk menjadi lebih efisien untuk website skala besar.

Soh Tanaka memutuskan untuk bereksperimen dengan cara yang berbeda untuk menerapkan teknik ini dan ingin berbagi bagaimana Soh Tanaka mencapai metode ini.

Ketika Soh Tanaka membaca artikel, ia merekomendasikan semacam ini drop-down menu harus memiliki waktu tunda yang halus ketika melayang dalam dan luar mereka. Soh Tanaka memutuskan menggunakan jQuery Intent Hover plugin untuk membantu saya mencapai efek ini.

  1. Langkah 1 : Silahkan Login dan Back Up template Anda.
  2. Langkah 2 : Beri tanda centang pada kotak di samping tulisan Expand Template Widget kemudian cari kode ]]></b:skin> .
  3. Langkah 3 : Copy kode di bawah ini di atas kode ]]></b:skin>

    }
    ul#topnav {
    margin: 0; padding: 0;
    float:left;
    width: 100%;
    list-style: none;
    font-size: 1.1em;
    }
    ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    position: relative;
    }
    ul#topnav li a {
    float: left;
    text-indent: -9999px;
    height: 44px;
    }
    ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; }
    ul#topnav a.home {
    background: url(nav_home.png) no-repeat;
    width: 78px;
    }
    ul#topnav a.products {
    background: url(nav_products.png) no-repeat;
    width: 117px;
    }
    ul#topnav a.sale {
    background: url(nav_sale.png) no-repeat;
    width: 124px;
    }
    ul#topnav a.community {
    background: url(nav_community.png) no-repeat;
    width: 124px;
    }
    ul#topnav a.store {
    background: url(nav_store.png) no-repeat;
    width: 141px;
    }


    ul#topnav li .sub {
    position: absolute;
    top: 44px; left: 0;
    background: #344c00 url(sub_bg.png) repeat-x;
    padding: 20px 20px 20px;
    float: left;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    display: none;
    }
    ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}
    ul#topnav li .sub ul{
    list-style: none;
    margin: 0; padding: 0;
    width: 150px;
    float: left;
    }
    ul#topnav .sub ul li {
    width: 100%;
    color: #fff;
    }
    ul#topnav .sub ul li h2 {
    padding: 0; margin: 0;
    font-size: 1.3em;
    font-weight: normal;
    }
    ul#topnav .sub ul li h2 a {
    padding: 5px 0;
    background-image: none;
    color: #e8e000;
    }
    ul#topnav .sub ul li a {
    float: none;
    text-indent: 0; /*--Reset text indent--*/
    height: auto;
    background: url(navlist_arrow.png) no-repeat 5px 12px;
    padding: 7px 5px 7px 15px;
    display: block;
    text-decoration: none;
    color: #fff;
    }
    ul#topnav .sub ul li a:hover {color: #ddd; background-position: 5px 12px ;}
  4. Langkah 4 : Tambahkan kode dibawah ini pada Header Blogger Anda<ul id="topnav">
    <li>
    <a href="#" class="home">Home</a>
    </li>
    <li>
    <a href="#" class="products">Products</a>
    <div class="sub">
    <ul>

    <li><h2><a href="#">Desktop</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>

    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>
    <ul>
    <li><h2><a href="#">Laptop</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>

    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>

    <ul>
    <li><h2><a href="#">Accessories</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>

    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>
    <ul>
    <li><h2><a href="#">Accessories</a></h2></li>
    <li><a href="#">Navigation Link</a></li>

    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>

    </ul>

    </div>
    </li>
    <li>
    <a href="#" class="sale">Sale</a>
    <div class="sub">
    <div class="row">
    <ul style="width: 225px;">

    <li><h2><a href="#">Deal of the Week</a></h2></li>
    <li><a href="#">Navigation Link - 2 Column</a></li>
    <li><a href="#">Navigation Link - 2 Column</a></li>
    <li><a href="#">Navigation Link - 2 Column</a></li>
    <li><a href="#">Navigation Link - 2 Column</a></li>
    </ul>

    <ul style="width: 225px;">
    <li><h2><a href="#">Clearance Items</a></h2></li>
    <li><a href="#">Navigation Link - 2 Column</a></li>
    <li><a href="#">Navigation Link - 2 Column</a></li>
    <li><a href="#">Navigation Link - 2 Column</a></li>
    <li><a href="#">Navigation Link - 2 Column</a></li>

    </ul>
    </div>
    <div class="row">
    <ul>
    <li><h2><a href="#">Deal of the Week</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>

    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>
    <ul>
    <li><h2><a href="#">Clearance Items</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>

    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>
    <ul>
    <li><h2><a href="#">Open Box Items</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>

    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>
    </div>
    </div>
    </li>
    <li>
    <a href="#" class="community">Community</a>

    </li>
    <li>
    <a href="#" class="store">Store Locator</a>
    </li>
    </ul>

Keterangan :
Kode yang terdapat pada langkah ke-3 silahkan masukkan pada HTML Blogger Template Anda, tetapi kenyakan kita temukan penempatan Mega Drop Down Menus pada Header.
Referensi Artikel :
  1. Mega Drop Down Menus w/ CSS & jQuery.
    Link : http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery
  2. Cut & Paste jQuery Mega Menu.
    Link : http://www.javascriptkit.com/script/script2/jkmegamenu.shtml

  3. 4 Tutorial membuat menu mega dropdown.
    Link : http://blog.harrysuherman.com/2011/01/18/4-tutorial-membuat-menu-mega-dropdown/

Diposting oleh di

5 komentar :

  1. Firmaenz17 Maret 2011 pukul 12.55

    mas, ini gimana, kok saya tidak bisa .
    saya sudah lakukan dari awal hingga akhir .
    tolong pencerahanya mas .

    email : firmanramdan@gmail.com

    BalasHapus
  2. Anonymous7 Mei 2011 pukul 10.15

    Bacot doank!! lib jquery nya aja ga ada!!

    BalasHapus
  3. threex-hans.com22 Mei 2011 pukul 11.00

    jquerynya kug g ada gan??? lg butuh jquerynay nie,,, hehe

    BalasHapus
  4. Anonymous29 Mei 2011 pukul 14.26

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

    <script type="text/javascript" src="http://www.sohtanaka.com/web-design/examples/mega-dropdowns/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {


    function megaHoverOver(){
    $(this).find(".sub").stop().fadeTo('fast', 1).show();

    //Calculate width of all ul's
    (function($) {
    jQuery.fn.calcSubWidth = function() {
    rowWidth = 0;
    //Calculate row
    $(this).find("ul").each(function() {
    rowWidth += $(this).width();
    });
    };
    })(jQuery);

    if ( $(this).find(".row").length > 0 ) { //If row exists...
    var biggestRow = 0;
    //Calculate each row
    $(this).find(".row").each(function() {
    $(this).calcSubWidth();
    //Find biggest row
    if(rowWidth > biggestRow) {
    biggestRow = rowWidth;
    }
    });
    //Set width
    $(this).find(".sub").css({'width' :biggestRow});
    $(this).find(".row:last").css({'margin':'0'});

    } else { //If row does not exist...

    $(this).calcSubWidth();
    //Set Width
    $(this).find(".sub").css({'width' : rowWidth});

    }
    }

    function megaHoverOut(){
    $(this).find(".sub").stop().fadeTo('fast', 0, function() {
    $(this).hide();
    });
    }


    var config = {
    sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
    interval: 100, // number = milliseconds for onMouseOver polling interval
    over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
    timeout: 500, // number = milliseconds delay before onMouseOut
    out: megaHoverOut // function = onMouseOut callback (REQUIRED)
    };

    $("ul#topnav li .sub").css({'opacity':'0'});
    $("ul#topnav li").hoverIntent(config);



    });



    </script>

    BalasHapus
  5. Anonymous30 Mei 2011 pukul 17.07

    gambarnya dimana gak lengkap .

    BalasHapus

Kalo komentar yang baik ya ?

Langganan: Posting Komentar ( Atom )

Saya Ingin Jadi Pemilik Blog.

X
Anda dapat menjadi pemilik blog Blogger Primitive: Cara Membuat Mega Drop Down Menus Menggunakan CSS dan jQuery pada Blogger, hanya dengan mengganti biaya perawatan, jika minat kirim email ke :
reogdesign[@]gmail.com.
Mau jadi pemilik blog ini? YA TIDAK
Works in the latest builds of Safari, Chrome, Firefox, and Opera.