精华内容
下载资源
问答
  • JS二级横向下拉菜单

    2010-12-10 09:50:30
    基于Jquery的二级菜单,兼容性很不错的说
  • js鼠标滑过显示横向二级导航菜单代码
  • 横向多级的下拉菜单

    2018-12-27 11:31:41
    使用CSS写的下拉菜单,鼠标移动上去显示其子菜单。中间有透明间隔
  • 二级下拉菜单布局(纵向、横向

    万次阅读 多人点赞 2018-04-27 20:29:13
    级菜单在ul列表内建立li元素并清除默认样式让所有li元素左浮动并清除浮动DOM中文档结构如下:<ul class="clearfix"> <li><a href="#">1</...
    • 一级菜单
    1. 在ul列表内建立li元素并清除默认样式
    2. 让所有li元素左浮动并清除浮动
    DOM中文档结构如下:
    <ul class="clearfix">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>

    CSS中的样式如下:

    .ul1{
    	width:510px;
    	margin:0 auto;
    }
    .ul1 li{
    	list-style:none;
    	width:100px;
    	line-height:45px;
    	font-size:25px;
    	text-align:center;
    	border:1px #000 solid;
    	float:left;
    	background:#00F;
    }
    .ul1 a{
    	color:#FFF;
    	text-decoration:none;
    }

    效果图如下:


    • 二级下拉菜单(纵向)
    1. 在一级ul列表内建立一级li元素并清除默认样式
    2. 让所有一级li元素左浮动并清除浮动
    3. 在一级li内创建二级ul列表,二级ul列表内建立二级li元素并清除默认样式
    4. 设置二级ul列表属性display:none;让此元素不会被显示
    5. 在JS内动态设置一级li元素被点击时,让其下的二级ul列表属性切换为display:block;让此元素显示

    DOM中文档结构如下:

    <ul class="ul1 clearfix">
        <li><a href="#">一</a>
            <ul class="clearfix">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>	
        </li>
        <li><a href="#">二</a>
        	<ul class="clearfix">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </li>
        <li><a href="#">三</a>
        	<ul class="clearfix">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </li>
        <li><a href="#">四</a>
        	<ul class="clearfix">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </li>
        <li><a href="#">五</a>
        	<ul class="clearfix">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </li>
    </ul>

    CSS中的样式如下:

    ul,li,a{
    	margin:0;
    	padding:0;
    }
    .ul1{
    	width:510px;
    	margin:0 auto;
    }
    .ul1 li{
    	list-style:none;
    	width:100px;
    	line-height:45px;
    	font-size:25px;
    	text-align:center;
    	border:1px #000 solid;
    	float:left;
    	background:#00F;
    }
    .ul1 a{
    	color:#FFF;
    	text-decoration:none;
    }
    .ul1 ul{
    	display:none;
    }
    .ul1 ul li{
    	list-style:none;
    	width:100px;
    	line-height:30px;
    	text-align:center;
    	border:1px #000 solid;
    	background:#0FF;
    }

    清除浮动样式:

    .clearfix:before,.clearfix:after{
    	display:table;
    	content:"";
    }
    .clearfix:after{
    	clear:both;/*在所有元素的父元素上加伪类*/
    }
    .clearfix{
    	*zoom:1;
    }

    JS中的样式如下:

    var oUl1 = document.getElementsByTagName("ul")[0];
    var aLi1 = oUl1.children;
    var aUl2 = oUl1.getElementsByTagName("ul");
    for(var i=0;i<aLi1.length;i++){
    	aLi1[i].onclick = function(){
    		this.getElementsByTagName("ul")[0].style.display = "block";
    		this.style.backgroundColor = "red";
    	}
    }
    for(var i=0;i<aUl2.length;i++){
    	var aLi2 = aUl2[i].getElementsByTagName("li");
    	for(var j=0;j<aLi2.length;j++){
    		aLi2[j].onmouseover = function(){
    			this.getElementsByTagName("a")[0].style.color = "red";
    		}
    		aLi2[j].onmouseout = function(){
    			this.getElementsByTagName("a")[0].style.color = "white";
    		}
    	}
    }

    效果图如下:


    • 二级下拉菜单(横向)
    1. 纵向的设计步骤基础上给二级li元素添加左浮动并清除浮动。

    在CSS的样式中添加:

    .ul1 ul{
    	width:510px;
    }
    .ul1 ul li{
    	float:left;
    }

    效果图如下:



    展开全文
  • JavaScript实现下拉二级菜单详解

    千次阅读 2020-02-13 20:04:25
    下拉菜单最终效果如图: 实现原理,通过绝对定位的方式,使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果 初始时可以改变 1.display:none;使其隐藏 2.height:0px;改变高度使其隐藏 –>加上下面...

    下拉菜单最终效果如图:

    在这里插入图片描述

    实现原理,通过绝对定位的方式,使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果
    初始时可以改变
    1.display:none;使其隐藏
    2.height:0px;改变高度使其隐藏
    –>加上下面代码可以实现菜单的上升下拉逐渐出现动画效果

    transition: height 2s ease;
    

    3.opacity:0;改变透明度使其隐藏
    –>加上下面代码可以实现菜单的渐隐渐显动画效果

     transition: opacity 2s ease;
    

    等等。。。

    以下步骤可以实现二级菜单上升下拉逐渐出现的动画效果,上面其他两种方式可自行尝试

    第一步 写html文档,构建页面的骨架。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入css -->
        <link rel="stylesheet" href="index.css">
        <!-- 引入js -->
        <script src="index.js" defer></script>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">中心简介</a></li>
                <li><a href="#">工作动态</a></li>
                <li>
                    <a href="#">规章制度</a>
                   <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">中心简介</a></li>
                        <li><a href="#">工作动态</a></li>
                   </ul>
                </li>
                <li><a href="#">实验平台</a></li>
                <li>
                    <a href="#">教学成果</a>
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">中心简介</a></li>
                        <li><a href="#">工作动态</a></li>
                   </ul>
                </li>
                <li><a href="#">课程建设</a></li>
                <li><a href="#">资源管理</a></li>
                <li><a href="#">文案探讨</a></li>
            </ul>
        </div>
    </body>
    </html>
    

    运行结果如图:(引入JavaScript时加入defer,使其在html文档加载完成后,在加载js代码,因为代码自上而下执行,避免先加载js,在js中获取不到html元素的信息)
    在这里插入图片描述

    第二步 写css样式,文件名(index.css)css来控制样式,使html变成大漂亮

    代码主要实现:
    1、清除li标签点的样式
    2、横向布局,具体效果自定
    3、使二级菜单绝对定位,相对于其父级元素
    4、隐藏二级菜单,通过在文章开始说的三种基本方式。(以下是高度改变)
    css代码:

    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .nav{
        width: 80%;
        margin: 0 auto;
        background-color: red;
    }
    .nav>ul{
        display: flex;
        justify-content: space-between;
    }
    .nav>ul>li{
        width: 10%;
        text-align: center;
        position: relative;
    }
    .nav ul li{
        height: 43px;
        box-sizing: border-box;
    }
    .nav ul li a{
        text-decoration:none;
        color: aliceblue;
        /* 所有的a继承父级的宽度 */
        display: block;
        padding: 10px 0;
    }
    .nav ul li a:hover{
        background-color: aqua;
        border-bottom: 4px solid blueviolet;
    }
    .nav>ul>li>ul{
       /* 动画效果,当高度改变时,使其2s渐变 */
        transition: height 2s ease; 
        background-color: red;
        width: 100%;
        height: 0;
        overflow: hidden;
        position: absolute;
        top:40px;
    }
    

    运行结果:可以看的非常漂亮(大红色)十分显眼
    在这里插入图片描述
    上述css中最关键的是:给二级菜单绝对定位,给他父级相对定位,并且height: 0;overflow: hidden;使其初始的时候隐藏(overflow必须加)

    .nav>ul>li{
        position: relative;
    }
    .nav>ul>li>ul{
        height: 0;
        overflow: hidden;
        position: absolute;
        top:40px;
    }
    

    如果只使用css来完成下拉菜单,可以通过加hover的形式,使其要变的二级菜单,通过hover的形式,改变height: 132px;的形式也可以

    第三步写JavaScript文件(index.js),是上面下拉菜单有动态效果

    代码主要实现:
    1、在js里获取到一级菜单
    2、写一个for循环,给每个一级菜单加上移入移出动作
    3、判断当前移入的目标,改变高度显示二级菜单,移出时,高度重新为0,使其消失
    代码如下:

    var firstLi = document.querySelectorAll(".nav>ul>li");
    // 通过循环给每个一级li标签都绑定鼠标移入事件
    for(var i=0;i<firstLi.length;i++){
        firstLi[i].onmouseover=function(){
            if(this.querySelector("ul")){
                // firstLi[i]已经不是当前的了,this是当前的
                var secUL=this.querySelector("ul");
                // 获得当前二级菜单中的li标签个数
                var liLength=secUL.querySelectorAll('li').length;
                secUL.style.height=44*liLength+'px';
            }
        }
    
        firstLi[i].onmouseout=function(){
            if(this.querySelector("ul")){
                // firstLi[i]已经不是当前的了,this是当前的
                var secUL=this.querySelector("ul");
                secUL.style.height='0px';
            }
        }
    }
    

    根据二级菜单个数,来改变高度,增加代码健壮性,想加多个二级菜单时,不需要在修改js

    最开始其他两种方式也可以通过这种形式实现:只需要修改一点点代码,就可以

    笔者审美太低,样式太丑可以自行修改。

    展开全文
  • 首先给大家展示下效果图: 查看效果 源码下载 html代码部分: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...<...
  • 横向二级下拉菜单

    千次阅读 2017-02-23 15:16:26
    横向二级下拉菜单 *{ margin:0; padding:0; } body { font-size:15px; } a { display: block; color:#666;
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>横向二级下拉菜单</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body {
                font-size:15px;
            }
            a {
                display: block;
                color:#666;
                width: 80px;
                text-align:center;
                text-decoration:none;
            }
            a:hover  {
                color:#FFF;
                background:#C00;
            }
    
            /*主菜单列表样式*/
            #nav{
                line-height: 24px;/*文字的行高*/
                list-style: none;/*隐藏默认的列表符号*/
                background: #666;
                margin-left: 100px;
            }
            /*一级菜单列表样式*/
            #nav li{
                float: left;/*列表项向左浮动*/
                width: 80px;
                background: #ccc;
            }
            /*二级菜单列表样式*/
            #nav li ul{
                line-height: 24px;
                position: absolute;
                left: -1000px;/*将left坐标设置为负值,起到隐藏二级菜单项的作用*/
                list-style: none;
                text-align:left;
                width: 180px;
            }
            /*二级菜单项样式*/
            #nav li ul li{
                background: #F6F6F6;
            }
            /*二级菜单项中的超链接*/
            #nav li ul a{
                width: 180px;
                text-align: left;
                padding-left: 20px;
            }
            /*鼠标移动到一级菜单后应用的样式*/
            #nav li.mouseover ul {
                left: auto;/*取消left属性默认的-1000px的设置,显示二级菜单项*/
            }
            h1{
                margin-left: 200px;
            }
            ol{
                clear:both;          /*取消浮动*/
                margin-left: 115px;
                margin-top:150px;
            }
        </style>
        <script type="text/javascript" language="JavaScript">
            function makeMenu(){
                var items=document.getElementById("nav").getElementsByTagName("li");
                for(var i=0;i<items.length;i++){
                    items[i].οnmοuseοver=function(){
                        this.className="mouseover";
                    }
                    items[i].οnmοuseοut=function(){
                        this.className="";
                    }
                }
            }
        </script>
    </head>
    
    <body οnlοad="makeMenu()">
        <h1>横向二级下拉菜单</h1>
        <ul id="nav">
            <li><a href="菜单页面地址" >菜单项A</a>
                <ul>
                    <li><a href="菜单页面地址">菜单项A1 </a></li>
                    <li><a href="菜单页面地址">菜单项A2 </a></li>
                    <li><a href="菜单页面地址">菜单项A3 </a></li>
                    <li><a href="菜单页面地址">菜单项A4 </a></li>
                </ul>
            </li>
            <li><a href="菜单页面地址" >菜单项B</a>
                <ul>
                    <li><a href="菜单页面地址">菜单项B1 </a></li>
                    <li><a href="菜单页面地址">菜单项B2 </a></li>
                    <li><a href="菜单页面地址">菜单项B3 </a></li>
                    <li><a href="菜单页面地址">菜单项B4 </a></li>
                </ul>
            </li>
            <li><a href="菜单页面地址" >菜单项C</a>
                <ul>
                    <li><a href="菜单页面地址">菜单项C1 </a></li>
                    <li><a href="菜单页面地址">菜单项C2 </a></li>
                    <li><a href="菜单页面地址">菜单项C3 </a></li>
                    <li><a href="菜单页面地址">菜单项C4 </a></li>
                </ul>
            </li>
            <li><a href="菜单页面地址" >菜单项A</a>
                <ul>
                    <li><a href="菜单页面地址">菜单项A1 </a></li>
                    <li><a href="菜单页面地址">菜单项A2 </a></li>
    
                </ul>
            </li>
        </ul>
        <ol>
            <li>本菜单采用无序列表设计,可以支持二级横向下拉菜单。</li>
            <li>初始状态下,二级菜单通过将水平坐标设置为负值,进行隐藏</li>
            <li>当鼠标移动到对应的一级菜单上后,恢复二级菜单的水平坐标,显示菜单项。</li>
        </ol>
    </body>
    </html>

    展开全文
  • 渐变显示的二级横向下拉菜单
  • 上一篇博文提到了二级下拉菜单是用HTML和CSS实现的,我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏。使用 JavaScript方法实现我们需要用的知识有:  1)JS事件:onmouseover鼠标经过事件和onmouseout...

           上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的,我们这一篇来用JavaScript脚本实现下拉菜单的显

    示和隐藏。使用 JavaScript方法实现我们需要用的知识有:

            1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件。

            2)JS基础语法:使用function关键字定义函数。

            3)DOM编程:getElementsByTagName()方法。

            那么接下来就是我们制作的流程:

            1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏。

            2)编写显示子菜单showsub()函数:使用getElementsByTagName获取二级菜单项;通过style.display设置二级

    菜单显示。

           3)编写隐藏子菜单hidesub()函数:使用getElementsByTagName获取二级菜单项;通过style.display设置二级菜

    单隐藏。

           4)添加鼠标事件:给有二级菜单的一级菜单添加鼠标事件,并调用showsub()/hidesub()函数,实现鼠标经过一级菜

    单,二级菜单显示和隐藏。

           5)做浏览器兼容性检测,至少五个浏览器。IE7,8,9,火狐,谷歌,2345浏览器等。

           HTML代码:

    <span style="font-size:18px;"><!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>下拉菜单</title>
    <!--引入的外部CSS样式文件-->
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--引入的外部JS脚本文件-->
    <script type="text/javascript" src="script.js"></script>
    </head>
    
    <body>
    <div id="nav" class="nav">
         <ul>
    	          <li><a href="#">网站首页</a></li>
    		  <li οnmοuseοver="showsub(this)" οnmοuseοut="hidesub(this)"><a href="#">课程大厅</a>
    		      <ul>
    			      <li><a href="#">JavaScript</a></li>
    			      <li><a href="#">jQuery</a></li>
    			      <li><a href="#">Ajax</a></li>
    		      </ul>
    		  </li>
    		  <li οnmοuseοver="showsub(this)" οnmοuseοut="hidesub(this)"><a href="#">学习中心</a>
    		      <ul>
    			      <li><a href="#">视频学习</a></li>
    			      <li><a href="#">案例学习</a></li>
    			      <li><a href="#">交流平台</a></li>
    		      </ul>
    		  </li>
    		  <li><a href="#">经典案例</a></li>
    		  <li><a href="#">关于我们</a></li>
         </ul>
    </div>
    </body>
    </html>
    </span>
             外部CSS样式表style.css文件代码:

    <span style="font-size:18px;">/*CSS全局设置*/
    *{
       margin:0;
       padding:0;
    }
    .nav{
       background-color:#EEEEEE;
       height:40px;
       width:450px;
       margin:0 auto;
    }
    ul{
       list-style:none;
    }
    ul li{
       float:left;
       line-height:40px;
       text-align:center;
    }
    a{
        text-decoration:none;
    	color:#000000;
    	display:block;
    	width:90px;
    	height:40px;
    }
    a:hover{
        background-color:#666666;
    	color:#FFFFFF;
    }
    ul li ul li{
        float:none;
    	background-color:#EEEEEE;
    }
    ul li ul{
    	display:none;
    }
    /*为了兼容IE7设置的CSS样式,但是又必须写在a:hover前面*/
    ul li ul li a:link,ul li ul li a:visited{
        background-color:#EEEEEE;
    }
    ul li ul li a:hover{
        background-color:#009933;
    }
    </span>
            外部JS脚本script.js文件代码:

    <span style="font-size:18px;">function showsub(li){
    	var submenu=li.getElementsByTagName("ul")[0];
    	submenu.style.display="block";
    }
    function hidesub(li){
    	var submenu=li.getElementsByTagName("ul")[0];
    	submenu.style.display="none";
    }</span>

            效果展示:

           1初始化状态或鼠标离开显示为横向一级菜单:


           2鼠标滑过有二级下拉菜单的元素时显示下拉菜单:


           3显示的下拉菜单中的链接样式:



    展开全文
  • 主要介绍了JavaScript实现带箭头标识的多级下拉菜单效果,可实现横向与纵向箭头的形式标识选中菜单项位置的功能,涉及javascript针对页面元素位置的判定与样式动态操作技巧,需要的朋友可以参考下
  • 列表一 //给每个菜单栏设置鼠标移入移出事件 1 2 3 4 列表 11 22 33 44 列表三 55 66 77 88 列表四 88 433 222 124 使用鼠标移入移出事件,,,,,,,,,,,,,,, 原文:...
  • js实现二级菜单

    2021-06-09 03:42:22
    js实现鼠标滑过显示二级菜单JS代码如下 CSS代码如下 菜单部分代码如下 我那里写错了呢,不能鼠标滑过哪显示啥? 滑过 产品介绍 显示下面的子菜单? onmouseover是鼠标移动到某元素执行的鼠标事件。 onmousemove是...
  • 超酷黑灰色二级横向下拉导航菜单 css+js 具动画效果
  • 二级下拉式菜单在各大学校站点。电商类站点。新闻类站点等大型?站点非经常见,那么它的实现原理是什么...横向级菜单我们见到的非常多。例如以下图所看到的是:watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/fon...
  • 一级横向滑动,二级竖向下拉综合菜单,这个菜单一共是三级,前两级是滑动切换的方式,第三级主要是下拉菜单的形式,虽然简单的样式简约,但是实现他们其实是很复杂的,希望从事前端开发的朋友一同参考一下吧。...
  • 的,那么这篇就用jQuery来实现二级下拉菜单。  使用JQuery实现需要用到的知识有:  1)使用$(function(){...})获取到想要作用的HTML元素。  2)通过使用children()方法寻找子元素。  3)
  • 下拉二级菜单宽度占满文档显示区

    千次阅读 2019-03-06 21:54:02
    用原生JS实现的一个导航下拉菜单下拉菜单的宽度与浏览器视口的宽度一样(js+html+css) 这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽;一导航只有两项,当鼠标移到一导航上的...
  • 页面里一共包括了两款菜单,一款是标准的横向排列菜单,鼠标放在菜单项上时,菜单会向下滑出二级菜单,另一种是垂直排列的短菜单,当鼠标悬停于菜单时,包括的二级菜单会向右滑出来,你可根据你网站的要求,参考...
  • CSS3横向导航下拉菜单代码是一款红色样式风格的网站导航,鼠标经过的时候下拉显示二级菜单
  • 怎么用js设置啊 我想鼠标悬停出现二级菜单,然后去点击二级菜单里面的项,但是不知道怎么去设置这个操作,就是想鼠标离开二级菜单之后菜单才消失,
  • 织梦二级下拉菜单

    千次阅读 2018-10-08 16:58:58
    设置宽度强制换行,不然就是横向
  • 我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片。 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考。 1.仅使用html和css ...
  • 此时的二级菜单有绝对定位,所以三级菜单会以二级菜单为参照物,如果不设置宽度三级菜单会出现折行的现象,所以需要给三级菜单一个宽度303px实现横向,或101px实现二级横向,三级竖向. *{margin: 0; padding: 0;} a{ ...
  • JS实现鼠标悬停显示二级菜单简单代码 jQuery实现实现图片(效果图) 代码在最下面 实现图片(效果图) 代码在最下面 这是开始的一个标签---->鼠标移动到(div上弹出来下拉菜单) 就成功出现了 简单的代码如下(横向菜单...
  • html二级菜单导航栏成品

    千次阅读 2021-06-09 00:45:16
    html 高级二级导航菜单代码如下: #menu { width: 600px; font-family: Arial; font-size: 15px; } #menu ul { display: block; width: 100%; margin: 0; position: relative; } #menu ul li { list-style-type: ...
  • layui 加载二级菜单

    千次阅读 2018-11-22 13:23:13
    想要使用layui+template 展示后台管理的二级导航栏。 加载数据格式如下:{  "error": 0,  "desc": "请求成功",  "data": [  {  "id": 1,  "...
  • <li><a href="#">产品中心二级菜单1</a></li> <li><a href="#">产品中心二级菜单2</a></li> <li><a href="#">产品中心二级菜单3</a></li> <li><a href="#">产品中心二级菜单4</a></li> <li><a ...
  • Layui二级菜单优化

    千次阅读 2018-07-09 16:35:08
    刚开始学习layui框架,碰到一个缺陷是二级菜单每次点击都会收缩到原始状态。用 Request.Url.ToString();获取URL判断点击页面前哪些节点是展开的,添加class=\"layui-nav-item layui-nav-itemed\"&gt;...
  • CSS3宽屏滑动下拉菜单导航特效是一款鼠标经过导航栏目滑动下拉显示二级导航菜单代码。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,768
精华内容 1,107
关键字:

js二级菜单下拉横向