html-网站菜单-点击菜单展开相应的导航栏，加减号可切换

已于 2023-11-20 14:07:07 修改
阅读量2.1k 收藏 10
点赞数 2
分类专栏： 网站开发 文章标签： html css css3
于 2023-11-17 15:19:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48596030/article/details/134463799
版权
本文详细描述了一个响应式网页中导航菜单的实现，包括点击显示/隐藏二级菜单，以及使用CSS和JavaScript创建的hover效果。代码展示了如何使用jQuery控制菜单的显示和隐藏，以及子菜单的滑动切换。
摘要由CSDN通过智能技术生成

一、效果图

1.点击显示菜单栏，点击x号关闭；
2.点击一级菜单，展开显示二级，并且加号变为减号；
3.点击其他一级导航，自动收起展开的导航。
在这里插入图片描述

请添加图片描述

二、代码实现

<!DOCTYPE html>
<html></
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小跳不会Coding
关注
专栏目录
订阅专栏
js实现侧边导航栏展开和折叠
遇见更好的自己
06-09 3万+
效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。 代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
HTML+CSS伸缩式导航栏
weixin_45727272的博客
07-25 1254
HTML+CSS伸缩式导航栏
【HTML】模拟二级菜单【附源代码】
Young_Pro的博客
08-25 1366
通过 Html 搭配 CSS 模拟二级菜单的实现
点击按钮，显示多条子菜单(html)
peichuangaoling的专栏
03-16 2230
单击按钮，显示多级下拉菜单                           .dropdown-submenu {             position: relative;         }         .dropdown-submenu > .dropdown-menu {             top: 0;             left:
html点击展开菜单,简单实现点击可展开、关闭的CSS竖向菜单
weixin_28824127的博客
05-30 1020
.menutitle{cursor:pointer;margin-bottom: 5px;background-color:#eeeeee;width:188px;padding:2px;text-align:center;font-weight:bold;}.submenu{margin-bottom: 0.5em;}if (document.getElementById){ ///docume...
html菜单栏
03-26
html菜单栏可以指定那个页面被选中
html点击展开菜单,简单实现js点击展开二级菜单功能
weixin_39624461的博客
05-30 2393
虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这里有...
HTML+CSS+JS 动态展开式菜单
宁夏前端工程师，马卫斌，wx：1457508895
07-10 172
实现了一个可展开菜单按钮的效果，点击按钮会弹出一个菜单列表，菜单列表中包含多个选项。按钮的样式为一个圆形背景，中间有三条横线，表示可以展开。当按钮被点击后，三条横线会变成一个叉号，表示可以收起。菜单列表的样式为一个白色背景，四周有阴影，包含多个选项，每个选项都有一个图标和文字。当菜单展开时，选项会以渐变的方式出现。
纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）
lurenxie的博客
05-08 2万+
纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）搜索了很久，发现都没有纯html+css的点击式导航栏，要么是采用：hover的划过式导航栏，要么使用Javascript实现的点击式导航栏，遂着手研究了一下。这个导航栏是点击出二级导航，鼠标移走不缩回，直到点击别的一级导航栏，而且无法创建三级或以后级导航栏，而且点击别处也不缩回。暂且到此为止，有空再进一步强...
HTML实现点击展开和收起
热门推荐
07-04 6万+
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;} //===========================点击展开关闭效果==================================== function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenT
jQuery实现折叠、展开的菜单组效果代码
11-23
这个功能在网站设计中非常常见，特别是在后台管理系统或者网站导航中，它可以帮助用户更有效地浏览和组织大量的子菜单项。 首先，要实现这个效果，我们需要一个HTML结构来定义菜单的基本布局。在给出的代码片段中，...
js 特效 html 特效 点击展开的下拉菜单
06-14
js 特效 html 特效 点击展开的下拉菜单 js 特效 html 特效 点击展开的下拉菜单
html导航菜单栏
06-08
风格朴素漂亮的html模板 黑色的水平导航菜单 菜单项弹出显示
e语言-易语言导航栏
08-23
3. **导航栏设计**：导航栏通常包含多个按钮或菜单项，每个对应一个功能区域。在易语言中，我们需要定义这些按钮，并为它们绑定点击事件，实现功能切换。同时，导航栏的设计还需要考虑视觉效果，如背景色、字体样式...
微信小程序固定标签导航，点击标签滑动到相应内容，滚动内容切换相应标签
憨虫子的博客
06-21 9318
先来看一下效果图： 仿淘宝做的一个微信小商城的商品详情界面，点击顶部的宝贝、评论和详情标签时，页面滑动到相应的内容区域，同时滚动页面内容时，自动切换相应的导航标签。当然，这也适应于其他场景。 先来看一下wxml代码，其中一些wxml代码省略，但这并不会影响效果的实现，所以省略也无妨。 <view class="topnav" hidden='{{hiddenTopNav}}'&g...
vue3之拆若依--记实现后台管理首页(左侧菜单栏、头部信息区域...)
小白小白从不日别的博客
06-05 625
在根目录下新建 vite 目录，在vite目录下新建plugins子目录，在plugins目录下新建以下四个文件。这里首先需要在 assets 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。: 虽然 Tailwind 提供了许多实用的 CSS 类，但为了确保这些类在所有浏览器中都能正确渲染，`：用于将 CSS 转换为 JavaScript 插件的工具，允许使用插件来处理 CSS 文件。在项目根目录下新建 tailwind.config.js 文件。
【HTML】可展开的顶层菜单栏
最新发布
weixin_51649465的博客
09-07 500
【代码】【Html】可展开的顶层菜单栏。
网站菜单CSS
weixin_33681778的博客
01-27 123
#site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0px solid #9e5ae2;transition-duration:0.6s;}#site-nav .down-menu>.current-menu-item>a{height:88px;line-height:88px;border-bottom...
html css点击展开列表,HTML之列表
weixin_32700139的博客
06-07 1383
列表有三种类型：有序列表：列表项使用数字来标记无序列表：列表项使用粗体圆点(典型的小黑圆圈)进行标记。自定义列表：自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。一、有序列表格式：第一个列表项第二个列表项第三个列表项运行结果：第一个列表项第二个列表项第三个列表项不同类型的有序列表：1.编号列表：第一列表项第二列表项第三列表项第四列表项第五十列表项第五十一列表...
Arthas-WPFUI：打造WPF界面与菜单栏美化
资源摘要信息: "Arthas-WPFUI-master_wpfui_wpf界面美化_support9hz_wpf菜单栏美化_Arthas-WPF" 知识点: 1. WPF UI: WPF (Windows Presentation Foundation) 是一种用于构建Windows客户端应用程序的UI框架，它是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值