Drop Up Horizontal Menu
2012/11/26 Tinggalkan komentar
Menu navigasi horizontal memang sudah banyak yang memasangnya dan pada umumnya diletakkan di atas. Menu navigasi ini mungkin hanyalah sebuah daftar yang memberikan informasi bagi pengunjung namun meskipun begitu bukan berarti hanya disajikan apa adanya tanpa ada efek-efek khusus.
Pada kesempatan ini, menu navigasi yang akan disajikan adalah menu navigasi horizontal namun bukan drop down (terbuka ke bawah) tetapi drop up (terbuka ke atas). Untuk versi demo bisa dilihat di bagian bawah blog ini. Juga seperti yang terlihat pada gambar di bawah ini.
Untuk memasang Drop Up Horizontal Menu, silakan copy-paste kode skrip CSS dan javascriptnya di bawah ini dan lakukan modifikasi sesuai dengan keinginan Anda.
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_pullup_1.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.preload1 {background: url(http://kodeskripdipodwijaya.googlecode.com/files/blank_over.gif);}
.preload2 {background: url(http://kodeskripdipodwijaya.googlecode.com/files/blank_overa.gif);}
/* top margin for this demo only */
#nav {padding:0; margin:200px 0 0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:verdana, arial, sans-serif;}
#nav li.top {display:block; float:left; padding-top:5px;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ddd; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://kodeskripdipodwijaya.googlecode.com/files/blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(http://kodeskripdipodwijaya.googlecode.com/files/blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(http://kodeskripdipodwijaya.googlecode.com/files/blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(http://kodeskripdipodwijaya.googlecode.com/files/blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(http://kodeskripdipodwijaya.googlecode.com/files/blank_over.gif) no-repeat right top; line-height:29px;}
#nav li a.top_link:hover span.down {background:url(http://kodeskripdipodwijaya.googlecode.com/files/blank_overa.gif) no-repeat right top; line-height:29px;}
#nav li:hover > a.top_link {color:#fff; background: url(http://kodeskripdipodwijaya.googlecode.com/files/blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(http://kodeskripdipodwijaya.googlecode.com/files/blank_over.gif) no-repeat right top; line-height:29px;}
#nav li:hover > a.top_link span.down {background:url(http://kodeskripdipodwijaya.googlecode.com/files/blank_overa.gif) no-repeat right top; line-height:29px;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200; background:#fff;}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul
{left:0; bottom:40px; top:auto; background: #fff; padding:3px; border:1px solid #4f8383; white-space:nowrap; width:auto; height:auto; z-index:300;}
* html #nav li:hover ul {width:0;}
#nav li:hover ul li
{display:block; position:relative; float:left; font-weight:normal; background:#fff; clear:left;}
#nav li:hover ul li a
{display:block; font-size:11px; height:20px; line-height:20px; padding:0 5px; color:#000; text-decoration:none;}
#nav li ul li a.fly
{color:#4f8383; font-weight:bold;}
#nav li:hover ul li:hover
{background:#fff;}
#nav li:hover ul li a:hover {text-decoration:underline;}
#nav li:hover ul li a.fly:hover
{background:#4f8383; color:#fff; text-decoration:none;}
#nav li:hover ul li:hover.fly {background:#4f8383;}
#nav li:hover ul li:hover.fly > a.fly {background:#4f8383; color:#fff; text-decoration:none;}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:-5px; margin-left:100%; bottom:-4px; top:auto; background: #fff; padding:3px; border:1px solid #4f8383; white-space:nowrap; width:auto; z-index:500; height:auto;}
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this script and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_1.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This script and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
© 2012 dipodwijayas.blogspot.com
Selamat mencoba !
Dwijayapers 