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

Trik menarik lainnya yang mungkin ingin anda baca :

Agar Blog ini terus Update dan memberikan artikel yang berkualitas, mohon di klik link di bawah ini

Pasang Menu Navigasi Mega Dropdown

{ 0 comments... read them below or add one }

Post a Comment

subsscribers

Followers

Kategori