码迷,mamicode.com
首页 > Web开发 > 详细

js导航二级下拉菜单

时间:2016-04-15 15:35:50      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:js二级下拉

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

<style type="text/css">

*{ margin:0px; padding:0px; font-size:12px;}

ul li{ list-style:none;}

a{ text-decoration:none;}

#nav{ width:980px; margin:0 auto;}

#nav li{ 

height:36px; line-height:36px; background:#666666; text-align:center;

width:120px; position:relative; float:left; margin-right:10px;

}

#nav li a{ color:#FFFFFF; display:block; font-weight:bold;}

#nav ul{ height:0px; overflow:hidden; position:absolute; left:0px;}

#nav ul li{ background:#003366; height:28px; line-height:28px;}

#nav ul li a{ color:#FFFFFF; display:block; font-weight:normal;}

.clear{ zoom:1;}

.clear:after{ content:""; display:block; clear:both;}

</style>

<script language="javascript">

window.onload=function()

{

var oNav=document.getElementById("nav");//获取导航元素节点

var oLi=oNav.children;//获取Nav下面的所有的li元素 返回的是一个集合

for(var i=0;i<oLi.length;i++)

{

//当鼠标移过去的时候 发生移动事件

oLi[i].onmouseover=function()

{

var oUl=this.getElementsByTagName("ul")[0];//获取当前li下面的第一个<ul>节点

var oList=oUl.children;//获取<ul>下面的子元素 <li>

var offsetHeight=oList[0].offsetHeight;  //计算0下标 也就是第一个元素的高度  28px

var iTargetHeight=(oList.length * offsetHeight)  //相当于li的个数 * 每个 li的高度 height     5*28=????

//开始调用完美运动框架....

startMove(oUl,{"height":iTargetHeight});

}

//当鼠标移开的时候 就关闭

oLi[i].onmouseout=function()

{

var oUl=this.getElementsByTagName("ul")[0];//获取当前li下面的第一个<ul>节点

startMove(oUl,{"height":0});

}

}

}

</script>

</head>


<body>


<br/><br/><br/><br/><br/>

    

    <ul id="nav" class="clear">

        <li>

            <a href="#">产品展示</a>

            <ul>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

            </ul>

        </li>

        <li>

            <a href="#">新闻中心</a>

            <ul>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

            </ul>

        </li>

        <li>

            <a href="#">联系我们</a>

            <ul>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

                <li><a href="#">LED天花灯</a></li>

            </ul>

        </li>

    </ul>

    

    <div style="width:980px; background:#666666; margin:0 auto; margin-top:10px; padding:50px 0px;" class="clear">

    asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

        asdfasdf<br/>

    </div>

</body>

</html>

<script language="javascript">

function startMove(obj, json, fn) {

clearInterval(obj.iTimer);

var iCur = 0;

var iSpeed = 0;

obj.iTimer = setInterval(function() {

var iBtn = true;

for ( var attr in json ) {

var iTarget = json[attr];

if (attr == ‘opacity‘) {

iCur = Math.round(css( obj, ‘opacity‘ ) * 100);

} else {

iCur = parseInt(css(obj, attr));

}

iSpeed = ( iTarget - iCur ) / 8;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

if (iCur != iTarget) {

iBtn = false;

if (attr == ‘opacity‘) {

obj.style.opacity = (iCur + iSpeed) / 100;

obj.style.filter = ‘alpha(opacity=‘+ (iCur + iSpeed) +‘)‘;

} else {

obj.style[attr] = iCur + iSpeed + ‘px‘;

}

}

}

if (iBtn) {

clearInterval(obj.iTimer);

fn && fn.call(obj);

}

}, 20);

}


function css(obj, attr) {

if (obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return getComputedStyle(obj, false)[attr];

}

}

</script>


js导航二级下拉菜单

标签:js二级下拉

原文地址:http://771541213.blog.51cto.com/10810853/1764151

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!