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 相关文章推荐
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
全面分析JavaScript 继承
May 30 Javascript
Vue.js实现立体计算器
Feb 22 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实现变色验证码实例
2014/01/06 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
SeaJS中use函数用法实例分析
2017/10/10 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
用python读写excel的方法
2014/11/18 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
python中reload重载实例用法
2020/12/15 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
学生会副主席竞聘书
2014/03/31 职场文书
房屋转让协议书
2014/04/11 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
求职信结尾怎么写
2014/05/26 职场文书
写景作文评语集锦
2014/12/25 职场文书
公司慰问信范文
2015/03/23 职场文书
2016年国培研修日志
2015/11/13 职场文书
详解pytorch创建tensor函数
2022/03/22 Python
Python利用capstone实现反汇编
2022/04/06 Python