05 January 2010

search drop down list onmouseover event

Hi friends
Here you can see the code to get dropdown list onmouseover event using javascript
<script type="text/javascript">
var timeout    = 100;
var closetimer    = 0;
var ddmenuitem    = 0;

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);
    if(ddmenuitem)
        ddmenuitem.style.visibility = 'visible';

}
function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
    closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

function chooseSearchSelect(type)
{

}
</script>
<style type="text/css">
.clsMenuSearch {
background-color:#FFFFFF;
border-color:#E5E5E5 #000000 #000000 #E5E5E5;
border-style:solid;
border-width:1px;
margin:0.1em 0;
width:100px;
z-index:21150;
}
.clsSearch li a {
color:#0063DC;
cursor:pointer;
text-decoration:none;
}
</style>
<div class="clsSearch">
              <ul>
              <li onmouseout="mclosetime()" onmouseover="mopen('selMenuSearch')">
              <a onclick="chooseSearchSelect('video');">search</a>

              <div class="clsMenuSearch" id="selMenuSearch" style="visibility: hidden; position: absolute;">
              <a onclick="chooseSearchSelect('photo');">Videos</a>
              <a onclick="chooseSearchSelect('photo');">Photos</a>
              <a onclick="chooseSearchSelect('music');">Audios</a>

              <a onclick="chooseSearchSelect('members');">Members</a>
              <!--<a onClick="chooseSearchSelect('channel');">Channels</a>-->
              </div>

              </li>
              </ul>

              </div>