jquery垂直导航栏

最新推荐文章于 2022-07-21 11:15:02 发布

Ys@_yxl

最新推荐文章于 2022-07-21 11:15:02 发布

阅读量222

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45817492/article/details/115821662

版权

jquery垂直导航栏

1.构建一级导航栏

1.用标准的 HTML 列表来构建导航栏。导航栏基本上是一个链接列表，因此使用 ul 和 li 元素是非常合适的：

<ul class="content">
   <li class="main"><a href="#"> 1</a>
   </li>
   <li class="main"><a href="#"> 2</a>
   </li>
   <li class="main"><a href="#"> 3</a>
   </li>
   <li class="main"><a href="#"> 4</a>
   </li>
   <li class="main"><a href="#"> 5</a>
   </li>
  </ul>

以上是标准的导航栏代码。

2.设置相应css样式

2.设置一级菜单的css样式,去掉list-style-type，去掉默认的项目符号,并设置宽高和在页面上的位置。

 *{
 margin: 0px;
 padding: 0px;
}
.content{
 margin: 40px 100px;
 float: left;
}
li{
	list-style-type: none;
}
.main,{
 width: 150px;
 font-size: 16px;
 text-align: center;
 cursor: pointer;
 line-height: 40px;
 color: black;
}
.main>a{
 text-decoration: none;
 color: black;
 display: inline-block;
 width: 150px;
 min-height: 40px;
}

3.构建子菜单

<ul class="content">
   <li class="main"><a href="#"> 1</a>
    <ul class="child">
     <li>子菜单1</li>
     <li>子菜单2</li>
     <li>子菜单3</li>
    </ul>
   </li>
   <li class="main"><a href="#"> 2</a>
    <ul class="child">
     <li>子菜单1</li>
     <li>子菜单2</li>
     <li>子菜单3</li>
     <li>子菜单4</li>
    </ul>
   </li>
   <li class="main"><a href="#">3</a>
    <ul class="child">
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
   </li>
  </ul>

4.设置子菜单样式

先把子菜单设置为display: block

.child{
 display:none;
}

5.设置子菜单效果

点击一级菜单，显示子菜单。让当前子菜单显示时，让其他子菜单不显示。

  $(function(){
    //垂直导航栏，点击下拉子菜单
    $(".main>a").click(function(){
     $(this).next().slideToggle(500)
     .parent().siblings().find(".child").slideUp(500);
    })

6.具体代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>竖直导航菜单</title>
  <script src="jquery-3.4.0.js"></script>
  <script>
   $(function(){
    //垂直导航栏，点击下拉子菜单
    $(".main>a").click(function(){
     $(this).next().slideToggle(500)
     .parent().siblings().find(".child").slideUp(500);
    })
  </script>
  <style>
 *{
 margin: 0px;
 padding: 0px;
}
.content{
 margin: 40px 100px;
 float: left;
}
ul ,li{
 list-style: none;
   
}
.main{
 width: 150px;
 font-size: 16px;
 text-align: center;
 cursor: pointer;
 line-height: 40px;
 color: black;
}
.main>a{
 text-decoration: none;
 color: black;
 display: inline-block;
 width: 150px;
 min-height: 40px;
}
.child{
 display:none;
}

  </style>
 </head>
 <body>
  <!--垂直导航栏-->
  <ul class="content">
   <li class="main"><a href="#"> 1</a>
    <ul class="child">
     <li>子菜单1</li>
     <li>子菜单2</li>
     <li>子菜单3</li>
    </ul>
   </li>
   <li class="main"><a href="#"> 2</a>
    <ul class="child">
     <li>子菜单1</li>
     <li>子菜单2</li>
     <li>子菜单3</li>
     <li>子菜单4</li>
    </ul>
   </li>
   <li class="main"><a href="#">3</a>
    <ul class="child">
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
   </li>
  </ul>
 </body>
</html>

Ys@_yxl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery垂直导航栏

jquery垂直导航栏1.构建一级导航栏2.设置相应css样式3.构建子菜单4.设置子菜单样式5.设置子菜单效果6.具体代码1.构建一级导航栏1.用标准的 HTML 列表来构建导航栏。导航栏基本上是一个链接列表，因此使用 ul 和 li 元素是非常合适的：<ul class="content"> <li class="main"><a href="#"> 1</a> </li> <li class="main">
复制链接

扫一扫