Tüm Tarayıcılarda Çalışan Eklentisiz Açılır Menü Kodu

Yükleniyor

Açılır menüler her zaman için ziyaretçilerin site içinde dolaşmalarını kolaylaştırmışlardır ve şıklardır. Eğer eklenti kurmadan bir açılır (dropdown) menüye sahip olmak istiyorsanız aşağıdaki kodu header’ınızda (ya da açılır menü nerede olsun istiyorsanız oraya) yapıştırarak kullanabilirsiniz. Ha yapıştırmadan önce benim yazdığım saçma sapan menü öğelerini (mesela “bu da 4” diye bi şey yazmışım) silerek kendinize uygun hale getirin. # yazan yerlere o öğenin url’sini yapıştırın. Haydi hayrını görün.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Jscodes.com</title>
<style type="text/css">
#sddm
{ margin: 0 auto;
 padding: 0;
 z-index: 30;
 background-color:#F4F4F4;
 width: 480px;
 height:23px;}

#sddm li
{ margin: 0;
 padding: 0;
 list-style: none;
 float: left;
 font: bold 12px arial}

#sddm li a
{ display: block;
 margin: 0 1px 0 0;
 padding: 4px 10px;
 width: 60px;
 background: #5970B2;
 color: #FFF;
 text-align: center;
 text-decoration: none}

#sddm li a:hover
{ background: #49A3FF}

#sddm div
{ position: absolute;
 visibility: hidden;
 margin: 0;
 padding: 0;
 background: #EAEBD8;
 border: 1px solid #5970B2}

#sddm div a
 { position: relative;
 display: block;
 margin: 0;
 padding: 5px 10px;
 width: auto;
 white-space: nowrap;
 text-align: left;
 text-decoration: none;
 background: #EAEBD8;
 color: #2875DE;
 font: 12px arial}

#sddm div a:hover
 { background: #49A3FF;
 color: #FFF}
</style>
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
 // cancel close timer
 mcancelclosetime();

// close old layer
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
 ddmenuitem = document.getElementById(id);
 ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
 closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
 if(closetimer)
 {
 window.clearTimeout(closetimer);
 closetimer = null;
 }
}

// close layer when click-out
document.onclick = mclose;
// -->
</script>
</head>

<body style="text-align:center">

<ul id="sddm">
 <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
 <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 <a href="#">HTML DropDown</a>
 <a href="#">DHTML DropDown menu</a>
 <a href="#">JavaScript DropDown</a>
 <a href="#">DropDown Menu</a>
 <a href="#">CSS DropDown</a>
 </div>
 </li>
 <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>
 <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 <a href="#">ASP Dropdown</a>
 <a href="#">Pulldown menu</a>
 <a href="#">AJAX dropdown</a>
 <a href="#">DIV dropdown</a>
 </div>
 </li>
 <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
 <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 <a href="#">Visa Credit Card</a>
 <a href="#">Paypal</a>
 </div>
 </li>
 <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>
 <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 <a href="#">Download Help File</a>
 <a href="#">Read online</a>
 </div>
 </li>
 <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>
 <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
 <a href="#">E-mail</a>
 <a href="#">Submit Request Form</a>
 <a href="http://www.jscodes.com/" target="_blank">jscodes.com</a>
 </div>
 </li>
</ul>

<div style="clear:both"></div>

</body>
</html>