Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Selasa, 28 September 2010

Pasang Menu Navigasi Mega Dropdown

Kategori : ,
Pasang Menu Navigasi Mega DropdownPasang Menu Navigasi Mega Dropdown ini bisa dibilang beda dari menu navigasi lainnya yang pernah saya terangkan disini, Menu navigasi ini saya dapatkan dari sohtanaka.com web yang mendedikasikan tentang web design, sang pemilik blog tersebut seorang web designer profesional yang mungkin para blogger bolang hampir tahu semua. Sekarang kita lihat demonya di sana setelah melihat yuk kita lihat cara pemasangannya.
  1. Login ke blogger.com
  2. masuk Rancangan >> Edit HTML
  3. cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di atasnya


    .container {
    width: 960px;
    padding: 0;
    background:
    margin: 0 auto;
    }

    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(http://www.sohtanaka.com/web-design/examples/mega-dropdowns/nav_home.png) no-repeat;
    width: 78px;
    }
    ul#topnav a.products {
    background: url(http://www.sohtanaka.com/web-design/examples/mega-dropdowns/nav_products.png) no-repeat;
    width: 117px;
    }
    ul#topnav a.sale {
    background: url(http://www.sohtanaka.com/web-design/examples/mega-dropdowns/nav_sale.png) no-repeat;
    width: 124px;
    }
    ul#topnav a.community {
    background: url(http://www.sohtanaka.com/web-design/examples/mega-dropdowns/nav_community.png) no-repeat;
    width: 124px;
    }
    ul#topnav a.store {
    background: url(http://www.sohtanaka.com/web-design/examples/mega-dropdowns/nav_store.png) no-repeat;
    width: 141px;
    }


    ul#topnav li .sub {
    position: absolute;
    top: 44px; left: 0;
    background: #344c00 url(http://www.sohtanaka.com/web-design/examples/mega-dropdowns/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(http://www.sohtanaka.com/web-design/examples/mega-dropdowns/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. Setelah itu cari kode </head> dan taruh kode di bawah ini tepat di atasnya


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

    <script src='http://oketrik.googlecode.com/files/jquery.hoverIntent.minified.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function() {


    function megaHoverOver(){
    $(this).find(&quot;.sub&quot;).stop().fadeTo(&#39;fast&#39;, 1).show();

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

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

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

    $(this).calcSubWidth();
    //Set Width
    $(this).find(&quot;.sub&quot;).css({&#39;width&#39; : rowWidth});

    }
    }

    function megaHoverOut(){
    $(this).find(&quot;.sub&quot;).stop().fadeTo(&#39;fast&#39;, 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)
    };

    $(&quot;ul#topnav li .sub&quot;).css({&#39;opacity&#39;:&#39;0&#39;});
    $(&quot;ul#topnav li&quot;).hoverIntent(config);



    });



    </script>


  5. Kalau sudah simpan dan mari kita menuju halaman Elemen Halaman
  6. kalau sudah berada pada elemen halaman maka tambahkan sebuah gadget yang letaknya tepat di bawah header (ini hanya contoh, letaknya bisa dimana saja)
  7. Pilih yang HTML/Javascript
  8. masukan kode di bawah ini kedalamnya


    <div class="container">

    <div id="header"></div>

    <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>

    </div>


  9. Setelah itu simpan dan lihat hasilnya
Kekurangan dari Menu Navigasi Mega Dropdown ini adalah, tulisan atau menu-menunya tidak dapat diganti dengan mudah atau hanya dengan tulisan, namun harus diganti dengan gambar. Jadi menu navigasi ini agak ribet untuk pemakaiannya. Disini saya hanya mendokumentasikan aja agar suatu hari nanti kalau saya memerlukannya tidak perlu repot untuk mencarinya. saya akhiri Terima kasih dan Happy Blogging.

Thanks to sohtanakan.com
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

4 Komentar untuk Pasang Menu Navigasi Mega Dropdown

makasih mas tutorialnya
salam blogger

gan mau tanya...
bagaimana caranya biar menu dropdownnya selalu di atas... dan tidak terhalang dengan isi / pernak pernik blog lainnya...
blogsaya
http://tunaskelapa-pramuka.blogspot.com

terimah kasih sebelumnya...