点击按钮，显示多条子菜单(html)

最新推荐文章于 2023-11-29 14:45:38 发布
最新推荐文章于 2023-11-29 14:45:38 发布
阅读量2.1k 收藏 8
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peichuangaoling/article/details/50903492
版权

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单击按钮，显示多级下拉菜单</title>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
 
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style type="text/css">
        .dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }
        .dropdown-submenu:hover > a:after {
            border-left-color: #fff;
        }
        .dropdown-submenu.pull-left {
            float: none;
        }
        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#"
               href="javascript:;">
               四季 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="javascript:;">春天</a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="javascript:;">树绿了</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu">
                            <a href="javascript:;">花开了</a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;">桃花</a></li>
                                <li><a href="javascript:;">杏花</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="javascript:;">夏天</a></li>
                <li><a href="javascript:;">秋天</a></li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="javascript:;">冬天</a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="javascript:;">下雪了</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu">
                            <a href="javascript:;">动物冬眠了</a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;">青蛙</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>


The_codinggirl
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 下拉框控制向下展开,js实现点击向下展开的下拉菜单效果代码
weixin_39791349的博客
05-31 873
本文实例讲述了js实现点击向下展开的下拉菜单效果代码。分享给大家供大家参考。具体如下：这里介绍js实现点击向下展开的下拉菜单特效代码，无调用jQuery，真正的JS下拉菜单，兼容性方面未做测试，觉得有用处的自己测试修正吧，本文仅提供基础的代码供参考。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...
html点击显示子菜单再点一次隐藏,2.3点击菜单显示div再点击就隐藏
weixin_32821043的博客
06-09 580
事件：on中比需抖接朋功要朋插click属性：di中比需抖接朋功要朋插splay利用if作一新求抖直微圈语句实现Examplescharset="UTF-8">///享器哈班其础件事是架考发求关通互面待需了///////////////是能览调不页新代些事几求事都时学下是事功过css#div1{display:none;width:100px;height:300px;background:...
HTML按钮的风格,7种Material Design风格打开菜单按钮特效
weixin_29912855的博客
07-03 379
这是一款效果非常炫酷的Material Design风格打开菜单按钮特效。该特效有7种不同的效果，每一种效果中都可以通过点击主菜单按钮来打开一组主菜单按钮，各种打开子菜单的动画效果各不相同。使用方法HTML结构这7种打开菜单按钮特效的基本HTML结构都非常相似：使用一个来作为包裹元素，里面使用一个div元素来作为按钮组包裹元素。然后在其里面放置一个button元素作为主菜单按钮，在用一个div包裹...
前端:实现二级菜单（点击实现二级菜单展开）
最新发布
weixin_46001736的博客
11-29 1134
前端:实现二级菜单（点击实现二级菜单展开）
点击显示二级下拉菜html,jQuery实现二级下拉菜单效果
weixin_42386511的博客
06-03 681
大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。使用JQuery实现需要用到的知识有：1)使用$(function(){...})获取到想要作用的HTML元素。2)通过使用children()方法寻找子元素。3)通过使用show()方法来显示HTML元素。4)通过使用hide()方法来隐...
flash导航条制作鼠标悬停显示二级菜单导航
11-24
可以通过复制和调整一级菜单按钮来快速创建这些子菜单。 3. **ActionScript编程**：使用ActionScript来控制导航条的行为。当鼠标悬停在一级菜单按钮上时，二级菜单应显示；当鼠标移开时，二级菜单消失。这需要用到...
左边栏菜单隐藏显示
05-31
在实际项目中，你可能还会遇到如何处理子菜单、动态加载菜单、以及如何根据用户权限显示或隐藏菜单等问题。这些问题可以通过结合HTML、CSS、JavaScript和服务器端逻辑来解决。 总结来说，“左边栏菜单隐藏显示”是...
菜单
02-13
这段代码会在鼠标悬停在导航项上时，以滑动效果显示或隐藏子菜单。 5. **访问键和无障碍性**： 对于无障碍性，菜单应包括访问键（access keys），允许键盘用户快速跳转到菜单项。这可以通过在`<a>`元素中设置`...
基于jquery实现的树形菜单效果代码
11-22
通过`.toggle()`或`.slideToggle()`方法控制子菜单的显示和隐藏，以及通过CSS实现视觉效果，我们可以创建出优雅且交互性强的树形菜单。这样的菜单不仅提高了用户体验，也使得网站的导航更加清晰易用。
Bootstrap页面滚动顶部多级导航菜单.zip
05-14
下拉菜单允许在一个菜单项下展示更多的子菜单，常用于呈现层次结构的信息。要创建一个多级导航菜单，我们需要在`<ul>`元素中嵌套`<li>`元素，并为需要下拉的`<li>`添加`.dropdown`类。然后，下拉菜单的内容放在一个`...
HTML实现菜单功能
一本书，一杯茶，一段愉悦时光
02-24 1021
无标题文档 #tabMenu a{ background-color:#ccc;//背景颜色灰色 text-decoration:none;//无下划线 width:200px; height:30px; text-align:center;//文字左右居中 line-height:30px;//文字上下居中 border:1px solid white;//边框 color:b
HTML中水平二级菜单和垂直二级菜单的设计
你们瞎搞
03-22 4518
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style> * { margin: 0; padding: 0; } div{ /*知道了盒子宽度垂直居中*/ ...
css+html+js实现下拉及多级弹出菜单
wj903829182的专栏
08-23 7134
本文将使用css+html+js实现横向菜单，具有下拉的多级弹出菜单。 首先我们来看看效果图： 首先应该写html部分的代码，代码比较简单，代码如下： 首页 网页版式 自适应宽度 固定宽度
❤️创意网页：如何用HTML制作菜单栏？制作好看的菜单栏样式网页
VLOKL的博客
07-16 4457
❤️创意网页：如何用HTML制作菜单栏？制作好看的菜单栏样式网页
html-网站菜单-点击菜单展开相应的导航栏，加减号可切换
weixin_48596030的博客
11-17 1929
一、效果图 1.点击显示菜单栏，点击x号关闭； 2.点击一级菜单，展开显示二级，并且加号变为减号； 3.点击其他一级导航，自动收起展开的导航。 二、代码实现 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content=
HTML抽屉效果的实现与展示
qq_15167261的博客
10-30 2403
林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka        摘要：本文主要讲了HTML抽屉效果的实现与展示，最后还用bootstrap做了一个简单的实例。 一、基本原理 jQuery 隐藏方法 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来
html实现好看的多种风格导航菜单(附源码)
热门推荐
xcLeigh
06-29 4万+
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。
制作伸缩两级菜单（HTML,CSS,JavaScript）
weixin_43230812的博客
03-09 1950
制作伸缩两级菜单（HTML,CSS,JavaScript）
html左边多级菜单导航栏,精美的多级侧边栏导航菜单jQuery插件
weixin_39725594的博客
06-07 2112
这是一款基于bootstrap的精美多级侧边栏导航菜单jQuery插件。该导航菜单在bootstrap样式的基础上，通过jQuery来为导航菜单绑定菜单点击事件，生成非常漂亮的多级侧边栏导航菜单。使用方法在页面中引入bootstrap样式文件，sidebar-menu.css和sidebar-menu.js文件，另外还有引入font-awesome字体图标文件。HTML结构在该多级侧边栏导航菜单中...
html+css页面左侧菜单栏点击按钮显示隐藏
05-26
你可以使用 JavaScript 来实现左侧菜单栏点击按钮显示和隐藏。具体的实现步骤如下： 1. 首先，你需要在 HTML 中创建一个按钮和一个菜单栏。例如： ```html 菜单 菜单项1 菜单项2 菜单项3 ``` 2. 接下来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值