js实现前端界面导航栏下拉列表


Posted in Javascript onAugust 27, 2020

本文实例为大家分享了js实现前端界面导航栏下拉列表的具体代码,供大家参考,具体内容如下

先来看成果图

js实现前端界面导航栏下拉列表

html代码:

<nav>
<ul class="nav">
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表一
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表二
</a>
<ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表三
</a>
<ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表四
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表五
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表六
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
列表七
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<li><a href="#" >概述</a></li>
<div class="ulbg"></div>
</ul>
</li>
</ul>
</nav>

css代码:

nav {
background-color: #efe5e5;
width: 77%;
}

.nav{
height: 50px;
width: 100%;
display: flex;
}

.nav .dropDowm{
float: left;
width: 14%;
list-style: none;
}

.nav .dropDowm>a{
text-decoration: none;
margin: 12px;
line-height: 3;
}

.nav .dropDowm .dropdown-menu{
background-color: #848d9e;
}

.nav .dropDowm .dropdown-menu>li{
list-style: none;
display: block;
}
.nav .dropDowm .dropdown-menu>li>a{
text-decoration: none;
display: block;
font-size: 16px;
line-height: 28px;
}

最重要的是js代码 利用js代码控制

$(function(){
$('.nav .dropDowm').hover(function(e) {
$(this).find('ul').stop().slideToggle();
});
});

简短介绍:

slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。
如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

如果运行出现(F12查看):

js实现前端界面导航栏下拉列表

解决 在头部加上jquery的js文件即可
比如,这是小编的js目录下的 别忘了下载再引入

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

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

Javascript 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
angular之ng-template模板加载
Nov 09 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 #Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 #Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 #Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 #Javascript
javascript操作向表格中动态加载数据
Aug 27 #Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 #Javascript
js实现批量删除功能
Aug 27 #Javascript
You might like
几个php应用技巧
2008/03/27 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
python显示天气预报
2014/03/02 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python yield关键词案例测试
2019/10/15 Python
Python中无限循环需要什么条件
2020/05/27 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
详解Python中的文件操作
2021/01/14 Python
参观监狱心得体会
2014/01/02 职场文书
如何写你的创业计划书
2014/01/07 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
环保建议书100字
2014/05/14 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
医院护士工作检讨书
2014/10/26 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
HttpClient实现表单提交上传文件
2022/08/14 Java/Android