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代码
Jul 01 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 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
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php中fsockopen用法实例
2015/01/05 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
js实现简单扫雷
2020/11/27 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
Python struct模块解析
2014/06/12 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
军训自我鉴定
2014/01/22 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
贫困生证明范文
2015/06/16 职场文书
春节慰问简报
2015/07/21 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS