jQuery二级菜单

最新推荐文章于 2024-07-30 22:36:34 发布

qinxiaohun

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量680

点赞数

分类专栏：转载文章文章标签： jquery javascript 二级菜单

转载文章专栏收录该内容

4 篇文章 0 订阅

订阅专栏

加载jQuery。其步骤为：

1.加载jQuery代码；

2.添加自己的js文件

3.在自己的js文件中，添加js代码

$(document).ready(function(){

//js代码;

});

获取标签的方式：

1.document.getElementByTagName("h1");

2.document.getElementByIdx_x("sidebar");

jQueryd的方法获取标签：

1.$("h1"); 页面中所有的h1标签

2.$("#sidebar"); <div id=sidebar></div>

3.$("#Id p"); <div id=sidebar><p></p></div>

$("#nav li") 给定的匹配所有的后代元素；

$("#nav>li") 给定的nav下的所有子元素；

注：slideUp（）消失 slideDown（）下拉出现

fadeOut（“slow”）显示的标签通过透明度的变化显示

fadeIn（“slow”）显示的标签通过透明度的变化隐藏

hide（）隐藏

show（）显示

index.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" />
<meta http-equiv="X-UA-ComPatible" content="IE=7"/>
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/style2.css"/>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/java1.js"></script>
</head>

<body>
<div id="nav">
        <ul class="nav_1">
            <li><a href="#">HOME</a></li>
            <li οnmοuseοver="onOver(this)" οnmοuseοut="onOut(this)"><a href="#">JAVASCRIPt</a>
              <ul>
                 <li class="erjitop"> </li>
                  <li><a href="#">漂亮的二级菜单</a></li>
                    <li><a href="#">漂亮的二级菜单</a></li>
                    <li><a href="#">漂亮的二级菜单</a></li>
                    <li class="erjibottom"> </li>
              </ul>
           </li>
          <li><a href="#">FLASH</a></li>
</ul>
</div>
</body>
</html>

style2.css：

@charset "utf-8";
*{
margin:0px;
padding:0px;
}
body{
background:#fff;
margin-left:auto;
margin-right::auto;
font-family:Arial;
line-height:24px;
text-align:center;
font-size:12px;
vertical-align:mindle;
}
ul,li,ol,dl{
list-style:none;
}
a{
text-decoration:none;
}
img{
border:none;
}
li{
vertical-align:middle;
}
input,textarea,seelct{
vertical-align:middle;
}
#nav {
background-image: url(../images/index.gif);
background-repeat: no-repeat;
height: 287px;
width: 158px;
margin-right: auto;
margin-left: auto;
text-align: center;
vertical-align: middle;
padding-top: 20px;
}
#nav .nav_1 {
margin-right: auto;
margin-left: auto;
width:158px;
}

#nav .nav_1 li {
height: 50px;
font-size: 18px;
width: 158px;
text-align: center;
vertical-align: middle;
position: relative;
display:block;

}
#nav .nav_1 li ul {
position: absolute;
left: 158px;
top: -50px;
background:url(../images/2_06.jpg) left top no-repeat;
display:none;
background-repeat: no-repeat;
background-position: left 5px;
width: 220px;
background-repeat: no-repeat;
}
#nav .nav_1 li ul .erjitop {
background-image: url(../images/2_03.jpg);
background-repeat: no-repeat;
height: 15px;
font-size: 0px;
line-height: 0px;
background-position: 17px bottom;
margin: 0px;
padding: 0px;
width: 220px;
}
#nav .nav_1 li ul .erjibottom {
font-size: 0px;
line-height: 0px;
background-image: url(../images/2_09.jpg);
background-position: 16px bottom;
margin: 0px;
padding: 0px;
height: 10px;
width: 220px;
background-repeat: no-repeat;
}

#nav .nav_1 li ul li {
height: 40px;
width: 202px;
margin-left:18px;
background-image: url(../images/6_03.jpg);
background-repeat: repeat-x;
}

#nav .nav_1 li a {
color: #FFF;
height: 50px;
width: 158px;
font-weight: bold;
font-size: 18px;
text-decoration: none;
}
#nav .nav_1 li a:hover {
color: #000;
}

java1.js：

$(document).ready(function(){
        $(".nav_1>li").hover(
              function(){$(this).children("ul").fadeIn("normal");},
              function(){$(this).children("ul").fadeOut("normal");}
              );
});

qinxiaohun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery二级菜单

加载jQuery。其步骤为：1.加载jQuery代码；2.添加自己的js文件3.在自己的js文件中，添加js代码$(document).ready(function(){//js代码;});获取标签的方式：1.document.getElementByTagName("h1");2.document.getElementByIdx_x("sidebar");
复制链接

扫一扫