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 相关文章推荐
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
js实现简单的计算器功能
Jan 16 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 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
晶体管来复再生式二管收音机
2021/03/02 无线电
用PHP开发GUI
2006/10/09 PHP
中篇:安装及配置PHP
2006/12/13 PHP
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
浅谈Vue数据绑定的原理
2018/01/08 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
python fabric使用笔记
2015/05/09 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python AES加密模块用法分析
2017/05/22 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
主治医师岗位职责
2013/12/10 职场文书
服务标语大全
2014/06/18 职场文书
建筑节能汇报材料
2014/08/22 职场文书
党员读书活动心得体会
2016/01/14 职场文书
2019 入党申请书范文
2019/07/10 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL