jQury实现垂直与横 向二级菜单

这篇博客介绍了如何利用jQuery实现横纵向的二级菜单。通过CSS样式定义菜单布局和交互,然后用jQuery处理鼠标悬停事件,实现下拉菜单的滑动显示和隐藏。示例包括横向和垂直两种二级菜单的完整HTML、CSS和JavaScript代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


第一、横 向二级级级联菜单

写css代码  具体实例css代码如下:


 .hxdiv {
    float:left;
    margin-left:10px;
 }


 .hxdiv ul,.zxdiv ul{
    list-style:none;
    padding:0px;
    margin:0px;
}

 .hxli{
    background-image:url("/images/1.png");
    background-repeat:repeat-x;
     width:120px;
     line-height:30PX;
     margin-right:1px;
     text-align:center;
    float:left;
 }
.hxli a{
    text-decoration:none;
    color:white;
    display:block;
    display:inline-block;
    width:120px;
}
 .hxli li a{
     color:black;
 }
 .hxli ul{
     margin:0px;
     display:none;
 }
  .hxli ul li{
      background:#d9d9d9;
      width:120px;
     
  }


html文件代码:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    
      <link href="/static/bq.css" type="text/css" rel="stylesheet"/>
      <script type="text/javascript" src="/static/bq.js"/>

        <script type="text/javascript" src="/static/jqury.js"/>
  </head>
  <body>
<div class="hxdiv">
          <ul>
              <li class="hxli">
                  <a href="#">标签效果1</a>
                  <ul>
                      <li><a  href="#">子效果1</a></li>
                      <li><a  href="#">子效果2-2</a></li>
                  </ul>
              </li>
              <li class="hxli">
                  <a href="#">标签效果2</a>
                  <ul>
                      <li><a href="#">子效果2-1</a></li>
                      <li><a  href="#">子效果2-2</a></li>
                  </ul>
              </li>
               <li class="hxli">
                  <a href="#">标签效果3</a>
                  <ul>
                      <li><a  href="#">子效果3-1</a></li>
                      <li><a  href="#">子效果3-2</a></li>
                  </ul>
              </li>
          </ul>
 </div>     
  </body>
</html>


第二、垂直二级级级联菜单

写css代码  具体实例css代码如下:


.zxdiv {
     float:left;
     margin-left:100px;
     width:500px;
     min-height:200px;
     height:auto;
  }
 

 .zxli{
    background-image:url("/images/1.png");
    background-repeat:repeat-x;
     width:120px;
     line-height:30PX;
     margin-right:1px;
     text-align:center;

 }
.zxli a{
    text-decoration:none;
    color:white;
    display:block;
    display:inline-block;
    width:120px;
}
 .zxli li a{
     color:black;
 }
 .zxli ul{
     margin:0px;
     display:none;
 }
  .zxli ul li{
      background:#d9d9d9;
      width:120px;

  }

html文件代码:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    
      <link href="/static/bq.css" type="text/css" rel="stylesheet"/>
      <script type="text/javascript" src="/static/bq.js"/>

       <script type="text/javascript" src="/static/jqury.js"/>
  </head>
  <body>
<div class="zxdiv">
      <ul>
              <li class="zxli">
                  <a href="#">标签效果1</a>
                  <ul>
                      <li><a  href="#">子效果1</a></li>
                      <li><a  href="#">子效果2-2</a></li>
                  </ul>
              </li>
              <li class="zxli">
                  <a href="#">标签效果2</a>
                  <ul>
                      <li><a href="#">子效果2-1</a></li>
                      <li><a  href="#">子效果2-2</a></li>
                  </ul>
              </li>
               <li class="zxli">
                  <a href="#">标签效果3</a>
                  <ul>
                      <li><a  href="#">子效果3-1</a></li>
                      <li><a  href="#">子效果3-2</a></li>
                  </ul>
              </li>
          </ul>

   </div>
  </body>
</html>


第三、建一个名为bq的js文件,具体代码如下:


$(document).ready(function(){
  

  $('.hxli,.zxli').hover(function(){
        $(this).children("ul").slideDown();
    },function(){
        $(this).children("ul").slideUp();
    });

 

//或者这样写:

 $('.hxli,.zxli').mouseover(function(){
        $(this).children("ul").css("display","block")
    }).mouseout(function(){
        $(this).children("ul").css("display","none")
    })

 

})


<!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=gb2312" /> <meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" /> <meta name="description" content="此代码内容为巧克力jQuery横向二级滑动导航菜单,属于站长常用代码,更多菜单导航代码请访问懒人图库JS代码频道。" /> <title>巧克力jQuery横向二级滑动导航菜单_懒人图库</title> <link href="css/lrtk.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js"></script> <script language="javascript" type="text/javascript" src="js/lrtk.js"></script> </head> <body> <!-- 代码 开始 --> <div id="menu"> <ul id="nav"> <li class="mainlevel"><span class="note">首页</span></li> <li class="mainlevel" id="mainlevel_01"><a href="#">环境可视化</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">空调</a></li> <li><a href="#">电量仪</a></li> <li><a href="#">温度</a></li> </ul> </li> <li class="mainlevel" id="mainlevel_02"><a href="#">容量可视化</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">电力功耗</a></li> <li><a href="#">机柜承重</a></li> <li><a href="#">空余U位</a></li> <li><a href="#">机柜位置</a></li> </ul> </li> <li class="mainlevel"><a href="#">管线可视化</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">供电管路</a></li> </ul> </li> <li class="mainlevel"><a href="#">监控可视化</a><!--input an em tag as a space,IE is gread need--> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">安防设施</a></li> <li><a href="#">云图</a></li> <li><a href="#">气流</a></li> </ul> </li> <li class="mainlevel"><a href="#">演示可视化</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">动画演示</a></li> <li><a href="#">安防设施</a></li> </ul> </li> </ul> </div> <!-- 代码 结束 --> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值