bootstrap导航窗格响应式二级菜单

article/2025/8/19 5:59:16

这次碰到的需求是响应式二级导航窗格，默认的导航窗格只有点击下拉框的二级窗格，会有如下问题：一级菜单无法添加超链接，二级菜单展示要多点一下。

实现目标：
1.滑动到指定区域，展示二级菜单。
2.一级菜单和二级菜单都可以进行连接跳转。

1.核心代码CSS

首先是css样式，其实就是让二级菜单在悬停（hover）的时候展示，这里我踩了个坑就是要指定到li样式，【.nav-list】中的【.】表示子类继承，而【>li:hover】中的【>】表示指定子类样式，dropdown-menu就是我li的class名称。

.nav-list .navbar-nav>li:hover .dropdown-menu {display: block;
}

ps：浏览器的缓存会造成，建议开发者右键检查关闭浏览器缓存
在这里插入图片描述

2.核心代码js

除了css实现悬停弹出二级菜单，还要让一级菜单可以点击，如果不加入js代码一级菜单将无法点击。

    let sUserAgent = navigator.userAgent.toLowerCase();let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";let bIsMidp = sUserAgent.match(/midp/i) == "midp";let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";let bIsAndroid = sUserAgent.match(/android/i) == "android";let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {// alert("当前是电脑打开");$(document).ready(function () {$(document).off('click.bs.dropdown.data-api');});}

3.完整代码

注释介绍了用到的class的用途，需要注意的就是css和js为核心，别指定错class否则无法使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<style>.nav-list .navbar-nav > li:hover .response {display: block;}
</style>
<body>
<!--navbar-fixed-bottom设置导航条组件固定在底部，默认顶部navbar-fixed-top-->
<div class="collapse navbar-collapse nav-list" id="probootstrap-menu"><!--navbar-default默认主题，navbar-inverse黑色主题--><nav class="navbar navbar-default"><!--container-fluid设置宽度充满父元素，即为100%--><div class="container-fluid"><!-- navbar-header主要指定div元素为导航条组件包裹品牌图标及切换按钮 --><div class="navbar-header"><!--navbar-toggle 设置button元素为导航条组件的切换钮--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"></button><!--class="navbar-brand" 一般放品牌logo--><span class="navbar-brand glyphicon glyphicon-star " aria-hidden="true"/></div><!-- 导航条的body --><!--collapse设置button元素为在视口小于768px时才显示--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--navbar-nav设置ul为导航条组件内的列表元素;--><ul class="nav navbar-nav"><!--第一个导航窗格--><!--active选中后的样式--><li class="active"><a href="#">激活 <span class="sr-only">(current)</span></a></li><!--第二个导航窗格--><!--dropdown表示下拉菜单--><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">下拉二级菜单 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">下拉二级菜单1</a></li><!--role="separator"代表标签充当分隔角色无实际效果；divider分割线--><li role="separator" class="divider"></li><li><a href="#">下拉二级菜单2</a></li><li role="separator" class="divider"></li><li><a href="#">下拉二级菜单3</a></li><li role="separator" class="divider"></li><li><a href="#">下拉二级菜单4</a></li></ul></li><!--第三个导航窗格--><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">响应式二级菜单 <span class="caret"></span></a><ul class="dropdown-menu response"><li><a href="#">响应二级菜单1</a></li><li><a href="#">响应二级菜单2</a></li><li><a href="#">响应二级菜单3</a></li><li><a href="#">响应二级菜单4</a></li></ul></li></ul><!--navbar-form表单；navbar-left左浮动--><form class="navbar-form navbar-left"><!--form-group调整间距，说白了就是个最佳间距样式--><div class="form-group"><!--form-control特定效果：宽度变成了100%，浅灰色（#ccc）的边框，4px的圆角，阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化placeholder的颜色为#999--><input type="text" class="form-control" placeholder="Search"><button type="submit" class="btn btn-default">Submit</button></div></form><ul class="nav navbar-nav navbar-right"><li><a href="http://www.baidu.com">百度链接</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">下拉菜单 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li role="separator" class="divider"></li><li><a href="#">4</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>
</div>
</body>
<script>//判断客户端let sUserAgent = navigator.userAgent.toLowerCase();console.log("客户端信息:" + "[" + sUserAgent + "]");//各种类型客户端枚举let bIsIpad = sUserAgent.match(/ipad/i) === "ipad";let bIsIphoneOs = sUserAgent.match(/iphone os/i) === "iphone os";let bIsMidp = sUserAgent.match(/midp/i) === "midp";let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) === "rv:1.2.3.4";let bIsUc = sUserAgent.match(/ucweb/i) === "ucweb";let bIsAndroid = sUserAgent.match(/android/i) === "android";let bIsCE = sUserAgent.match(/windows ce/i) === "windows ce";let bIsWM = sUserAgent.match(/windows mobile/i) === "windows mobile";if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {//不等于以上枚举判断是电脑console.log("当前是电脑打开");$(document).ready(function () {//取消绑定bootstrap导航窗体的下拉框点击事件// click.bs表示bootstrap的点击，response表示我要取消的class名称$(document).off('click.bs.response.data-api');});}
</script>
</html>

http://chatgpt.dhexx.cn/article/La3gaM30.shtml

相关文章

html 悬停 二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！

html 悬停 二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！

话不多说&#xff0c;先上效果图&#xff1a; 1、鼠标没在上面 image 2、鼠标放在一级菜单上&#xff0c;展开二级菜单 image 3、鼠标放在二级菜单上 image二级菜单测试 /*为了使菜单居中*/ body { padding-top:100px; text-align:center; } /* -------------菜单css代码------…
阅读更多...
DIV+CSS 二级菜单实现

DIV+CSS 二级菜单实现

DIVCSS实现二级菜单 在网页制作中我们经常会用到的这样的导航栏二级菜单布局 实现效果如下&#xff1a; 设计思路就是通过 ul li 的双重嵌套来实现二级菜单&#xff0c;l利用display:none将二级菜单默认隐藏&#xff0c;li:hover鼠标悬浮时再将其显示出来。 需要注意的是&…
阅读更多...
html 二级菜单 鼠标移动消失,鼠标一离开导航菜单，二级菜单就隐藏，移不到二级菜单...

html 二级菜单 鼠标移动消失,鼠标一离开导航菜单，二级菜单就隐藏，移不到二级菜单...

鼠标一离开导航菜单，二级菜单就隐藏，移不到二级菜单 wky1682008 2015-12-28 09:27 html >无标题文档 ul{margin:0;padding:0;list-style:none; font-size:16px;font-family:"宋体";} a{ text-decoration:none;} ul{width:1000px; margin:50px auto 20px;backgro…
阅读更多...
HTML一级菜单和二级菜单区别,一级菜单和二级菜单对不齐

HTML一级菜单和二级菜单区别,一级菜单和二级菜单对不齐

html>二级菜单 *{margin: 0px; padding: 0px; } ul{font-size: 18px; color: white; list-style-type: none; text-align: center; width: 200px; line-height: 40px; background-color: black; position: relative; } a{color:white; text-decoration: none; } li{border-b…
阅读更多...
HTML下拉框二级菜单

HTML下拉框二级菜单

一、form表单 <div><form><div><!-- 下拉框 --><select>//默认项为第一个<option>广州</option><option>深圳</option><option>山东</option><option>北京</option></select></div>…
阅读更多...
html 二级页面 教程,css 实现动态二级菜单

html 二级页面 教程,css 实现动态二级菜单

动态实现简单的二级菜单 当鼠标放到一级标签上时&#xff0c;鼠标会变成小手的形状 展示二级菜单&#xff0c;源码如下&#xff0c;复制即可直接使用Document * {margin: 0; padding: 0;} ul { list-style: none;} div { width: 100%; height: 50px; background-color: #ccc; }…
阅读更多...
HTML+CSS制作二级菜单栏

HTML+CSS制作二级菜单栏

今天我们来练习一下二级菜单栏，说实话比较简单，但是自己一个人写的时候错误百出，逻辑混乱，于是乎网上找了几个案例，借鉴了一下思路，才整明白，鄙人确实不才，哈哈！ 效果图附上： 首先：我已链接了外部样式重置，所以无需自己亲自写： reset.css网上有很多，我用的是下面…
阅读更多...
JS二级菜单

JS二级菜单

我们使用HTMLcssjs来写出二级菜单的简易效果 首先来看HTML的代码&#xff0c;这个没什么好说的 <div class"box"><div class"topbox"><ul><li class"bgc">春雨</li><li>夏风</li><li>秋雾<…
阅读更多...
html 二级菜单

html 二级菜单

先放效果图&#xff1a; 首先设置菜单的基本轮廓 <div id"nav"><ul><li><a href"#">一级菜单1</a></li><li><a href"#">一级菜单2</a></li><li><a href"#" …
阅读更多...
html、css 实现二级菜单

html、css 实现二级菜单

本文中&#xff0c;一级菜单我设计了五个元素&#xff08;然后给第四个元素设计了二级菜单&#xff09; html&#xff1a; <nav><ul class"topnav clearfix"><li><a href"">Lorem.</a></li><li><a href&quo…
阅读更多...
二级菜单

二级菜单

原理&#xff1a; 其核心就是两层ul进行嵌套当鼠标移动到一级菜单时&#xff0c;其对应的二级菜单自动展开 下面我们来看具体的代码&#xff1a; <div class"menu-box"><ul><li><a href"#">首页</a></li><li>…
阅读更多...
二级菜单小知识

二级菜单小知识

在许多网页中&#xff0c;我们经常会见到二级菜单&#xff0c;例如以下这种 这个是wegame官网实现的二级菜单&#xff0c;但我在实现这种菜单时也遇到过以下这种情况&#xff1a; 很明显&#xff0c;在我刚打开二级菜单想要触碰时菜单就消失了&#xff0c;这是因为什么呢&#…
阅读更多...
HTML+CSS实现简单的二级菜单

HTML+CSS实现简单的二级菜单

HTMLCSS实现简单的二级菜单&#xff0c;效果如下&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title>二级菜单</title><style>body,ul,li,a,img{margin: 0;padding: 0;}ul,li{list-style: none;}a{…
阅读更多...
gta5组装电脑配置推荐2021适合玩gta5游戏电脑清单

gta5组装电脑配置推荐2021适合玩gta5游戏电脑清单

CPU Intel 酷睿i5 10400F 主板 华硕TUF GAMING B460M-PLUS (WI-FI) 我用的gta5组装电脑配置怎么搭配更好用 这些点很重要看过你就懂了 http://www.adiannao.cn/du 内存 金士顿骇客神条FURY 8GB DDR4 2666 RGB 固态硬盘 西部数据Blue SN550 NVME SSD&#xff08;500GB&#xff…
阅读更多...
6v网站迅雷下载电影任务出错

6v网站迅雷下载电影任务出错

刚刚又试了下&#xff0c;第二步的复制链接其实可以直接在电影的超链接那右键&#xff0c;一样可以复制。 至于精简版下载100%可能出现的无法完成&#xff0c;在下载文件夹中找到对应电影&#xff0c;以mp4为后缀重命名即可 ------------------------------------------------…
阅读更多...
一款非常好用的下载工具-Free Download Manager-可代替迅雷使用的下载工具

一款非常好用的下载工具-Free Download Manager-可代替迅雷使用的下载工具

迅雷作为老牌的下载工具&#xff0c;应该都使用过&#xff0c;然而当前的迅雷在越来越大的基础上&#xff0c;新增了很多非下载的功能&#xff0c;为了追求纯粹的下载体验的用户来说&#xff0c;未免有些冗余。而Free Download Manager作为免费的下载软件&#xff0c;可以替代迅…
阅读更多...
迅雷（pc）

迅雷（pc）

今天给大家带来的是迅雷VIP尊享版&#xff0c;该版本的主要优势在于可以右边栏默认关闭状态&#xff0c;启动时不会先显示后隐藏&#xff0c;去除全部广告和无用组件让我们时时刻刻都享受VIP的服务。这是一款大神破解的迅雷软件&#xff0c;直接下载安装软件&#xff0c;支持手…
阅读更多...
比较普遍的C语言游戏

比较普遍的C语言游戏

我不怎么会教人写什么东西&#xff0c;我就写了几个C语言的游戏&#xff0c;可以自学&#xff0c;首先要下载VC&#xff0c;百度搜索VC找到官网下载&#xff0c;其他网站是捆绑&#xff0c;好&#xff0c;现在写代码了。 先教大家如何用VC打开C语言编写窗口 将VC下载完成点开之…
阅读更多...
C语言实现入门级小游戏——三子棋

C语言实现入门级小游戏——三子棋

今天博主将为大家带来C语言入门级小游戏——三子棋&#xff08;井字棋&#xff09;的详细介绍&#xff0c;希望这篇文章对大家能有帮助 。 在编程的学习过程中&#xff0c;编写一些中这样的小游戏&#xff0c;是非常有乐趣的事情&#xff0c;完成之后会非常非常有成就感&…
阅读更多...
【C语言小游戏】猜数字游戏

【C语言小游戏】猜数字游戏

hello&#xff0c;csdn的小伙伴呢&#xff0c;在前面&#xff0c;我们已经初步了解了c语言&#xff0c;并且系统的学习了分支与循环的内容。今天我们就将分支与循环的内容综合应用一下&#xff0c;来做一个很简单猜数字小游戏。 目录 程序的需求以及最终代码展示 一、实现打印…
阅读更多...
推荐文章

Copyright @ 2022~2023