jQuery二级菜单

加载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");  

3.$("#Id p");    

 

 

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

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

 

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

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

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

    hide（）隐藏

    show（）显示

index.html：

       

           
• HOME

           
• JAVASCRIPt
                 
  
                   
  •  
  
                     
  • 漂亮的二级菜单
  
                     
  • 漂亮的二级菜单
  
                     
  • 漂亮的二级菜单
  
                     
  •  
  
               
  
            

         
• FLASH

 

 

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");}
              );       
});