纯css实现无限嵌套菜单

效果图：

demo：关键的地方都以颜色明显标识

<!DOCTYPE html>

<html>

<head>

<title>menu</title>

<meta charset="UTF-8" >

<style type="text/css">

  .menu {

    display: inline-block;

    box-shadow: 0 5px 15px #d8d8d8;

  }

  .menu-item {

    width: 100px;

    position: relative;

    padding: 5px 10px 5px 50px;

    border-bottom: 1px solid #e5f0f6;

  }

  .item-child {

    position: absolute;

  }

  .menu-item:hover{

    background: #eefbff;

  }

  .menu-item .item-child{

    top: 0;

    left: calc(100% + 3px);

    visibility: hidden;

    opacity: 0;

    box-shadow: 0 5px 15px #d8d8d8;

    transition: visibility 0.5s ease,

                opacity 0.5s ease;

  }

  .menu-item:hover > .item-child{

    visibility: visible;

    opacity: 1;

  }

  .menu-item > .item-child:active {/* 这种方式无法触发点击事件，最好改为js处理消失 */

    display: none;

  }

  span::after {

    content: '...';

    right: 10px;

    position: absolute;

  }

  span:only-child::after {

    content: '';

  }

</style>

</head>

<body>

<div class="wrap">

    <div class="menu">

        <div class="menu-item">

            <span>title-1</span>

            <div class="item-child"> <!-- 一级嵌套 -->

                <div class="menu-item">

                    <span>title-1-1</span>

                </div>

                <div class="menu-item">

                    <span>title-1-2</span>

                </div>

                <div class="menu-item">

                    <span>title-1-3</span>

                    <div class="item-child"> <!-- 二级嵌套 -->

                        <div class="menu-item">

                            <span>title-1-3-1</span>

                        </div>

                        <div class="menu-item">

                            <span>title-1-3-2</span>

                        </div>

                        <div class="menu-item">

                            <span>title-1-3-3</span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="menu-item">

            <span>title-2</span>

            <div class="item-child">

                <div class="menu-item">

                    <span>title-2-1</span>

                </div>

                <div class="menu-item">

                    <span>title-2-2</span>

                </div>

                <div class="menu-item">

                    <span>title-2-3</span>

                </div>

                <div class="menu-item">

                    <span>title-2-4</span>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

二、基于jquery plugin版本

<!DOCTYPE html>

<html>

<head>

<title>menu</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

<meta charset="UTF-8" >

<style type="text/css">

  .cmenu {

    display: inline-block;

    box-shadow: 0 5px 15px #d8d8d8;

    position: absolute;

  }

  .cmenu-item {

    width: 100px;

    position: relative;

    padding: 5px 10px 5px 50px;

    border-bottom: 1px solid #e5f0f6;

  }

  .item-child {

    width: 0;

    position: absolute;

    top: 0;

    visibility: hidden;

    opacity: 0;

    box-shadow: 0 5px 15px #d8d8d8;

    transition: all .3s ease .2s;

  }

  .cmenu-item:hover{

    background: #eefbff;

  }

  .cmenu-item:hover > .item-child{

    width: 100%;

    visibility: visible;

    opacity: 1;

  }

  .item-child>.cmenu-item{

    height: 0;

    padding: 0;

    transition: all .3s ease .2s;

  }

  .cmenu-item:hover>.item-child>.cmenu-item{

    height: 20px;

    padding: 5px 10px 5px 50px;

  }

  .cmenu.item-left .item-child {

    left: calc(100% + 1px);

  }

  .cmenu.item-right .item-child {

    right: calc(100% + 1px);

  }

  .cmenu span::after {

    content: '...';

    right: 10px;

    position: absolute;

  }

  .cmenu span:only-child::after {

    content: '';

  }

  .hidden {

    display: none;

  }

  .disabled{

    color: silver;

  }

</style>

</head>

<body>

  <div class="wrap">

    <div id="mn" style="position: absolute;right: 900px;"></div>

  </div>

</body>

<script type="text/javascript">

  (function($){

    function _init(ctn,op){

        ctn.innerHTML = '';

        ctn.classList.add('cmenu');

        _initEvent(ctn,op);/*绑定事件*/

        if(op.url){

          $.getJson(op.url,function(data){

              _createMenuItem(ctn,data);

          });

        }else if(op.data) _createMenuItem(ctn,op.data,op);

    }

    function _createMenuItem(pNode,data,op){/* 迭代生成子孙节点 */

      data.map(function(item){

        var itemNode = $('<div class="cmenu-item"></div>'),

            spanNode = $('<span>'+item.text+'</span>');

        itemNode.data('info',item);

        if(item.show == false) itemNode.addClass('hidden');

        if(item.disable == true) itemNode.addClass('disabled');

        $(pNode).append(itemNode.append(spanNode));

        if(item.children) {

          var childNode = $('<div class="item-child"></div>');

          $(itemNode).append(childNode);

          _createMenuItem(childNode,item.children,op);

        }

      });

    }

    function _initEvent(ctn,op){

      $(ctn).off('click');

      $(ctn).on('click',function(){

        event = window.event || arguments.callee.caller.arguments[0];

        var node = event.target, cList = node.classList;

        if(!Array.from(cList).includes('cmenu-item')) node = $(node).parents('.cmenu-item:first');

        var infoRow = $(node).data('info');

        if(!infoRow.disable && op.click && typeof op.click == 'function') op.click(infoRow);

        $('.item-child').addClass('hidden');

        event.stopPropagation();

        setTimeout(function(){ $('.item-child').removeClass('hidden'); },50);

      });

      $(ctn).off('mouseenter').on('mouseenter',function(){

        var pageX =  document.documentElement.clientWidth,

            itemX = ctn.offsetLeft,

            isLess = pageX-itemX-100<200;

        if(isLess){

            ctn.classList.remove('item-left');

            ctn.classList.add('item-right');

        }else{

            ctn.classList.add('item-left');

            ctn.classList.remove('item-right');

        }

      });

    }

    $.fn.cmenu = function(options,param){

      /* 判断是否为对外调用API */

      if(typeof option == 'string') $.fn.cmenu.methods[options](this,param);

      /* 初始化组件 */

      var op = $.extend({},$.fn.cmenu.defaults,options);

      return this.each(function(){

          _init(this,op);

      });

    }

    $.fn.cmenu.methods = {

    }

    $.fn.cmenu.defaults = {

    }

  })(jQuery)

  /* 上面的js放到公共js文件中即可 */

  var data = [

    {text:'编程类',id:1,cls:'',

     children:[

       {text:'Java',show:true,disable: true},

       {text:'Javascript',id:4,cls:'',show:false},

       {text:'Python',id:5,cls:'',show:true,

        children:[

          {text:'object',disable: true},

          {text:'array'},

          {text:'string'},

          {text:'array'},

          {text:'string'},

          {text:'array'},

          {text:'string'},

          {text:'array'},

          {text:'string'},

          {text:'array'},

          {text:'string'},

          {text:'array'},

          {text:'string'}

        ]

       }

     ]

    },

    {text:'算法类',id:2,cls:'',show:true}

  ];

  $('#mn').cmenu({data:data,click:clickEvent});

  function clickEvent(row){

      console.log(row);

  }

</script>

</html>

纯css实现无限嵌套菜单的更多相关文章

纯css实现京东导航菜单
纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
纯css实现下拉菜单
今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...
纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <div id="nav"><dl class="sy"><dt> ...
纯CSS下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...
用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...
纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
10分钟使用纯css实现完整的响应式导航菜单栏的效果
在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目 ...
CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

随机推荐

rownum用法
对于rownum来说它是oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,依此类推,这个伪字段可以用于限制查询返回的总行数,且rownum不能以任何表的名称作为前缀. ...
8Linux磁盘划分、RAID
磁盘划分fdisk 1.磁盘分区 fdisk 2.格式化 mkfs.ext4 mkfs.xfs 3.挂载 mount 路径挂载路径 fdisk命令中的参数以及作用参数作用m 查看全部可用的参数n ...
Django 请求类型
// GET请求request.GET // POST请求request.POST // 处理文件上传请求request.FILES // 处理如checkbox等多选接受列表request.get ...
数据库sql使用小结
1.更新数据库中表的字段的时候,如果更新的表本身含有最细粒度的字段,那么可以以最细粒度作为判断条件,一次性更新多个字段: 2.如果更新的表中本身不含有最细粒度字段,那么要更新多个字段时有两种思路: a ...
浅谈Unicode编码
目录 1.概述 2.ASCII编码 3.历史问题 4.Unicode 4-1.Unicode 编码方案 4-2.关于bom 5.UTF-8 6.UTF-16 1.概述对于ASCII编码,相信同学们都 ...
idea2018.1.5激活教程
这是地址链接: https://pan.baidu.com/s/1lx5AfMjADYFcQARi7_GNIw 密码: nvfi 1下载解压到任意目录(前提你能找到) 2将复制到 bin目录下如 ...
Filter过滤器不登陆无法访问其他页面
package com.cscy.Filter; import java.io.IOException; import javax.servlet.Filter; import javax.servl ...
Neural Network Virtual Machine
深度学习Stack 为什么提出NNVM? 深度学习框架现状 - “碎片化” 目前,深度学习应用框架呈现出高度的“碎片化(fragmentation)”倾向,这主要是由于下述两个原因: 1. 深度学习正 ...
SpringMVC对ServletAPI的支持和JSON格式的转换
package com.hongcong.controller; import java.io.UnsupportedEncodingException; import java.net.URLDec ...
Taro之使用百度地图
适配h5的时候要使用地图功能获取位置,选取了百度地图.首先在index.html文件引入. <script type="text/javascript" src=" ...

纯css实现无限嵌套菜单

纯css实现无限嵌套菜单的更多相关文章

随机推荐

热门专题