web下拉菜单的制作方法

　　参考别人的代码，这里用到了<dl>,<dt>,<dd>标签，还加上了一些动画效果。

<dl class="dropDown">
<dt id="dt1" onmouseover="drop($('dd1'))" onmouseout="unDrop($('dd1'))">one</dt>
<dd id="dd1" onmouseover="cancelHide($('dd1'))" onmouseout="unDrop($('dd1'))">
<ul>
<li>home</li>
<li>welcome</li>
<li>contact</li>
</ul>
</dd>
</dl>

通过先将<dd>中的类容隐藏起来，然后当鼠标经过时在将他显示即可，其实挺简单。。。。说白了还是通过javascript来控制css来实现。。。

 

源代码：

<!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=gb2312" />
<title>无标题文档</title>

<style type="text/css">
    .dropDown{
        width:100px;
    }
    .dropDown dt{
        width:100%;
        height:28px;
        text-align:center;
        border:1px solid #000000;
        background-color:#99FF99;
    }
    .dropDown dd{
        margin:0px;
        width:102%;
        display:none;
        overflow:hidden;
        background-color:#00CC66;
    }
    .dropDown ul{
        border:1px solid #000000;
        margin:0px;
        padding:0px;
        list-style:none;
    }
    .dropDown li{
        border:1px solid #003333;
        height:28px;
        text-align:center;
        cursor:pointer;
    }
    .dropDown li:hover{
        font-weight:bold;
        background:#d9e1e4; 
        color:#000
    }
    
</style>

<script type="text/javascript">
    function doDrop(obj,big){
        var nowHeight=obj.offsetHeight;
        if(nowHeight<big){
            var need=Math.ceil((big-nowHeight)/10);
            obj.style.height=nowHeight+need+'px';
        }else{
            obj.style.opacity=1;
            clearInterval(obj.time);
        }
    }
    function  doUnDrop(obj){
        var nowHeight=obj.offsetHeight;
        if(nowHeight>10){
            var need=Math.ceil(nowHeight/15);
            obj.style.height=nowHeight-need+'px';
        }else{
            obj.style.display='none';
            clearInterval(obj.time);
        }
    }
    function $(sId){
        return document.getElementById(sId); 
    }
    function drop(obj){
        clearInterval(obj.time);
        obj.style.display='block';
        obj.style.height='auto';
        obj.big=obj.offsetHeight;
        obj.style.height = '0px';
        obj.style.opacity=0.5;
        obj.time= setInterval(function(){doDrop(obj,obj.big)},10);
    }
    function cancelHide(obj){
        clearInterval(obj.time);
        if(obj.offsetHeight<obj.big){
            obj.time= setInterval(function(){doDrop(obj,obj.big)},10);
        }
        obj.style.opacity=1;
        obj.style.display='block';
    }
    function unDrop(obj){
        obj.style.opacity=0.5;
        clearInterval(obj.time);
        obj.time= setInterval(function(){doUnDrop(obj)},10);
    }
</script>

</head>

<body>
    <dl class="dropDown">
        <dt id="dt1" onmouseover="drop($('dd1'))" onmouseout="unDrop($('dd1'))">one</dt>
        <dd id="dd1" onmouseover="cancelHide($('dd1'))" onmouseout="unDrop($('dd1'))">
            <ul>
                <li>home</li>
                <li>welcome</li>
                <li>contact</li>
            </ul>
        </dd>        
    </dl>
</body>
</html>



posted on 2011-12-09 14:45  fjs_cloud  阅读(503)  评论(0)    收藏  举报

导航