Javascript Drop Down Menu Change Field

@shrikrishnatechNov 17.2010 — #[B]HTML Code[/B]

[CODE]<ul id="sddm">
 <li><a href="#" 
 onmouseover="mopen('m1')" 
 onmouseout="mclosetime()">Home</a>
 <div id="m1" 
 onmouseover="mcancelclosetime()" 
 onmouseout="mclosetime()">
 <a href="#">HTML Drop Down</a>
 <a href="#">DHTML Menu</a>
 <a href="#">JavaScript DropDown</a>
 <a href="#">Cascading Menu</a>
 <a href="#">CSS Horizontal Menu</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 Drop Submenu</a>
 <a href="#">DIV Cascading Menu</a>
 </div>
 </li>
 <li><a href="#">Order</a></li>
 <li><a href="#">Help</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 <div style="clear:both"></div>
 [/CODE]

[B]CSS Code[/B]

[CODE]#sddm
 {	margin: 0;
 padding: 0;
 z-index: 30}
 
 #sddm li
 {	margin: 0;
 padding: 0;
 list-style: none;
 float: left;
 font: bold 11px 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: 11px arial}
 
  #sddm div a:hover
  {	background: #49A3FF;
   color: #FFF}
 [/CODE]

[B]JavaScript Code[/B]

[CODE]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; 
 [/CODE]

Web Design Company

Javascript Drop Down Menu Change Field

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript Drop Down Menu Change Field

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴