您的位置：首页 > Web前端 > JQuery

jQuery二级菜单

2014-06-17 16:16 148 查看

加载jQuery。其步骤为：

1.加载jQuery代码；

<script type="text/javascript" src="路径/jquery.js"></script>

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 onmouseover="onOver(this)" onmouseout="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");}

              );

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery javascript 二级菜单

相关文章推荐

新的分享

章节导航