纯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也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

随机推荐

浅谈Android之Activity生命周期
Activity作为四大组件之一,出现的频率相当高,基本上我们在android的各个地方都能看见它的踪影,因此深入了解Activity,对于开发高质量应用程序是很有帮助的.今天我们就来详细地聊聊Ac ...
转载：消息队列MQ
本文大概围绕如下几点进行阐述: 为什么使用消息队列? 使用消息队列有什么缺点? 消息队列如何选型? 如何保证消息队列是高可用的? 如何保证消息不被重复消费? 如何保证消费的可靠性传输? 如何保证消息的 ...
[DOM]初识DOM
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...
自学web前端能不能找到一份前端的工作吗
关于自学web前端能不能通过社招找到一份互联网公司web前端开发的工作,有无数的人问出这样的问题,答案没有标准的,只能从概率去考虑.有的人可以,有的人不可以,有的人自学就业的概率就是高,有的概率就是低 ...
如何在Chrome中导入和导出密码
如果想让 Chrome 支持密码导入和导出,需要先在地址栏中执行 chrome://flags/#password-import-export 将该功能启用并重启浏览器才能生效. 浏览器重启完成后 ...
ActiveMq Windows 配置优化
最近ActiveMQ 5.15.3 会报 OutofMemory的错误在 wrapper.conf中 #wrapper.java.additional.8=-Dorg.apache.activemq ...
centos7 安装memcached
(1)编译安装Memcached 1.51.1 安装依赖包libevent# yum -y install epel-release# yum -y install libevent libevent ...
office2016产品密钥
office2016专业增强版产品密钥: VL批量授权版:QCKNG-29MKJ-74G4B-X7DT8-JFHBB(亲测有效) office2016专业增强版密钥(Retail零售版),可电话激活 ...
Python数据结构与算法相关问题与解决技巧
1.如何在列表, 字典, 集合中根据条件筛选数据¶ In [1]: from random import randint In [2]: data = [randint(-10,10) for _ ...
第五周博客作业 <西北师范大学| 周安伟>
第五周博客作业一,助教博客链接https://home.cnblogs.com/u/zaw-315/ 二,本周工作查阅项目汇报,班级微信群.对同学们的中期项目汇报进行查看,解决上周留言问题,对及时出 ...

纯css实现无限嵌套菜单

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

随机推荐

热门专题