jquery实现垂直和水平菜单导航栏


Posted in Javascript onAugust 27, 2020

本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下

1.HTML代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>竖直导航菜单</title>
  <link href="css/Vmenu.css" rel="stylesheet" />
  <script src="js/jquery-2.1.4.min.js"></script>
  <script>
   $(function(){
    //垂直导航栏,点击下拉子菜单
    $(".main>a").click(function(){
     $(this).next().slideToggle(500)
     .parent().siblings().find(".child").slideUp(500);
    })
     
    //水平导航栏,鼠标经过下拉导航栏
    $(".hmain").hover(function(){
     $(this).find(".child").slideToggle(500)
      .parent().siblings().find(".child").slideUp();
    })
   })
  </script>
 </head>
 <body>
  <!--垂直导航栏-->
  <ul class="content">
   <li class="main"><a href="#">菜单 1</a>
    <ul class="child">
     <li>菜单1.1</li>
     <li>菜单1.2</li>
     <li>菜单1.3</li>
    </ul>
   </li>
   <li class="main"><a href="#">菜单 2</a>
    <ul class="child">
     <li>菜单2.1</li>
     <li>菜单2.2</li>
     <li>菜单2.3</li>
     <li>菜单2.4</li>
    </ul>
   </li>
   <li class="main"><a href="#">菜单 3</a>
    <ul class="child">
     <li>菜单3.1</li>
     <li>菜单3.2</li>
     <li>菜单3.3</li>
    </ul>
   </li>
   <li class="main"><a href="#">菜单 4</a>
    <ul class="child">
     <li>菜单4.1</li>
     <li>菜单4.3</li>
    </ul>
   </li>
   <li class="main"><a href="#">菜单 5</a>
    <ul class="child">
     <li>菜单5.1</li>
     <li>菜单5.2</li>
    </ul>
   </li>
  </ul>
   
  <!--水平导航栏-->
  <ul class="content">
   <li class="hmain"><a href="#">菜单 1</a>
    <ul class="child">
     <li>菜单1.1</li>
     <li>菜单1.2</li>
     <li>菜单1.3</li>
    </ul>
   </li>
   <li class="hmain"><a href="#">菜单 2</a>
    <ul class="child">
     <li>菜单2.1</li>
     <li>菜单2.2</li>
     <li>菜单2.3</li>
     <li>菜单2.4</li>
    </ul>
   </li>
   <li class="hmain"><a href="#">菜单 3</a>
    <ul class="child">
     <li>菜单3.1</li>
     <li>菜单3.2</li>
     <li>菜单3.3</li>
    </ul>
   </li>
   <li class="hmain"><a href="#">菜单 4</a>
    <ul class="child">
     <li>菜单4.1</li>
     <li>菜单4.3</li>
    </ul>
   </li>
   <li class="hmain"><a href="#">菜单 5</a>
    <ul class="child">
     <li>菜单5.1</li>
     <li>菜单5.2</li>
    </ul>
   </li>
  </ul>
 </body>
</html>

2.CSS代码

*{
 margin: 0px;
 padding: 0px;
}
.content{
 margin: 40px 100px;
 float: left;
}
ul ,li{
 list-style: none;
  
}
.main,.hmain{
 width: 150px;
 background: #222;
 font-size: 16px;
 text-align: center;
 cursor: pointer;
 line-height: 40px;
 color: white;
}
.main>a,.hmain>a{
 text-decoration: none;
 color: white;
 display: inline-block;
 width: 150px;
 min-height: 40px;
}
.main:hover,.hmain:hover{
 background: black;
}
.child{
 background: #444;
 display:none;
}
.child li:hover{
 background: #333333;
}
 
/*垂直导航栏左浮动*/
.hmain{
 float: left;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
javascript调试说明
Jun 07 Javascript
JavaScript 事件系统
Jul 22 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
原生js实现放大镜特效
Mar 08 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
JS实现图片剪裁并预览效果
Aug 12 #Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 #Javascript
分享JS数组求和与求最大值的方法
Aug 11 #Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 #Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 #Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 #Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 #Javascript
You might like
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
python 读取.nii格式图像实例
2020/07/01 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
劳资员岗位职责
2013/11/11 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
心理咨询承诺书
2014/05/20 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
教师工作态度自我评价
2015/03/05 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技