Pasang Menu Navigasi Mega Dropdown

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

Login ke blogger.com
masuk Rancangan >> Edit HTML
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 ;}
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(".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>
Kalau sudah simpan dan mari kita menuju halaman Elemen Halaman
kalau sudah berada pada elemen halaman maka tambahkan sebuah gadget yang letaknya tepat di bawah header (ini hanya contoh, letaknya bisa dimana saja)
Pilih yang HTML/Javascript
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>
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

Balas

Muhammad Chandra

September 29, 2010

mantab

onie

Maret 03, 2011

makasih mas tutorialnya
salam blogger

Unknown

November 06, 2011

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

jual produk murah

Juli 29, 2012

g bsa

Blog Tutorial

Selasa, 28 September 2010

Pasang Menu Navigasi Mega Dropdown

4 Komentar untuk Pasang Menu Navigasi Mega Dropdown

Artikel Terkait

Artikel Terbaru

Popular Posts

Facebook Fan Page

Friends Connect

Mengenai Saya

Labels