效果图：
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>