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

随机推荐

Activiti 框架学习
1:工作流的概念说明: 1) 假设:这两张图就是华谊兄弟的请假流程图 2) 图的组成部分: 人物:范冰冰冯小刚王中军事件(动作):请假.批准.不批准工作流(Workflo ...
azkaban使用--依赖dependencies作业
1.创建作业 [root@localhost azkaban_job]# ls one.job two.job [root@localhost azkaban_job]# cat one.job ty ...
asp.net ajax get 调用(和post不一样，直接返回json才行，否则报错；post不能返回json)
<script type="text/javascript" > $(document).ready(function () { $('#Label1').click( ...
Canvas 实现绘制图表
这里用canvas实现了两个简单的图表,用到了canvas的基本用法,效果如下新建 chart.js 文件,封装绘制方法构造方法 function myChart(config){ this.wi ...
Delphi 窗口操作
unit UnitWinUtils; interface uses Windows; Type TDWA128=Array [..] of LongWord; TDWA256=Array [..] o ...
PHP提交订单,信息的传递
今天被之前的同事问到订单这一块(他用的是Laraver)..."多个商品在同一个订单里,怎么将相同的商品放进一个分组"... 当时我和他的反应都是,array_push, arra ...
linux下打压缩解压
tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...
Suse linux enterprise 11添加设置中文输入法的方法
Suse中输入法的设置没有在控制中心中,而是在应用程序里默认会安装好的SCIM输入法设置里边添加. 打开SCIM输入法设置->输入法引擎->全局设置,有很多国家的输入法可以选择,想要的找到 ...
[RUNOOB]C++继承
REF: http://www.runoob.com/cplusplus/cpp-inheritance.html 一.基类和派生类程序: #include "stdafx.h" ...
将php脚本加入开机启动
可以看到“/etc/rc.d/init.d”下有很多的文件,每个文件都是可以看到内容的,其实都是一些shell脚本.系统服务的启动就是通过“/etc/rc.d/init.d”中的脚本文件实现的.我们也 ...

纯css实现无限嵌套菜单

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

随机推荐

热门专题