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 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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&amp;mysql(二)
2006/10/09 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
js如何取消事件冒泡
2013/09/23 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
详解python3实现的web端json通信协议
2016/12/29 Python
Python中正则表达式详解
2017/05/17 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
深入分析python 排序
2020/08/24 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
户外活动总结范文
2014/04/30 职场文书
作风建设演讲稿
2014/05/23 职场文书
酒店员工培训方案
2014/06/02 职场文书
运动会开幕式主持词
2015/07/01 职场文书
python实现自定义日志的具体方法
2021/05/28 Python