WEB HTML 二级菜单 折叠展开菜单

已于 2022-03-17 15:42:32 修改
阅读量1w 收藏 99
点赞数 15
分类专栏： WEB毕设 文章标签： 前端 html web
于 2022-03-16 13:43:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45711481/article/details/123524337
版权

WEB HTML 二级菜单 折叠展开

WEB，HTML，二级菜单，折叠展开

一、效果图：

在这里插入图片描述

二、完整代码：

直接复制 浏览器打开即可。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>菜单</title>
        
        <!-- JS -->
        <script language="javascript">
            function init()
            {//先隐藏二级菜单
                document.getElementById("sub_menu_1").hidden=true;
                document.getElementById("sub_menu_2").hidden=true;
                document.getElementById("sub_menu_3").hidden=true;
                document.getElementById("sub_menu_4").hidden=true;
                document.getElementById("sub_menu_5").hidden=true;
            }
            function f(str)
            {//点击展开折叠效果
                var sub_menu = document.getElementById(str);
                var dis_v = sub_menu.style.display;
                
                if(dis_v == "block")
                    sub_menu.style.display = "none";
                else
                    sub_menu.style.display = "block";
            }
        </script>

        <!-- CSS -->
        <style type="text/css">
            body{
                background-color: #f2f2f3;
                text-align: center;
            }
            tr{
                text-align: center;
            }
            table{
                border-top:1px solid;
                border-bottom:1px solid;
                border-bottom-color: #c3daee;
                border-top-color: #c3daee;
            }
            .table{
                margin-left:40px;
                border-left:1px solid;
                border-right:1px solid;
                border-left-color: #c3daee;
                border-right-color: #c3daee;
            }

            /*一级标题*/
            .one{
                height: 30px;
                width: 135px;
                background-color: #e4e6e7;
                color: #ff8b1a;
                cursor: pointer;/*小手*/
            }

            /*二级标题*/
            .two tr{
                background-color: #f2f2f3;
                color: #000;
            }
            .two a{
                /*margin-left: 50px;*/
                /*float: right;*/
                text-decoration: none;
                color: #000;
            }
            .two td{
                height: 25px;
                width: 135px;
            }
        </style>

    </head>
    <body onload="init()">
            <table cellspacing="0" cellpadding="0" class="table">
                <tbody>
                	<tr onclick = "f('sub_menu_1')">
                        <td class="one">个人中心</td>
                    </tr>
                    <tr>
                        <td class="two">
                            <table id="sub_menu_1">
                                <tbody>
                                    <tr><td><a href="modify_password.html" target="main">修改密码</a></td></tr>
                                    <tr><td><a href="my_information.html" target="main">我的资料</a></td></tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>

                    <tr height="1px"></tr>
                    <tr onclick = "f('sub_menu_2')">
                        <td class="one">考试成绩</td>
                    </tr>
                    <tr>
                        <td class="two">
                            <table id="sub_menu_2" >
                                <tbody>
                                    <tr><td><a href="" target="main">大一学年</a></td></tr>
                                    <tr><td><a href="" target="main">大二学年</a></td></tr>
                                    <tr><td><a href="" target="main">大三学年</a></td></tr>
                                    <tr><td><a href="" target="main">大四学年</a></td></tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    
                    <tr height="1px"></tr>
                    <tr onclick = "f('sub_menu_3')">
                        <td class="one">平时成绩</td>
                    </tr>
                    <tr>
                        <td class="two">
                            <table id="sub_menu_3" >
                                <tbody>
                                    <tr><td><a href="" target="main">宿舍</a></td></tr>
                                    <tr><td><a href="" target="main">考勤</a></td></tr>
                                    <tr><td><a href="" target="main">作业</a></td></tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>

                    <tr height="1px"></tr>
                    <tr onclick = "f('sub_menu_4')">
                        <td class="one">奖项</td>
                    </tr>
                    <tr>
                        <td class="two">
                            <table id="sub_menu_4" >
                                <tbody>
                                    <tr><td><a href="" target="main">材料上传</a></td></tr>
                                    <tr><td><a href="" target="main">备注</a></td></tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>

                   <tr height="1px"></tr>
                    <tr onclick = "f('sub_menu_5')">
                        <td class="one">处分</td>
                    </tr>
                    <tr>
                        <td class="two">
                            <table id="sub_menu_5" >
                                <tbody>
                                    <tr><td><a href="" target="main">处分</a></td></tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>

                </tbody>
            </table>
    </body>
</html>

三、声明

文章属于原创，如需引用请@作者，并注明出处！
小西瓜吖
关注
  • 15
    点赞
  • 踩
  • 99
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
weixin_35906775的博客
06-07 1803
用javascript实现简单的下拉折叠菜单Gary_js实现简单的下拉折叠菜单*{margin:0px; padding:0px;}#div1 {width:200px; margin:0 auto; line-height:25px;}ul {list-style:none;}li {background:#ccc;margin-bottom:3px;}dl {background:#eee;...
html点击收缩展开菜单栏,jquery实现可点击伸缩与展开的菜单效果代码
weixin_35452206的博客
05-30 2316
本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码。分享给大家供大家参考。具体如下：这是一款jquery实现的点击伸缩与展开的菜单代码，操作方式大家都知道吧，点击一下展开二级菜单的内容，再次点击则合拢，很经典的折叠菜单。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...
html简单的折叠菜单
热门推荐
zhuxian2009的专栏
08-01 1万+
大道至简。html+css+一个简单的JavaScript函数，实现的折叠菜单。 功能： 1.鼠标放置在菜单选项，具有变化； 2.实现一级菜单，二级菜单； 3.一级菜单收起来时，前面是“+”，展开时，前面是“-”； 效果图： 直接贴贴贴代码： zhedie_menu.html <html> <head> <meta http-equiv="C...
Web前端最新Vue3+ElementPlus 根据路由 自动创建二级菜单，推荐程序员面试秘籍
最新发布
2401_84433570的博客
05-09 649
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
html通过jquery.js动态生成按钮元素组成折叠菜单
qq_53485256的博客
08-25 760
我这里的情况是不使用其他ui组件，自制侧边折叠菜单，菜单按钮需要通过数据库的菜单数据自动生成，这里我选择配合使用jquery.js来制作。
一个简单的折叠菜单实现
weixin_44177998的博客
07-29 1650
一个简单的折叠菜单实现1. html代码2. JS代码3. css代码 工作后的第一个博客,因为需求做了一个折叠菜单，但是网上找到的要么不符合需求（没法点击菜单将当前展开的菜单收回），要么过于复杂（我连JS类都不太懂），对我这样一个新手来说很吃力，所以就自己琢磨着写了这样一个简单的折叠菜单。 1. html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>
AXURE组件-web折叠菜单交互.rp
08-04
AXURE组件-web折叠菜单交互.rp
jQuery鼠标经过二级下拉菜单.zip
07-11
为了实现更流畅的过渡效果，可以使用`.fadeIn()`和`.fadeOut()`方法，使得二级菜单的出现和消失具有渐变的效果，增强用户体验。同时，还可以使用`.delay()`方法来控制动画的延迟时间，让交互显得更加自然。 此外，...
js 全兼容可高亮二级缓冲折叠菜单
12-08
通过改变CSS类，模拟CSS hover伪类的功能，同时处理折叠和展开二级菜单的缓冲动画。 **总结** 这个全兼容的二级缓冲折叠菜单设计，不仅考虑了多浏览器兼容性，还注重了代码的结构化和可维护性。通过合理地使用HTML...
phpweb二级树状菜单
12-19
在PHPWeb环境中，二级树状菜单指的是包含一级菜单和二级菜单的结构，通常表现为一个可折叠/展开的列表。 要实现这样的功能，我们通常会用到以下技术： 1. **HTML**：构建菜单的基础框架，包括`<ul>`和`<li>`元素来...
纯js+html菜单栏折叠，支持数据无限嵌套
12-19
数据格式支持数组形式 list = [ { id: 1, name: '测试', children: [ { id: 11, name: '测试1', children: [ { id: 112, name: 'cs1' } ] }, { id: 12, name: '测试2' } ] }]
Javascript、Css、Html下拉式折叠菜单
03-20
采用Javascript 、Css、Html脚本经典的折叠下拉式菜单。在此供大家参考，若有不足之处希望高手指点！
Js竖向折叠、展开的暖色调二级菜单
05-12
内容索引:脚本资源,CSS特效,菜单,折叠菜单,竖向　JavaScript+CSS完成的竖向可折叠、展开的暖色调菜单，用到网站后台管理还是不错的，兼容多种浏览器，效果也漂亮，它最多支持二级，它是在SDMENU的基础上扩展而来的，...
html导航折叠与展开,css+js实现的折叠展开的菜单
weixin_32009069的博客
05-30 988
css+js实现的折叠展开的菜单_网页代码站(www.webdm.cn).menutitle{cursor:pointer;margin-bottom: 5px;background-color:#ECECFF;color:#000000;width:140px;padding:2px;text-align:center;font-weight:bold;/*/*/border:1px solid...
JavaScript-实例-折叠菜单
深度安全实验室
12-05 668
JavaScript-实例-折叠菜单
HTML、CSS和jQuery：实现图片折叠展开的效果
忧郁的蛋的专栏
10-24 1584
通过这种特效，我们可以让图片在用户的操作下折叠或展开，从而展示更多的内容或细节。上面的示例代码展示了一种简单的实现思路和具体的代码示例。在CSS中，我们为容器设置了默认的宽度、高度和背景颜色，并通过绝对定位将叠加在图片上方的覆盖层定位到底部。然后，通过设置.collapsed类的高度来实现折叠效果。要实现图片折叠展开特效，我们需要通过HTML构建页面结构，通过CSS设置样式，并利用jQuery实现交互效果。下面是一个简单的代码示例，演示了如何使用HTML、CSS和jQuery实现图片折叠展开特效。
html实现垂直折叠菜单,HTML6实现折叠菜单与手风琴菜单的实例代码
weixin_39713335的博客
05-30 804
页面主体部分：一级菜单1二级菜单1-1二级菜单1-2二级菜单1-3一级菜单2二级菜单2-1二级菜单2-2二级菜单2-3一级菜单3二级菜单3-1二级菜单3-2二级菜单3-3一级菜单4二级菜单4-1二级菜单4-2二级菜单4-3折叠菜单 例：css部分li{list-style:none; 去掉列表前面图形}li a{color:#123; 设置一级菜单文本颜色}#menu ul{display...
html多级折叠菜单表单,JS实战篇之收缩菜单表单布局
weixin_29363791的博客
06-03 807
获取节点的两种方式：1、通过event对象的srcElement属性；2、通过事件源对象用this传入。代码如下：收缩菜单 · 表单布局function list(dtNode){// var dtNode = event.srcElement;var dlNode = dtNode.parentNode;// alert(dtNode.nodeName+"---"+dlNode.nodeName...
js+html菜单栏折叠，支持数据无限嵌套
sikey的专栏
12-19 1345
&lt;style&gt; html { height: 100%; } body { width: 100%; height: 100%; margin: 0; padding: 0; } u...
axure三级菜单展开折叠
06-28
### 回答1： Axure是一款流行的原型设计工具，用来设计网站和应用程序。三级菜单展开折叠是Axure中常用的一种交互功能，它可以使用户更方便地浏览菜单和内容。具体实现方法如下： 1. 定义三级菜单的状态：默认状态下，只展示一、二级菜单；点击一级菜单后，展开二级菜单；再点击二级菜单，展开三级菜单。通过点击三级菜单，折叠二级和三级菜单，回到一级菜单状态。 2. 在Axure中，通过使用“面板”控件来模拟三级菜单的展开折叠。在面板上可以放置图标、文本、按钮等控件，用于呈现菜单内容。 3. 设计交互逻辑：通过“条件、动作”等交互设计功能，设置点击事件触发面板的展开和收起。例如，点击一级菜单时展开二级菜单，点击已展开的二级菜单时展开三级菜单，点击已展开的三级菜单时折叠三级和二级菜单，回到一级菜单状态。 4. 为了更好的用户体验，可以添加一些动画效果和颜色变化来提示用户当前菜单的状态，例如，点击一级菜单，区分已展开和未展开的二级菜单，已展开和未展开的三级菜单。 总之，Axure三级菜单展开折叠功能较为简单，需要设计师结合实际需求，灵活运用Axure中的交互设计工具来完成。 ### 回答2： Axure是一款流行的原型设计工具，可以使用其来设计和创建具有丰富交互性的原型应用。其中，三级菜单展开折叠是在进行界面设计中常见的一种交互操作。 在Axure中，实现三级菜单展开折叠的方法有多种。下面以一种简单易懂的方式来介绍。 首先，需要在Axure的页面上添加一个Dynamic Panel，即动态面板，作为菜单的容器。然后，将菜单项（例如“一级菜单”、“二级菜单”、“三级菜单”等）添加到控件库中。 接着，我们需要设置菜单项之间的关系。对于一级菜单，可以直接将其添加到动态面板中。对于二级菜单，需要将其作为一级菜单的子菜单，也就是在一级菜单下方添加一个Dynamic Panel，并将二级菜单项添加到这个面板中。对于三级菜单同样如此，将其作为二级菜单的子菜单。 接下来需要设置触发菜单折叠和展开的交互事件。这里采用点击事件来触发折叠和展开。对于一级菜单，设置点击事件来触发下方的二级菜单展开或折叠。对于二级菜单，设置点击事件触发其下方的三级菜单展开或折叠。 最后，需要设置菜单折叠和展开的交互动效。可以通过设置动画效果来使菜单的折叠和展开更具有视觉效果。 以上就是一个简单的Axure三级菜单展开折叠的实现方法。当然，还有其他方法可以实现此种交互效果，但无论哪一种方法，都是通过控件的层级关系，以及设置交互事件和动效来实现的。希望能对你在Axure中设计交互界面时有所帮助。 ### 回答3： Axure RP是一个专业的快速原型制作工具，在使用中，经常需要用到三级菜单来展示内容。而三级菜单的展开折叠功能是非常重要的，能够提高用户的交互体验。下面我将介绍如何使用Axure RP制作三级菜单的展开折叠功能。 首先，我们需要在页面上添加菜单栏和菜单项，设置好每个菜单项的页面链接或动作。 其次，我们需要在每个菜单项上添加事件，包括点击事件和鼠标悬停事件。 点击事件：通过点击菜单项，展开下一级菜单。对于下一级菜单，我们可以通过显示或隐藏组件的方式来实现。具体操作是：在Axure RP的交互面板中添加一个“显示/隐藏”事件，将其绑定到下一级菜单的组件上，根据需要选择“显示”或“隐藏”，并设置动画效果。 鼠标悬停事件：在鼠标悬停在菜单项上时，展示下一级菜单。对于下一级菜单的显示，我们可以通过改变组件的透明度或添加效果的方式来实现。具体操作是：在Axure RP的交互面板中添加一个“改变风格”事件，将其绑定到下一级菜单的组件上，选择“设置不透明度”或“添加效果”，并设置动画效果。 最后，我们需要设置每个菜单项和下一级菜单的交互条件，以便实现展开折叠功能。具体操作是：在Axure RP的条件面板中添加一个“变量”条件，将其绑定到菜单项或下一级菜单的组件上，根据需要设置变量的初始状态和变化条件，例如：当菜单项被点击时，变量的值从“0”变为“1”，下一级菜单的组件显示出来；当下一级菜单被点击或鼠标离开时，变量的值从“1”变为“0”，下一级菜单的组件隐藏起来。 通过以上步骤，我们就可以完成Axure RP中三级菜单的展开折叠功能的制作。这样的交互设计可以让用户更加方便地查看和操作内容，提高用户体验，为产品的成功发展打下坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小西瓜吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值