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

随机推荐

java面试题复习（一）
//基础最重要,如果面试官问一个答不上一个,那有难度的都都不用问了,直接就pass了,就像我,嘿嘿. //每天最好熟记10个问题,这些问题在编程是会很厚帮助,帮你避免很多不应该出现的错误. 一.面向对 ...
Mysql分表：Merge
merge是Mysql最简单的一种分表,Mysql自带的一个分表功能,Merge表并不保存数据,Merge表和分表是对应映射关系.demo: 创建分表:CREATE TABLE `user1` ( ` ...
JAVA_Class.forName()用法详解
Class.forName(xxx.xx.xx)返回的是一个类. Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类,JVM会执行该类的静态代码段. Class.fo ...
用python发送短消息(基于阿里云平台)
新版短信接口在线测试页面:https://api.aliyun.com/new#/?product=Dysmsapi&api=SendSms&params={}&tab=DEM ...
cookies,sessionstorage,localstorage的区别？
请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage 和 localStorage 是HTML5 Web Storage AP ...
三个猜数字游戏代码（Python）
def binary_search(list,item): low = 0 high = len(list)-1 while low <= high: mid = (low + high)//2 ...
SVN添加用户
1. 找到svn安装路径 /svn/repositories/ (如果不知道,可以搜索 :find / -name svn或者是ps -ef | grep svn) 2.进入该目录的conf,其中包 ...
C#中生成GUID的四种格式
var uuid = Guid.NewGuid().ToString(); // 9af7f46a-ea52-4aa3-b8c3-9fd484c2af12 var uuidN = Guid.NewGu ...
MongoDB基本语法
建立连接 client = pymongo.MongoClient() 新建数据库 db = client["db_name"] 新建表 tble=db["table_n ...
【笔记】Python基础三：文件
一,文件操作 (一),文件处理流程 1,打开文件,获得文件句柄(open函数提供)并赋值 2,通过句柄对文件进行操作 3,关闭句柄 f = open('陈粒',encoding='utf-8')#op ...

纯css实现无限嵌套菜单

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

随机推荐

热门专题