精华内容
下载资源
问答
  • 求大神帮忙,要相对窗口固定,html+css的一条一级菜单栏中嵌入一个三级菜单
  •  设置一级菜单:hover效果显示二级菜单时,当鼠标从一级菜单移入二级菜单时,一级菜单因失去鼠标而导致二级菜单消失  根据一二级菜单DOM关系提出不同思路:  一级菜单包裹二级菜单   一级菜单 二级菜单

     在写分级菜单时遇到问题:

         设置一级菜单:hover效果显示二级菜单时,当鼠标从一级菜单移入二级菜单时,一级菜单因失去鼠标而导致二级菜单消失

          根据一二级菜单DOM关系提出不同思路:

                  一级菜单包裹二级菜单

                     

    <a>
           一级菜单
            <ul>
                    <li>二级菜单</li>  
            </ul>
    </a>
              此种情况可直接使用css:hover选择器效果即可

                一二级菜单为兄弟关系            

               

    <a class="sctnav_list_Details"  href="javascript:">
                               一级菜单
     </a>
    
    <div class=" carousel_Details">
         <ul class=" carousel_left_Details">   
                <li>二级菜单</li>
          </ul>
    </div>

    思路:使用padding内边距属性,使一级菜单的内边距可以到达二级菜单的范围,同时设置如下css属性:

          注:如果出现移出一级菜单时二级菜单消失,多是一级菜单与二级菜单之间存在间隙(包括两者边框)

     .sctnav_list_Details:hover ~ .carousel_Details,
     .sctnav_list_Details ~ .carousel_Details:hover {
        display: block;
    }

     两者DOM不存在关系时:

       思路:

             1)使用定时器,在移出一级菜单时创建定时器事件,延迟隐去二级菜单

                 在二级菜单中建立移入移出事件:hover(),移入时清除上一步骤的定时器,移出时清除定时器并隐去二级菜单,注:此处不适合建立单纯mouseover()事件,会导致直接从二级菜单移出而二级菜单不消失问题

             2)使用鼠标定位,在移出一级菜单时判断鼠标是否进入二级菜单的范围

                          获取二级菜单DOM的坐标:

    $("section .nav_float").offset().top ; /*获取当前元素距离document文档顶部距离*/
                          获取鼠标坐标
    console.log(e.pageY);/*以当前文档为坐标定位Y轴距离*/
    console.log(e.clientY);/*以当前页面窗口为坐标定位Y轴距离,不受滚动条影响*/
    此处需注意采用的定位坐标是相对与文档还是可视窗口,鼠标定位与DOM定位选择需一致
    另外还有定位坐标方法的浏览器兼容问题





    展开全文
  • 实现一级菜单二级菜单:

    实现一级菜单:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>menu1.html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
    
    <style type="text/css">
    
    body{
      font-family: "宋体";
      font-size: 12px;
      line-height: 1.5;
    }
    
    a{
      color:#000;
    }
    
    a:HOVER{
      color:#F00;
    }
    
    .menu{
      width:100px;
      border:1px solid #CCC;
      /* border:1px solid red; */
      background-color: silver;
    }
    
    
    .menu ul{
    margin:0px;
    padding:0px;
    background-color: pink;
    
    }
    
    .menu li{
    list-style-type: none;
    background-color: #eee;
    padding:0px 8px;
    height:26px;
    line-height: 26px;
    border-bottom:1px solid #CCC;
    
    }
    </style>
    
      </head>
      
      <body>
        <div class="menu">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">网页版布局</a></li>
            <li><a href="#">div+css教程</a></li>
            <li><a href="#">div+css实例</a></li>
            <li><a href="#">常用代码</a></li>
            <li><a href="#">站长杂谈</a></li>
            <li><a href="#">技术文档</a></li>
            <li><a href="#">资源下载</a></li>
            <li><a href="#">图片素材</a></li>
          </ul>
        </div>
        
        
      </body>
    </html>
    




    显示效果:



    二级菜单的实现:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>menu1.html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
    
    <script type="text/javascript">
      var startList = function() {
          if (document.all&&document.getElementById) {
             navRoot = document.getElementById("menu");/* 得到id */
             var allli = navRoot.getElementsByTagName("li");/*得到li所有的元素  */
             for (var i=0; i<allli.length; i++) {
                    var node = allli[i];
                    node.οnmοuseοver=function() {/*注册函数  */
                    this.className+=" current";
                    };
                    node.οnmοuseοut=function() {/*注册函数  */
                    this.className=this.className.replace(" current", "");
                    };
    }
    }
    
    };
    window.οnlοad=startList;/* 加载完毕,执行 */
    </script>
    
    
    <style type="text/css">
    
    body{
      font-family: "宋体";
      font-size: 15px;/* 字体的大小 */
      line-height: 1.5;/* line-height 属性设置行间的距离(行高)。 */
    }
    
    
    
    a{
      color:#f0f;/*正常的a标签的字体元素  */
      text-decoration: none;/* 取消下划线 */
    }
    
    /*鼠标悬浮时,字体的颜色  */
    a:HOVER{
      color:#F00;
    }
    
    /* id为menu的菜单 */
    #menu{
      width:200px;/*设置宽度  */
      /* border:1px solid #CCC; */
      border:2px solid blue;/* 设置边框 */
      /* background-color: silver; */
      background-color: red; /*背景颜色为红色  */
      border-bottom: none;/*下边框的宽度  */
    }
    
    
    #menu ul{
    margin:0px;/*ul的外边距  */
    padding:0px;/*ul的内边距  */
    width:120px;/* 块元素的宽度 */
    background-color: pink;/*设置背景颜色  */
    
    }
    
    #menu ul li{
      list-style-type: none;
      background-color: #eee;
      /* background-color: red; */
      width:90px;
      padding:0px 8px;
      height:26px;
      line-height: 26px;
      border-bottom:1px solid #CCC;
      /* border-bottom:1px solid red; */
      position:relative;
    
    }
    
    
    #menu ul li ul{
       position:absolute;/*绝对定位  */
       left:100px;/* 向右移动100px */
       top:0px;/* 向下移动0px */
       display:none;/*默认不显示  */
       width:100px;/*宽度  */
       border:1px solid #CCC;/* 边框 */
       border-bottom: none;
    }
    
    
    
    #menu ul li.current ul{
      display:block;/*以块元素显示  */
    }
    
    #menu ul li:hover ul{
    	display:block;/*以块元素显示  */
    }
    
    
    
    </style>
    
      </head>
      
      <body>
        <div id="menu">
          <ul>
            <li><a href="@#">首页</a></li>
            <li><a href="#">网页版布局</a>
           <ul>
             <li><a href="#">自适用宽度</a></li>
             <li><a href="#">固定宽度</a></li>
           </ul>
           </li>
           
            <li><a href="#">div+css教程</a>
            <ul>
             <li><a href="#">新手入门教程</a></li>
             <li><a href="#">视频教程</a></li>
             <li><a href="#">常见问题</a></li>
            </ul>
            </li>
            
            <li><a href="#">div+css实例</a></li>
            <li><a href="#">常用代码</a></li>
            <li><a href="#">站长杂谈</a></li>
            <li><a href="#">技术文档</a></li>
            <li><a href="#">资源下载</a></li>
            <li><a href="#">图片素材</a></li>
          </ul>
        </div>
        
        
      </body>
    </html>
    


    显示效果如下:




    代码里面都有注释,就不做过多的解释了。

    http://blog.csdn.net/j903829182/article/details/38735639






















































































    展开全文
  • 就是简简单单的一个小功能,鼠标移入侧边栏的一级菜单后,相对应的二级菜单显示。

    就是简简单单的一个小功能,鼠标移入侧边栏的一级菜单后,相对应的二级菜单显示。
    效果大概如图:
    当鼠标移动到“购物”时,显示右侧“详情3”

    CSS:

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width: 150px;
            position: relative;
            margin: 10px 0 0 10px;
            background-color: #c0c0c0;
        }
        .wrapper {
            list-style: none;
            margin-left: 5px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            position: relative;
        }
        .wrapper_a {
            text-decoration: none;
            color: #000000;
        }
        .wrap ul li a {
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .wrap ul li a:hover {
            color: #ffffff;
        }
        .details_wrap {
            width: 100px;
            height: 40px;
            line-height: 40px;
            background-color: #666666;
            position: absolute;
            left: 100%;
            top: 0;
            padding-left: 5px;
            list-style: none;
            display: none;
        }
        .details_wrap a {
            text-decoration: none;
            color: darkgrey;
        }
        .details_wrap a:hover {
            color: dimgray;
        }
    </style>

    HTML:

    <div class="wrap">
        <ul>
            <li class="wrapper">
                <a href="#" class="wrapper_a">居家</a>
                <ul>
                    <li class="details_wrap"><a href="#" class="details">详情1</a></li>
                </ul>
            </li>
            <li class="wrapper">
                <a href="#" class="wrapper_a">生活</a>
                <ul>
                    <li class="details_wrap"><a href="#" class="details">详情2</a></li>
                </ul>
            </li>
            <li class="wrapper">
                <a href="#" class="wrapper_a">购物</a>
                <ul>
                    <li class="details_wrap"><a href="#" class="details">详情3</a></li>
                </ul>
            </li>
            <li class="wrapper">
                <a href="#" class="wrapper_a">科普</a>
                <ul>
                    <li class="details_wrap"><a href="#" class="details">详情4</a></li>
                </ul>
            </li>
        </ul>
    </div>

    JS:

    <script src="../jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function(){
            方法一:
            $(".wrapper").mouseover(function () {
                $(".details_wrap",this).show();
            }).mouseout(function () {
                $(".details_wrap",this).hide();
            });
    
            $(".details_wrap").mouseover(function () {
                $(".details_wrap",this).show();
            }).mouseout(function () {
                $(".details_wrap",this).hide();
            })
    
            方法二:
            $(".wrapper").mouseover(function () {							          $(this).find(".details_wrap").css('display','block');
            }).mouseout(function () {            $(this).find(".details_wrap").css('display','none');
            })
        })
    </script>

    不知道为啥,方法二的格式有错误,请自行调整。
    两只小菜鸟被这个搞了一下午,但依然存在很多疑问。比如,方法一中mouseover前为什么选择wrapper而不能是其他?
    请指教啊。

    另外,还有没有其他的方法?
    不吝赐教啊。

    展开全文
  • 鼠标经过一级菜单时,弹出下拉菜单;希望的是:鼠标移出一级菜单并且鼠标不在二级菜单悬停时,下拉菜单消失; 那么就设置4个事件: 对于一级菜单:onmouseover和onmouseout 对于二级菜单:onmouseover和...

    鼠标经过一级菜单时,弹出下拉菜单;希望的是:鼠标移出一级菜单并且鼠标不在二级菜单悬停时,下拉菜单消失;

    那么就设置4个事件:

    对于一级菜单:onmouseover和onmouseout

    对于二级菜单:onmouseover和onmouseout

    但是你要保证一级菜单和二级菜单连接紧密,中间不能有空隙,否则一旦离开一级菜单,二级马上消失,根本来不及悬停;

    展开全文
  • dedecms首页调用一级级菜单

    千次阅读 2018-11-25 00:16:59
    调用指定id的栏目,不过只能调用个,要想多个调用就只能重复多次调用该标签 {dede:type typeid='栏目id'} <a href="[field:typeurl/]...第种:(没有二级菜单的调用)直接 <div id="navMenu"> <u...
  • 更新一级菜单名称(如下图1),点击一次收起二级菜单,又显示原来的菜单(如下图2),如何处理? 图1 图2 答惑: 这是由于采用的菜单里只调整了“展开”的一级名称,需要选择“收缩菜单”,选中“收起...
  • 一级菜单与二级菜单整理

    千次阅读 2018-03-21 14:19:37
    鼠标事件: 文字 其中的“menulayer_1”,可以自定义命名,一... 解决办法:首先:一级菜单包含二级菜单,标签中的display属性的值是不是block 2、注意块元素整体的设置属性有没有Z-index属性,改属性设置对象层叠顺序
  • //创建右键菜单 ...//添加一级菜单 ToolStripMenuItem R_Add=new ToolStripMenuItem("添加一级菜单"); //绑定点击事件 R_Add_Click点击事件自己写一下 R_Add.Click += R_Add_Click; //创建R_A...
  • -- 一级菜单 --> android:id="@+id/file" android:title="@string/file"> <!-- 二级菜单 --> android:id="@+id/create" android:title="@string/create"> android:id="@+id/open" android:title=...
  • 实现顶部一级菜单和左侧二级菜单进行响应,选哪个一级菜单时,左侧菜单栏有相对应下的二级菜单,产生联动效果。然后选不同的二级菜单,主体内容区域展示对应内容。 二、效果图 三、具体操作实现 1、用 vue-...
  • 一级菜单: 1,登录系统 2,系统设置 3,退出 二级菜单: 1,注册 2,登录 3,返回上一级菜单 当我在选择一级菜单中的登录系统1进入二级菜单,然后选择1注册成功后再选择2登录进行密码匹配,(1)我现在密码匹配成功...
  • element增加一级菜单页面

    千次阅读 2018-03-23 16:35:14
    //条件判断 如果该菜单栏的children有一个以上的二级菜单,则展示出一级菜单&lt;el-submenu v-if="item.children.length&gt;1" :default-openeds="['1']" :index="item.title"...
  • 这样写有两个问题,1 点击一级菜单的文字,不会实现显示和隐藏。 2,点击二级菜单的li,也可以实现显示和隐藏。 正常情况应该是只有点击“我的收藏”,才会实现显示和隐藏。 求大神解答。。应该怎么写啊。。如果有...
  • 鼠标放在一级菜单才会出现二级菜单,需要鼠标悬浮在一级菜单上选择二级二级进行接下来的操作,鼠标悬浮使用move_to_element()和perform()两个函数来实现,拿目前测试的系统举例 如图所示,选择基础信息下的供应商...
  • AXURE8.0制作二级菜单和三级菜单

    千次阅读 2019-08-11 15:27:31
    Axure 二级菜单级菜单
  • 难点在于每一行菜单的层级不一样,如一级和二级菜单,所以值的获取在我们想来会比较麻烦,但是elementUI已经封装好了这种方法,实现起来非常方便 结论:将node传进来,根据返回的数据直接渲染在页面上就好啦。 ...
  • 基于vue的后台管理系统实现顶部一级菜单,左侧二级及二级以下菜单 介绍 本人是在若依后台管理系统上修改的此功能 该功能实现的是顶部导航菜单和左侧导航菜单进行响应,产生联动效果,而左侧的菜单是根据router获取...
  • 刚学了html语言,学了一种能够使二级菜单栏隐藏,在鼠标滑到一级菜单栏时,又将二级菜单栏显示出来的方法,这种方法可以时网页生动灵活,非常简洁,所以想写下来。 下面贴上代码: 菜单栏 .sub_menue { display:...
  • DIV+CSS制作二级菜单(横排二级下拉菜单)以及二级菜单出现错位解决方法
  • html代码: <body> <div> <ul class="main"> <li class="nav"><a href="#">文创商户</a> <ul class="navcontent"> ...
  • 主要是把逻辑搞清楚,实现起来容易了,主要思路就是把当前选中与上次选中做对比,使用了多选multiply属性,这个属性下,选中的数据结构为:一级为length1的数组,二级为length2的数组 <el-cascader class=...
  • 这个模块要分享的内容是二级菜单显示和一级菜单管理,其中也说明了使用smarty分页的注意事项,相信着也是大家开发会遇到的问题。
  • Vue Element Admin 添加一级菜单与页面

    千次阅读 2020-08-25 17:32:55
    2. 因为我们只做一级菜单,src/views/user 下面创建 index.vue 即可,模板写好。 name 名字尽量与模块名(文件名一致)。 开头字母大写,这样做是保持与原框架一致。 3. 根据需要写好页面。 4. 进入 src/...
  • 数据加载篇之一级菜单 数据加载篇之二级菜单 数据加载篇之获取及修改默认设置属性值 搜索栏篇 数据加载之一级菜单 DashboardSummary是顶级菜单的容器,那么数据的获取和它也就有关系。 DashboardCategory的获取...
  • ant design pro 添加一级菜单和子菜单

    千次阅读 2018-11-15 18:10:57
    1.新建个文件,我这个是复制其它自带的文件(list文件夹的TableList.js) 2.然后找到这个文件 去配router 3.也是copy其它的,就是改一下名字和路径文件...左边分享个公众号,写一些散文和影评等。    ...
  • 这个问题出现主要的原因是布局文件的问题,一级菜单的布局文件和二级菜单的布局文件必须是线性布局的,不然,二级菜单就有可能出现不显示的问题
  • 1、加载一级菜单数据  viewAdapter = new ExpandableAdapter(this, groupData);  elv.setAdapter(viewAdapter); 2、响应加载二级菜单数据的监听 elv.setOnGroupClickListener(new OnGroupClickListener(){  ...
  • 比如:去掉Settings一级菜单中的“Storage”选项 方法1: 直接在AndroidManifest.xml屏蔽掉即可 vendor\mediatek\proprietary\packages\apps\MtkSettings\AndroidManifest.xml &lt;!-- &lt;activity ...
  • 重点是逻辑,理解了就好了。先直接上html5代码:<!doctype html> 鼠标划过一级菜单,有二级菜单的就显示 <script src="../js/jquery-2.2.3.js"></script> $(function() { $("li:h

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 289,987
精华内容 115,994
关键字:

一级菜单是什么