"Mega-Menu 複合下拉選單(含Tab圖效果)"
Bootstrap 2.3.2 Snippet by john8895

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="page"> <div class="header"> <div class="header-menu"> <div class="container"> <nav id="menu"> <ul> <li class="SubmenuTabs IconHidden"> <a href="#"><i class="fas fa-home"></i>選單</a> <ul> <li class="SubmenuMega"> <a href="#">Lorem ipsum dolor</a> <ul> <li> <div style="background-image: url(https://picsum.photos/600/600/?random=1)"> </div> </li> </ul> </li> <li class="SubmenuMega"> <a href="#">Lorem ipsum dolor</a> <ul> <li> <div style="background-image: url(https://picsum.photos/600/600/?random=2)"> </div> </li> </ul> </li> <li class="SubmenuMega"> <a href="#">Lorem ipsum dolor</a> <ul> <li> <div style="background-image: url(https://picsum.photos/600/600/?random=3)"> </div> </li> </ul> </li> <li class="SubmenuMega"> <a href="#">Lorem ipsum dolor</a> <ul> <li> <div style="background-image: url(https://picsum.photos/600/600/?random=4)"> </div> </li> </ul> </li> <li class="SubmenuMega"> <a href="#">Lorem ipsum dolor</a> <ul> <li> <div style="background-image: url(https://picsum.photos/600/600/?random=5)"> </div> </li> </ul> </li> <li class="SubmenuMega"> <a href="#">Lorem ipsum dolor</a> <ul> <li> <div style="background-image: url(https://picsum.photos/600/600/?random=6)"> </div> </li> </ul> </li> </ul> </li> <li class="SubmenuTabs IconHidden"> <a href="#"><i class="fas fa-home"></i>選單</a> <ul> <li class="SubmenuMega"> <a href="#">Lorem ipsum dolor</a> <ul> <li> <div style="background-image: url(https://picsum.photos/600/600/?random=10)"> </div> </li> </ul> </li> <li class="SubmenuMega"> <a href="#">Lorem ipsum dolor</a> <ul> <li> <div style="background-image: url(https://picsum.photos/600/600/?random=20)"> </div> </li> </ul> </li> <li class="SubmenuMega"> <a href="#">Dolor sit</a> <ul> <li class="Selected"> <a href="#">Lorem ipsum</a> <ul> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum dolor dolor sit amet</a></li> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> <li> <a href="#">Dolor sit amet</a> <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Dolor sit</a></li> </ul> </li> <li> <a href="#">Lorem ipsum</a> <ul> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum dolor dolor sit amet</a></li> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> </ul> </li> <li> <a href="#">Ipsum dolor</a> <ul> <li><a href="#">Lorem ipsum dolor sit</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> <li> <a href="#">Link</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Lorem ipsum dolor</a></li> </ul> </li> </ul> </li> <li> <a href="#"></i> Submenu with flyouts</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> <li> <a href="#">Ipsum dolor</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> <li class="SubSubmenuAlignRight"> <a href="#">Link (flyout left)</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Lorem ipsum dolor</a></li> </ul> </li> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> <li> <a href="#">Lorem</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> <li class="SubSubmenuInline"> <a href="#">Link (with inline submenu)</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> <li> <a href="#">Lorem (flyout)</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> </ul> </li> <li> <a href="#">Lorem ipsum (flyout)</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> <li class="SubSubmenuAlignRight"> <a href="#">Dolor sit amet (flyout left)</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> </ul> </li> <li class="SubmenuMega"> <a href="#">Mega</a> <ul> <li> <a href="#">Lorem ipsum</a> <ul> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Lorem ipsum dolor</a></li> <li> <a href="#">Dolor sit amet (flyout)</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Ipsum dolor</a></li> </ul> </li> <li class="SubSubmenuAlignRight"> <a href="#">Lorem ipsum dolor (flyout left)</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> </ul> </li> <li> <a href="#">Dolor sit</a> <ul> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Lorem ipsum dolor</a></li> <li> <a href="#">Dolor sit amet (flyout)</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Ipsum dolor</a></li> <li class="SubSubmenuAlignRight"> <a href="#">Lorem ipsum dolor (flyout left)</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Dolor sit amet</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#">Amet</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> <li><a href="#">Link</a></li> <li class="SubmenuMega SubmenuFullwidth IconOnly"> <a href="#"><i class="fas fa-envelope"></i> Fullwidth mega</a> <ul> <li> <div style="background-image: url(https://picsum.photos/400/600/?random=1)"> </div> <a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li> <a href="#">Link (flyout)</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li class="SubSubmenuAlignRight"> <a href="#">Link (flyout left)</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> <li> <div style="background-image: url(https://picsum.photos/400/600/?random=2)"> </div> <a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li> <div style="background-image: url(https://picsum.photos/400/600/?random=3)"></div> <a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li> <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li> <li><a href="#"><i class="fab fa-apple"></i> Apple</a></li> <li class="AlignRight"> <a href="#">Align right</a> <ul> <li> <a href="#">Link (with a flyout submenu)</a> <ul> <li><a href="#">Link with long text in it</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li class="AlignRight"> <a href="#"><i class="fas fa-search"></i></a> <ul> <li> <form> <input type="text" /> <input type="submit" value="zoek" /> </form> </li> </ul> </li> </ul> </nav> </div> </div> <div class="header-slider"> </div> </div> <div class="container"> <h2>Some text</h2> <p>Some text</p> </div> </div> <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/jquery.dmenu.js"></script> <script> $(function () { $(window).resize(); }); $('#menu').dmenu({ menu: { border: true, logo: false, align: false }, item: { bg: true, border: false, subindicator: true, fit: [{ items: null, fitter: 'icon-hide', order: 'all' }, { items: null, fitter: 'icon-only', order: 'all' }, { items: ':not(.dm-item_align-right)', fitter: 'submenu', order: 'rtl' }, { items: ':not(.dm-item_align-right)', fitter: 'hide', order: 'rtl' } ] }, submenu: { arrow: true, border: true, shadow: true }, subitem: { bg: true, border: false } }); </script>
@charset "UTF-8"; .dm-menu { --dm-bg: #eee; --dm-color: #333 } .dm-menu { --dm-menu-height: 50px; --dm-item-hover-color: #333; --dm-item-hover-bg: #ccc; --dm-item-current-color: #eee; --dm-item-current-bg: #54b4eb } .dm-menu { --dm-submenu-bg: #fff; --dm-submenu-color: #333 } .dm-menu { --dm-menu-border-color: #54b4eb; --dm-menu-border-width: 5px } .dm-menu { --dm-logo-width: 50px } .dm-menu { --dm-subitem-hover-bg: #f3f3f3 } .dm-menu { --dm-subitem-border: rgba(0, 0, 0, 0.1) } .dm-menu { --dm-submnu-boxshadow: 0 5px 10px rgba(0, 0, 0, 0.1) } .dm-menu { --dm-submenu-tabs-bg: #f3f3f3 } .dm-hidden { display: none !important } .dm-menu { color: #333; color: var(--dm-color); background: #eee; background: var(--dm-bg); padding: 0; position: relative } .dm-menu a, .dm-menu div, .dm-menu li, .dm-menu span, .dm-menu ul { color: inherit; box-sizing: border-box; display: block } .dm-menu a, .dm-menu li, .dm-menu span, .dm-menu ul { position: relative } .dm-menu a { text-decoration: none } .dm-menu li, .dm-menu ul { list-style: none; margin: 0; padding: 0 } .dm-menu { line-height: 20px } .dm-menu>ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .dm-menu>ul:after { content: ''; display: block; clear: both } .dm-menu_align-right>ul { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end } .dm-menu_align-center>ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .dm-menu_align-justify>ul { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly } .dm-menu_align-justify>ul>li { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1 } .dm-menu_border>ul { border-bottom: 5px solid #54b4eb; border-bottom-width: var(--dm-menu-border-width); border-bottom-color: var(--dm-menu-border-color) } .dm-menu_logo>ul { padding-left: var(--dm-logo-width) } .dm-menu_logo>a, .dm-menu_logo>span { background: none left center/contain no-repeat transparent; background-origin: content-box; display: block; width: var(--dm-logo-width); padding: 5px 10px 5px 10px; position: absolute; top: 0; left: 0; bottom: 0; z-index: 1 } .dm-menu:not(.dm-menu_logo)>a, .dm-menu:not(.dm-menu_logo)>span { display: none } .dm-menu>ul>li>a, .dm-menu>ul>li>span { height: var(--dm-menu-height); padding-top: calc((var(--dm-menu-height) - 20px)/ 2); padding-bottom: calc((var(--dm-menu-height) - 20px)/ 2); padding-right: 20px; padding-left: 20px; position: relative; z-index: 0 } .dm-menu>ul>li:hover>a, .dm-menu>ul>li:hover>span { z-index: 2 } .dm-item_align-right { float: right; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1 } .dm-menu_item-bg>ul>li.dm-selected>a, .dm-menu_item-bg>ul>li.dm-selected>span { background: #54b4eb; background: var(--dm-item-current-bg); color: #eee; color: var(--dm-item-current-color) } .dm-menu_item-bg>ul>li:hover>a, .dm-menu_item-bg>ul>li:hover>span { background: dm_item_hover_bg; background: var(--dm-item-hover-bg); color: #333; color: var(--dm-item-hover-color) } .dm-menu_item-border>ul>li>a:after, .dm-menu_item-border>ul>li>span:after { content: ''; display: block; height: var(--dm-menu-border-width); position: absolute; bottom: 0; left: 20px; right: 20px } .dm-menu_item-border>ul>li.dm-selected>a:after, .dm-menu_item-border>ul>li.dm-selected>span:after { background: var(--dm-item-current-bg) } .dm-menu_item-border>ul>li:hover>a:after, .dm-menu_item-border>ul>li:hover>span:after { background: var(--dm-item-hover-bg) } .dm-menu_item-border>ul>li:not(.dm-item_submenu-fullwidth)>ul { margin-left: 20px; margin-right: 20px } .dm-menu_item-border.dm-menu_border>ul>li>a:after, .dm-menu_item-border.dm-menu_border>ul>li>span:after { bottom: calc(0px - var(--dm-menu-border-width)) } .dm-menu_item-border.dm-menu_border>ul>li>ul { top: calc(100% + var(--dm-menu-border-width)) } .dm-item_icon-only>a>[class*=fa-], .dm-item_icon-only>span>[class*=fa-], .dm-item_icon-text>a>[class*=fa-], .dm-item_icon-text>span>[class*=fa-] { font-size: 120% } .dm-item_icon-text>a>[class*=fa-], .dm-item_icon-text>span>[class*=fa-] { margin-right: 4px; vertical-align: text-top } .dm-menu>ul>.dm-item_icon-only>a, .dm-menu>ul>.dm-item_icon-only>span { padding-left: 10px; padding-right: 10px } .dm-menu>ul>.dm-item_icon-only>a:before, .dm-menu>ul>.dm-item_icon-only>span:before { content: none; display: none } .dm-menu_item-border>ul>.dm-item_icon-only:hover>a:after, .dm-menu_item-border>ul>.dm-item_icon-only:hover>span:after { left: 5px; right: 5px } .dm-menu_item-border>ul>.dm-item_icon-only:hover>ul { margin-left: 5px; margin-right: 5px } .dm-menu_item-subindicator>ul>.dm-item_parent>a:before, .dm-menu_item-subindicator>ul>.dm-item_parent>span:before { content: ''; border: 3px solid transparent; border-top: 4px solid #333; border-top-color: var(--dm-color); opacity: .3; display: block; width: 0; height: 0; margin-top: -1px; position: absolute; top: 50%; right: 10px } .dm-menu li ul { display: none } .dm-menu:not(.dm-menu_submenu) li ul { display: none !important } .dm-menu_submenu li ul { background: var(--dm-submenu-bg); color: var(--dm-submenu-color); white-space: nowrap; padding: 10px 10px 10px 10px; position: absolute; top: 0; left: 70%; z-index: 1 } .dm-menu_submenu li:hover>ul { display: block } .dm-menu_submenu>ul>li>ul { min-width: 100%; top: 100%; left: 0 } .dm-item_submenu-align-right>ul { left: auto !important; right: 0 } .dm-subitem_submenu-align-right>ul { left: auto !important; right: 100% } .dm-menu_submenu-arrow>ul>.dm-item_parent:hover>a:after, .dm-menu_submenu-arrow>ul>.dm-item_parent:hover>span:after { content: ''; background: 0 0; border: 8px solid transparent; border-bottom-color: var(--dm-submenu-bg); display: block; width: 0; height: 0; margin-left: -8px; position: absolute; left: 50%; bottom: 0; z-index: 2 } .dm-menu_submenu-arrow>ul>.dm-item_submenu-tabs:hover>a:after, .dm-menu_submenu-arrow>ul>.dm-item_submenu-tabs:hover>span:after { border-bottom-color: var(--dm-submenu-tabs-bg) } .dm-menu_submenu-arrow.dm-menu_submenu-border>ul>.dm-item_parent:hover>a:after, .dm-menu_submenu-arrow.dm-menu_submenu-border>ul>.dm-item_parent:hover>span:after { bottom: calc(0px - var(--dm-menu-border-width)) } .dm-menu_submenu-border>ul>li>ul { border-top: 5px solid #ccc; border-top-color: var(--dm-item-hover-bg); border-top-width: var(--dm-menu-border-width) } .dm-item_submenu-fullwidth { position: static !important } .dm-item_submenu-fullwidth>ul { margin-left: 0; margin-right: 0; right: 0; top: calc(100% - $dm_menu_padding_bottom) } .dm-subitem_submenu-inline>div[style*=background-image] { /* background-size: cover; */ background-position: left top; background-repeat: no-repeat; display: block; height: 600px; margin-bottom: 10px; width: 600px; } .dm-menu li .dm-subitem_submenu-inline>a, .dm-menu li .dm-subitem_submenu-inline>span { font-weight: 700 } .dm-menu li .dm-subitem_submenu-inline>ul { background: 0 0 !important; box-shadow: none !important; display: block !important; padding-top: 0 !important; padding-right: 0 !important; padding-left: 0 !important; position: static !important } .dm-menu li .dm-subitem_submenu-inline>ul>li { border-top: none !important } .dm-menu li .dm-subitem_submenu-inline>ul>li>a, .dm-menu li .dm-subitem_submenu-inline>ul>li>span { padding: 5px 10px 5px 10px } .dm-menu li .dm-subitem_submenu-inline>ul>li>a:before, .dm-menu li .dm-subitem_submenu-inline>ul>li>span:before { content: '›'; display: inline-block; margin-right: 5px } .dm-item_submenu-mega>ul>li { border-top: none !important } .dm-item_submenu-mega>ul>li+li { padding-left: 10px } .dm-item_submenu-mega:hover>ul { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch } .dm-item_submenu-mega:hover>ul>li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .dm-menu_submenu-shadow li ul { box-shadow: var(--dm-submnu-boxshadow) } .dm-item_submenu-tabs>ul:after { content: ''; background: var(--dm-submenu-tabs-bg); display: block; width: calc(25% + 5px); position: absolute; top: 0; left: 0; bottom: 0; z-index: -1 } .dm-item_submenu-tabs>ul>li { width: 25%; box-shadow: border-box; position: static } .dm-item_submenu-tabs>ul>li>ul { box-shadow: none; top: 0; left: calc(25% + 5px); right: 0 } .dm-item_submenu-tabs>ul>li.dm-selected>a, .dm-item_submenu-tabs>ul>li.dm-selected>span, .dm-item_submenu-tabs>ul>li:hover>a, .dm-item_submenu-tabs>ul>li:hover>span { background: var(--dm-submenu-bg) !important } .dm-item_submenu-tabs>ul>li.dm-selected>ul, .dm-item_submenu-tabs>ul>li:hover>ul { display: block } .dm-item_submenu-tabs>ul>li.dm-selected.dm-item_submenu-mega>ul, .dm-item_submenu-tabs>ul>li:hover.dm-item_submenu-mega>ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch } .dm-item_submenu-tabs>ul>li.dm-selected.dm-item_submenu-mega>ul>li, .dm-item_submenu-tabs>ul>li:hover.dm-item_submenu-mega>ul>li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .dm-menu li li a, .dm-menu li li span { padding: 10px 10px 10px 10px } .dm-menu_subitem-bg li li.dm-selected>a, .dm-menu_subitem-bg li li.dm-selected>span, .dm-menu_subitem-bg li li:hover>a, .dm-menu_subitem-bg li li:hover>span { background-color: var(--dm-subitem-hover-bg) } .dm-menu_subitem-bg .dm-item_submenu-mega>ul>li:hover>a, .dm-menu_subitem-bg .dm-item_submenu-mega>ul>li:hover>span, .dm-menu_subitem-bg .dm-subitem_submenu-inline:hover>a, .dm-menu_subitem-bg .dm-subitem_submenu-inline:hover>span { background: 0 0 } .dm-menu_subitem-bg .dm-item_submenu-mega>ul>li>a[href]:hover, .dm-menu_subitem-bg .dm-subitem_submenu-inline>a[href]:hover { background-color: var(--dm-subitem-hover-bg) } .dm-menu_subitem-border li li { border-top: 1px solid var(--dm-subitem-border) } .dm-menu_subitem-border li li:first-child { border-top: none }
;(function(root, factory) { if (typeof define === 'function' && define.amd) { define(['jquery'], factory); } else if (typeof exports === 'object') { module.exports = factory(require('jquery')); } else { root.jquery_dmenu_js = factory(root.jQuery); } }(this, function(jQuery) { /* * jQuery dmenu v1.0.1 * @requires jQuery 1.7.0 or later * * mmenu.frebsite.nl/dmenu-plugin * * Copyright (c) Fred Heusschen * www.frebsite.nl * * License: CC-BY-4.0 * http://creativecommons.org/licenses/by/4.0/ */ !function(e){var t="dmenu",s="1.0.1";if(!(e[t]&&e[t].version>s)){e[t]=function(e,t,s){function i(){n._code("resize:start"),n._code("resize:before"),n._code("resize"),n._code("resize:after"),n._code("resize:finish")}var n=this;this.$menu=e,this.opts=t,this.conf=s,this.vars={},this._code("setup:start"),this._code("setup:before"),this._code("setup"),this._code("setup:after"),this._code("setup:finish"),this._code("resize:start"),this._code("resize:before"),this._code("resize"),this._code("resize:after"),this._code("resize:finish"),o.$wndw.on(a.load,i);var r=null;return o.$wndw.on(a.resize,function(e){r&&clearTimeout(r),r=setTimeout(i,100)}),this},e[t].version=s,e[t].code={},e[t].fitters={},e[t].options={},e[t].configuration={classNames:{}},e[t].prototype={_code:function(s){var i,n;for(i in e[t].code)n=e[t].code[i][s],"function"==typeof n&&n.call(this)}},e[t].code[t]={setup:function(){function e(s,n){for(var a in s)"string"==typeof s[a]?t.filter("."+s[a]).removeClass(s[a]).addClass(n+a):e(s[a],i[a]+"_")}var t=this.$menu.find("li");e(this.conf.classNames,i.dm(""))}},e.fn[t]=function(s,i){return s=e.extend(!0,{},e[t].options,s),i=e.extend(!0,{},e[t].configuration,i),this.each(function(){var n=e(this);if(!n.data(t)){var a=new e[t](n,s,i);n.data(t,a)}})},e[t].support={touch:"ontouchstart"in window||navigator.msMaxTouchPoints||!1};var i,n,a,o;!function(){o={$wndw:e(window),$docu:e(document),$html:e("html"),$body:e("body")},i={},n={},a={},e.each([i,n,a],function(e,t){t.add=function(e){e=e.split(" ");for(var s=0,i=e.length;s<i;s++)t[e[s]]=t.dm(e[s])}}),i.dm=function(e){return"dm-"+e},i.add("selected hidden"),n.dm=function(e){return"dm-"+e},n.add("class"),a.dm=function(e){return e+".dm"},a.add("load resize mouseenter mouseleave"),e[t]._c=i,e[t]._d=n,e[t]._e=a,e[t]._g=o}()}}(jQuery),function(e){var t="dmenu",s="item";e[t].options[s]={fit:[]},e[t].configuration.classNames.selected="Selected",e[t].configuration.classNames[s]={},e[t]._c.add(s);var i=e[t]._c,n=e[t]._d;e[t]._e,e[t]._g;e[t].prototype._itemsOverflow=function(){return this.$menu.children("ul").height()>this.$items.not("."+i.hidden).outerHeight()},e[t].code[s]={"setup:before":function(){this.$items=this.$menu.children("ul").children("li")},setup:function(){this.$menu.find("li").filter("."+i.selected).parentsUntil(this.$menu,"li").addClass(i.selected),this.vars.submenus&&this.$menu.find("ul ul").parent().addClass(i[s]+"_parent")},"setup:finish":function(){this.$menu.find("li").each(function(){e(this).attr("data-"+n["class"],e(this).attr("class"))})},"resize:before":function(){for(var s in e[t].fitters){var i=e[t].fitters[s];i&&i.reset&&i.reset.call(this,this.$items)}},resize:function(){if(this.$menu.is(":visible"))for(var s=0;s<this.opts.item.fit.length;s++){var i=e[t].fitters[this.opts.item.fit[s].fitter];if(i&&i.fit){var n=this.$items,a=this.opts.item.fit[s];a.items&&(n=n.filter(a.items)),a.order||(a.order=i.order),"rtl"==a.order&&(n=e(n.get().reverse())),i.fit.call(this,n,a)}}}},e[t].fitters[s]={reset:function(t){t.each(function(){e(this).attr("class",e(this).attr("data-"+n["class"]))})}},e[t].fitters.hide={order:"rtl",reset:function(e){e.removeClass(i.hidden)},fit:function(t,s){if(this._itemsOverflow()){var n=this,a="all"==s.order;t.each(function(){(a||n._itemsOverflow())&&e(this).addClass(i.hidden)})}}}}(jQuery),function(e){var t="dmenu",s="menu";e[t].options[s]={},e[t]._c.add(s);var i=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s]={setup:function(){this.$menu.addClass(i[s])}}}(jQuery),function(e){var t="dmenu",s="subitem";e[t].options[s]={},e[t].configuration.classNames[s]={},e[t]._c.add(s)}(jQuery),function(e){var t="dmenu",s="submenu";e[t].options[s]={},e[t]._c.add(s);var i=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s]={"setup:before":function(){this.vars.submenus=this.opts.submenu&&this.$menu.find("ul ul").length},setup:function(){this.vars.submenus&&this.$menu.addClass(i.menu+"_"+s)}},e[t].fitters.submenu={order:"rtl",reset:function(t){this.$menu.find("."+i.item+"_"+s+"-overflow").remove(),t.each(function(){e(this).removeClass(i.hidden)})},fit:function(t,n){if(this._itemsOverflow()){var a=this,o="all"==n.order,r="rtl"!=n.order,u=e('<li class="'+i.item+"_"+s+"-overflow "+i.item+'_parent"><span>…</span></li>');this.$menu.children("ul").append(u),u=e("<ul />").appendTo(u),t.each(function(){if(o||a._itemsOverflow()){var t=e(this).clone();e(this).addClass(i.hidden);for(var n=(t.attr("class")||"").split(" "),d=0;d<n.length;d++)n[d].slice(0,3)==i.dm("")&&n[d]!=i.selected&&n[d]!=i.item+"_parent"&&t.removeClass(n[d]);"function"==typeof a["icon-hide"]&&a["icon-hide"](t),t.find("li").removeClass(i.item+"_"+s+"-mega").removeClass(i.subitem+"_"+s+"-inline"),u[r?"append":"prepend"](t)}})}}}}(jQuery),function(e){var t="dmenu",s="item",i="align";e[t].configuration.classNames[s][i+"-right"]="AlignRight";var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={"resize:after":function(){this.opts.menu[i]&&"left"!=this.opts.menu[i]||this.$items.filter("."+n[s]+"_"+i+"-right").css("margin-left","").not("."+n.hidden).first().css("margin-left","auto")}}}(jQuery),function(e){var t="dmenu",s="item",i="bg";e[t].options[s][i]=!0;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.opts[s][i]&&this.$menu.addClass(n.menu+"_"+s+"-"+i)}}}(jQuery),function(e){var t="dmenu",s="item",i="border";e[t].options[s][i]=!1;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.opts[s][i]&&this.$menu.addClass(n.menu+"_"+s+"-"+i)}}}(jQuery),function(e){var t="dmenu",s="item",i="icon";e[t].configuration.classNames[s][i+"-hide"]="IconHidden",e[t].configuration.classNames[s][i+"-only"]="IconOnly";var n=e[t]._c,a=e[t]._d;e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.$items.children("a, span").children(".fa, .fab, .fas, .far, .fal, [data-icon]").each(function(){var t=e(this).parent(),a=t.parent();a.hasClass(n[s]+"_"+i+"-hide")||a.hasClass(n[s]+"_"+i+"-only")||a.hasClass(n[s]+"_"+i+"-text")||a.addClass(n[s]+"_"+i+"-"+(t.text().length?"text":"only"))})}},e[t].fitters[i+"-hide"]={order:"all",reset:function(e){this[i+"-hide"](e.filter("[data-"+a["class"]+'*="'+n[s]+"_"+i+'-hide"]')),this[i+"-only"](e.filter("[data-"+a["class"]+'*="'+n[s]+"_"+i+'-only"]')),this[i+"-text"](e.filter("[data-"+a["class"]+'*="'+n[s]+"_"+i+'-text"]'))},fit:function(t,o){if(this._itemsOverflow()){var r=this;t.filter("[data-"+a["class"]+'*="'+n[s]+"_"+i+'-text"]').each(function(){(o||r._itemsOverflow())&&r[i+"-hide"](e(this))})}}},e[t].fitters[i+"-only"]={order:"all",fit:function(t,o){if(this._itemsOverflow()){var r=this,u="all"==o.order;t.filter("[data-"+a["class"]+'*="'+n[s]+"_"+i+'-"]').each(function(){(u||r._itemsOverflow())&&r[i+"-only"](e(this))})}}},e[t].prototype[i+"-reset"]=function(e){e.filter("[data-"+a["class"]+'*="'+n[s]+"_"+i+'-"]').removeClass(n[s]+"_"+i+"-text").removeClass(n[s]+"_"+i+"-only").removeClass(n[s]+"_"+i+"-hide").find("del").contents().unwrap()},e[t].prototype[i+"-hide"]=function(t){this[i+"-reset"](t),t.filter("[data-"+a["class"]+'*="'+n[s]+"_"+i+'-"]').addClass(n[s]+"_"+i+"-hide").each(function(){var t=e(this).children("a, span");t.children(".fa, .fab, .fas, .far, .fal, [data-icon]").wrap('<del class="'+n.hidden+'" />')})},e[t].prototype[i+"-only"]=function(t){this[i+"-reset"](t),t.filter("[data-"+a["class"]+'*="'+n[s]+"_"+i+'-"]').addClass(n[s]+"_"+i+"-only").each(function(){var t=e(this).children("a, span");t.contents().not(t.children(".fa, .fab, .fas, .far, .fal, [data-icon]")).wrap('<del class="'+n.hidden+'" />')})},e[t].prototype[i+"-text"]=function(e){this[i+"-reset"](e),e.filter("[data-"+a["class"]+'*="'+n[s]+"_"+i+'-"]').addClass(n[s]+"_"+i+"-text")}}(jQuery),function(e){var t="dmenu",s="item",i="subindicator";e[t].options[s][i]=!1;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.opts[s][i]&&this.$menu.addClass(n.menu+"_"+s+"-"+i)}}}(jQuery),function(e){var t="dmenu",s="menu",i="align";e[t].options[s][i]=!1;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.opts[s][i]&&this.$menu.addClass(n[s]+"_"+i+"-"+this.opts[s][i])}}}(jQuery),function(e){var t="dmenu",s="menu",i="border";e[t].options[s][i]=!1;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.opts[s][i]&&this.$menu.addClass(n[s]+"_"+i)}}}(jQuery),function(e){var t="dmenu",s="menu",i="logo";e[t].options[s][i]=!0;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.opts[s][i]&&this.$menu.children().first().is("a[style*=background-image:]")&&this.$menu.addClass(n[s]+"_"+i)}}}(jQuery),function(e){var t="dmenu",s="subitem",i="bg";e[t].options[s][i]=!0;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.vars.submenus&&this.opts[s][i]&&this.$menu.addClass(n.menu+"_"+s+"-"+i)}}}(jQuery),function(e){var t="dmenu",s="subitem",i="border";e[t].options[s][i]=!0;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.vars.submenus&&this.opts[s][i]&&this.$menu.addClass(n.menu+"_"+s+"-"+i)}}}(jQuery),function(e){var t="dmenu",s="submenu",i="align";e[t].configuration.classNames.item[s+"-"+i+"-right"]="SubmenuAlignRight",e[t].configuration.classNames.subitem[s+"-"+i+"-right"]="SubSubmenuAlignRight";var n=e[t]._c,a=e[t]._d,o=e[t]._e,r=e[t]._g;e[t].prototype._submenuOverflowsLeft=function(e){return e.offset().left<0},e[t].prototype._submenuOverflowsRight=function(e){return e.offset().left+e.outerWidth()>r.$wndw.width()},e[t].code[s+"_"+i]={setup:function(){var t=this;!function(){var r=n.item+"_"+s+"-"+i+"-right",u=n.item+"_"+s+"-fullwidth";t.$menu.on(o.mouseenter," > ul > li."+n.item+"_parent",function(s){var i=e(this),n=i.children("ul");if(!i.hasClass(u)){var a=!1;i.hasClass(r)?t._submenuOverflowsLeft(n)&&(i.removeClass(r),a=!0):t._submenuOverflowsRight(n)&&(i.addClass(r),a=!0),a&&(t._submenuOverflowsLeft(n)||t._submenuOverflowsRight(n))&&i.addClass(u)}}),t.$menu.on(o.mouseleave," > ul > li."+n.item+"_parent",function(t){var s=e(this);s.is("[data-"+a["class"]+'*="'+r+'"]')?s.addClass(r):s.removeClass(r),s.is("[data-"+a["class"]+'*="'+u+'"]')||s.removeClass(u)})}(),function(){var r=n.subitem+"_"+s+"-"+i+"-right";t.$menu.on(o.mouseenter," li li."+n.item+"_parent",function(s){var i=e(this),n=i.children("ul");i.hasClass(r)?t._submenuOverflowsLeft(n)&&i.removeClass(r):t._submenuOverflowsRight(n)&&i.addClass(r)}),t.$menu.on(o.mouseleave,"li li."+n.item+"_parent",function(t){var s=e(this);s.is("[data-"+a["class"]+'*="'+r+'"]')?s.addClass(r):s.removeClass(r)})}()}}}(jQuery),function(e){var t="dmenu",s="submenu",i="arrow";e[t].options[s][i]=!1;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.vars.submenus&&this.opts[s][i]&&this.$menu.addClass(n.menu+"_"+s+"-"+i)},"setup:after":function(){this.vars.submenus&&this.$menu.hasClass(n.menu+"_item-border")&&this.$menu.removeClass(n.menu+"_"+s+"-"+i)}}}(jQuery),function(e){var t="dmenu",s="submenu",i="border";e[t].options[s][i]=!1;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.vars.submenus&&this.opts[s][i]&&this.$menu.addClass(n.menu+"_"+s+"-"+i)}}}(jQuery),function(e){var t="dmenu",s="submenu",i="fullwidth";e[t].configuration.classNames.item[s+"-"+i]="SubmenuFullwidth"}(jQuery),function(e){}(jQuery),function(e){var t="dmenu",s="submenu",i="inline";e[t].configuration.classNames.subitem[s+"-"+i]="SubSubmenuInline"}(jQuery),function(e){var t="dmenu",s="submenu",i="mega";e[t].configuration.classNames.item[s+"-"+i]="SubmenuMega";var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={"setup:after":function(){this.$menu.find("li").filter("."+n.item+"_"+s+"-"+i).children("ul").children("li").addClass(n.subitem+"_"+s+"-inline")}}}(jQuery),function(e){var t="dmenu",s="submenu",i="shadow";e[t].options[s][i]=!0;var n=e[t]._c;e[t]._d,e[t]._e,e[t]._g;e[t].code[s+"_"+i]={setup:function(){this.vars.submenus&&this.opts[s][i]&&this.$menu.addClass(n.menu+"_"+s+"-"+i)}}}(jQuery),function(e){var t="dmenu",s="submenu",i="tabs";e[t].configuration.classNames.item[s+"-"+i]="SubmenuTabs";var n=e[t]._c,a=e[t]._d,o=e[t]._e;e[t]._g;e[t].code[s+"_"+i]={"setup:after":function(){this.$items.filter("."+n.item+"_"+s+"-"+i).addClass(n.item+"_"+s+"-fullwidth")},setup:function(){var t=this;!function(){t.$menu.on(o.mouseenter," > ul > li."+n.item+"_"+s+"-"+i,function(a){var o=e(this).children("ul").children("."+n.selected);o.length||(o=e(this).children("ul").children("li").first()),t[s+"-"+i+"-set"](o)}),t.$menu.on(o.mouseleave," > ul > li."+n.item+"_"+s+"-"+i,function(n){t[s+"-"+i+"-reset"](e(this))}),t.$menu.on(o.mouseenter," > ul > li."+n.item+"_"+s+"-"+i+" > ul > li",function(n){t[s+"-"+i+"-set"](e(this))})}()}},e[t].prototype[s+"-"+i+"-reset"]=function(e){e.children("ul").children("li").removeClass(n.selected).filter("[data-"+a["class"]+'*="'+n.selected+'"]').addClass(n.selected)},e[t].prototype[s+"-"+i+"-set"]=function(e){var t=e.parent("ul"),s=e.children("ul");t.children("li").removeClass(n.selected),e.addClass(n.selected),t.css("minHeight",""),s.css("minHeight","");var i=s.outerHeight(),a=t.outerHeight(),o=Math.max(i,a);t.css({minHeight:o+parseInt(t.css("border-top-width"),10)}),s.css({minHeight:o})}}(jQuery); return true; }));

Related: See More


Questions / Comments: