js实现菜单选项

最新推荐文章于 2017-11-24 09:54:05 发布

jiangtao7913

最新推荐文章于 2017-11-24 09:54:05 发布

阅读量396

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/jiangtao7913/article/details/50448217

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html代码：

<!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>jquery实现二级下拉菜单</title>
<link rel="stylesheet" type="text/css" href="xiala.css"/>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="xiala.js"></script>
</head>

<body>
<div id="nav" class="nav">
  <ul>
        <li><a href="#">网站首页</a></li>
            <li class="navmenu"><a href="#">课程大厅</a>
            
                <ul>
                <li><a href="#">Javascript</a></li>
                    <li><a href="#">Ajax</a></li>
                    <li><a href="#">Java</a></li>
                </ul>
            </li>
            <li class="navmenu"><a href="#">学习中心</a>
            <ul>
              <li><a href="#">视频学习</a></li>
                    <li><a href="#">案例学习</a></li>
                    <li><a href="#">交流平台</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
</div>
</body>
</html>

我们使用ul,li来实现列表

CSS代码

*{
maigin:0px;
padding:0px;
}
.nav{
background-color:#EEEEEE;
height:40px;
width:450px;
margin:0px auto;
}
ul{
list-style-type:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
}
a{
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
ul li ul li{
float:none;
background-color:#EEEEEE;
}

ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}

js代码:

$(function(){
hideMenu();
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})

$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
})
})

//初始换隐藏子菜单
var hideMenu=function(){
$(".navmenu").children("ul").hide();
}

效果图：

jiangtao7913

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现菜单选项

html代码：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">jquery实现二级下拉菜单网站首页课程大厅
复制链接

扫一扫