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

随机推荐

video.js使用
//引入video.js html <video id="my-player" className="video-js my-player-wrap vjs-big ...
Django 命令
django #安装: pip3 install django 添加环境变量 #1 创建project django-admin startproject mysite ---mysite ---se ...
pyqt5-----postgresql数据库使用
上一章解决了无法加载postgresql数据库的问题 1.打开数据from PyQt5 import QtWidgets,QtSql,QtCoreimport sys app =QtCore.QCor ...
Lora开发
NB-IOT和GPRS模块有什么异同安装STM32CubeMX简介 HAL库与STD库安装STM32CubeMX软件 MO工程建立第四步是验证代码: 1.怎么进行IO配置 (1)看懂原理图建 ...
【399】jupyter 修改主题
参考:Jupyter 主题更换参考:Restoring default theme #86 修改主题的方法: 首先在 cmd 上输入 jt -l 选择自己需要的主题,如 jt -t monokai ...
<Dare To Dream>第五次作业：团队项目需求改进与系统设计
任务1完成情况: a.分析<家教服务管理系统需求规格说明书>初稿的不足: uml建模不完整,无类图.流程图,仅有的用例图也不规范. b.功能分析的四个象限: c. 团队项目的WBS: d. ...
Java开发中的23种设计模式（转）
设计模式(Design Patterns) ——可复用面向对象软件的基础设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
ajax原生实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
HATEOAS 约束
HATEOAS 约束 HATEOAS(Hypermedia as the engine of application state)是 REST 架构风格中最复杂的约束,也是构建成熟 REST 服务的核 ...
Maven插件maven-shade-plugin打包配置
转载以下两篇文章 https://www.cnblogs.com/fuxinci/p/3356087.html https://chenzhou123520.iteye.com/blog/197132 ...

纯css实现无限嵌套菜单

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

随机推荐

热门专题