Drop Up Horizontal Menu

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.

dipodwijayas.blogspot.com-Drop_Up_Horizontal_Menu

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 !

Perihal justdwijaya
Seorang blogger dari Jakarta yang ingin mencari teman dan peluang bisnis.

Apa Pendapat Kamu?

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: