伸缩两级菜单

最新推荐文章于 2023-04-13 14:28:08 发布
最新推荐文章于 2023-04-13 14:28:08 发布
阅读量971 收藏 2
点赞数 1
分类专栏： # HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zww1984774346/article/details/52054411
版权

做界面有时需要使用到伸缩的两级菜单，下面有两种写伸缩菜单的方法。

第一种方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style type="text/css">
        #navigation>ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #navigation>ul>li{
            border-bottom: 1px solid #ed9f9f;
        }
        #navigation>ul>li>a{
            text-decoration: none;
            background-color: red;
            padding: 5px 5px 5px 0.5em;
            display: block;
            border-left: 12px solid #711515;
            border-right: 1px solid #711515;
        }
        #navigation>ul>li>a:link,#navigation>ul>li>a:visited {
            background-color: #c11136;
            color: #fff;
        }
        #navigation>ul>li>a:hover{
            background-color: #990020;
            color: #ffff00;
        }

        /*子菜单样式*/
        #navigation>ul>li>ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #navigation>ul>li>ul>li {
            border-top: 1px solid #ed9f9f;
        }

        #navigation>ul>li>ul>li>a{
            display: block;
            padding: 3px 3px 3px 0.5em;
            text-decoration: none;
            border-left: 28px solid #a71f1f;
            border-right: 1px solid #711515;
        }
        #navigation>ul>li>ul>li>a:link,#navigation>ul>li>ul>li>a:visited{
            background-color: #e85070;
            color: #fff;
        }
        #navigation>ul>li>ul>li>a:hover{
            background-color: #c2425d;
            color: #ffff00;
        }
        #navigation ul li ul.myHide{
            display: none;
        }
        #navigation ul li ul.mySHow{
            display: none;
        }
    </style>
</head>
<body>
<div id="navigation">
    <ul id="listUL">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a>
            <ul class="myHide">
                <li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
        <li><a href="#">Sports</a>
            <ul class="myHide">
                <li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>
        </li>
        <li><a href="#">Weather</a>
            <ul class="myHide">
                <li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</div>
<script>
    window.onload = function(){
        var ul = document.getElementById("listUL");
        var li = ul.childNodes;
        var oA;
        for(var i=0;i<li.length;i++){
            //是li且有ul标签
            if(li[i].tagName=="LI"&&li[i].getElementsByTagName("ul").length){
                oA = li[i].firstChild; //a标签
                oA.onclick = change;   //添加点击事件
            }
        }
    }

    function change(){
        var secondDiv = this.parentNode.getElementsByTagName("ul")[0];
        if(secondDiv.className == "myHide"){
            secondDiv.className = "myShow";
        }
        else
            secondDiv.className = "myHide";
    }
</script>
</body>
</html>

第二种方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style type="text/css">
        #navigation>ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #navigation>ul>li{
            border-bottom: 1px solid #ed9f9f;
        }
        #navigation>ul>li>a{
            text-decoration: none;
            background-color: red;
            padding: 5px 5px 5px 0.5em;
            display: block;
            border-left: 12px solid #711515;
            border-right: 1px solid #711515;
        }
        #navigation>ul>li>a:link,#navigation>ul>li>a:visited {
            background-color: #c11136;
            color: #fff;
        }
        #navigation>ul>li>a:hover{
            background-color: #990020;
            color: #ffff00;
        }

        /*子菜单样式*/
        #navigation>ul>li>ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #navigation>ul>li>ul>li {
            border-top: 1px solid #ed9f9f;
        }

        #navigation>ul>li>ul>li>a{
            display: block;
            padding: 3px 3px 3px 0.5em;
            text-decoration: none;
            border-left: 28px solid #a71f1f;
            border-right: 1px solid #711515;
        }
        #navigation>ul>li>ul>li>a:link,#navigation>ul>li>ul>li>a:visited{
            background-color: #e85070;
            color: #fff;
        }
        #navigation>ul>li>ul>li>a:hover{
            background-color: #c2425d;
            color: #ffff00;
        }
       .myHide{
            display: none;
        }
        /*.mySHow{*/
            /*display: none;*/
        /*}*/
    </style>
</head>
<body>
<div id="navigation">
    <ul id="listUL">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a>
            <ul>
                <li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
        <li><a href="#">Sports</a>
            <ul>
                <li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>
        </li>
        <li><a href="#">Weather</a>
            <ul>
                <li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
   $(function(){
       $("li").find("ul").prev().click(function(){
           $(this).next().toggle();
       });
       $("li:has(ul)").find("ul").hide();
   });
</script>
</body>
</html>

第二种方法需要引入jQuery

  • prev() 当前标签之前的标签
  • next() 当前标签之后的标签

效果图：
这里写图片描述

小溪彼岸
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 树形菜单组件_v2
07-20
微信小程序 树形菜单组件 v2 需属性传值 listData（树形菜单数据） listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <wxTreeList listData="{{listData}}"></wxTreeList>
微信小程序 实现 树形菜单其实很简单
weixin_44646763的博客
01-30 6005
微信小程序 实现 树形菜单功能
小程序二叉树级菜单选择组件
Mo_jon的博客
04-13 566
小程序二叉树级菜单组件
uniapp微信小程序如何创建树形组件
m0_61049323的博客
01-10 2915
创建级联选择器组件或者树形组件
微信小程序树结构选择组件（优化源码）
weixin_49875932的博客
02-15 2586
微信小程序树结构选择组件
是实现伸缩的两级菜单
12-29
是实现伸缩的两级菜单是实现伸缩的两级菜单是实现伸缩的两级菜单
js实现的可伸缩的级联菜单
04-21
用js实现了可伸缩的菜单,直接解压就可以运行.
纯javascript写的伸缩的两级菜单_加有CSS样式_鼠标点击的下拉菜单框架左边left_javascript
12-24
纯javascript写的伸缩的两级菜单，并加有CSS样式，当鼠标点击的下拉菜单时弹出二组菜单。
安卓源码包 Android GPS 开发 地图&导航&定位&指南等设计代码合集 (45个).zip
12-10
级联菜单，两级菜单自定义实现提供多种方式PopWindow，Fragment引用..rar 自动判断位置的弹出菜单.zip 菜单动画(类似QQ空间)Demo.zip 菜单类似QQ的设置面板的侧滑菜单布局.zip 调用GoogleMap源码，点击事件在注释...
微信小程序 树形菜单组件
01-30
微信小程序 树形菜单组件 存放路径：/components/treeList/treeList listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <block wx:for="{{listData}}" wx:key="index"><treeList listData="{{item}}" step="1" ></treeList></block>
用c#重画的右键菜单
eNet的专栏
11-14 1875
环境vs2008,.net framework2.0 最终结果 下面是右键菜单所重写的后的类： namespace ContextMenuIcon{    ///     /// 重新绘制右键菜单    ///         public class ContextMenuEx:System.Windows.Forms.MenuItem    {        ///    
微信小程序树状菜单
盛典
03-22 1537
数据结构(可修改wxml结构显示) data: { id: "29998aace7bcc40e0597f04fc1133407", name: "测试数据请打开", children: [ { id: "29998aace7bcc40e0597f04fc1133407", name: "总路长" }, { id: "29.
Contextmenustrip动态添加多级菜单
cdc8596的博客
12-26 2079
1.如果只是一级菜单就解决的话，使用控件Contextmenustrip，动态添加ToolStripMenuItem就可以了， 自己设置一下name/click/text的属性就可以了 2.如果是多级菜单呢，需要注意以下问题(代码部分是手敲的，大小写有点问题，想用的改一下就可以了) ToolStripMenuItem强制转换为ToolStripDropDownItem类型才能添加子项，其实你...
WindowsForm实现折叠菜单面板(续)子菜单折叠
chinaherolts2008的博客
01-06 489
在上一篇文章中，简单实现vb.net教程了一个折叠菜单的面板，在这篇中将介绍实现子菜单的折叠与展开，其实实现的思路和之前的介绍是一样的，也是通过改变Panel控件的尺寸实现。 首先，我们需要将上篇文c#教程章中构建的布局控件Panel替换成FlowLayoutPanel,因为Panel中的控件是层叠关系，而这是一个可以自动排列布局控件，当然也可以继续用Panel，但需要将每个元素Panel中的控件的Dock属性设置Top，这样在改变面板python基础教程中子元素的高度的时候，控件不会重叠，所以还是建议用F
c#窗体右键菜单栏contextMenuStrip
cfqq1989的博客
05-25 573
1窗体拖入控件 2主窗体属性contextMenuStrip设置
C#界面设计之菜单栏的使用
明镜止水的博客
04-21 9423
这里先给出界面效果图： 没有任何触发事件，所以主程序里没有增加代码，下面主要给出控件标注信息的代码：namespace MenuStrip { partial class Form1 { /// <summary> /// 必需的设计器变量。 /// </summary> private System.Compon
C#仿WINDOWS可折叠导航栏
风月流年
08-02 4463
C#实现折叠式 菜单源代码：using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.F
layui 带伸缩菜单
最新发布
07-28
layui 带伸缩菜单是指在使用 layui 前端框架的过程中，可以使用其提供的组件和功能来实现具有伸缩效果的菜单。 伸缩菜单通常用于网页的导航栏或侧边栏，可以根据用户的需求来展开或收起菜单项，从而提升网页的可用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值