js实现前端界面导航栏下拉列表 |
您所在的位置：网站首页 › html导航栏下拉列表 › js实现前端界面导航栏下拉列表 |
js实现前端界面导航栏下拉列表
|
本文实例为大家分享了js实现前端界面导航栏下拉列表的具体代码，供大家参考，具体内容如下 先来看成果图
html代码： 列表一 概述 概述 概述 概述 列表二 概述 概述 概述 概述 概述 列表三 概述 概述 概述 概述 概述 列表四 概述 概述 概述 概述 列表五 概述 概述 概述 概述 列表六 概述 概述 概述 概述 列表七 概述 概述 概述 概述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查看）：
解决 在头部加上jquery的js文件即可 比如，这是小编的js目录下的 别忘了下载再引入 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 您可能感兴趣的文章:JS中用三种方式实现导航菜单中的二级下拉菜单原生JS实现导航下拉菜单效果JS+CSS实现简单的二级下拉导航菜单效果JS 实现导航菜单中的二级下拉菜单的几种方式javascript仿京东导航左侧分类导航下拉菜单效果js+div+css下拉导航菜单完整代码分享javascript实现带下拉子菜单的导航菜单效果顶部缓冲下拉菜单导航特效的JS代码基于JS快速实现导航下拉菜单动画效果附源码下载JavaScript实现HTML导航栏下拉菜单 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |