{"id":"301","title":"Quartz Responsive Menu","structure":"basic","depth":"3","active":"1","terms":["drop-down","jquery","responsive"],"thumbnail":"301\/thumbnail\/css_menu_thumb.png","images":[],"css":"@main_color: [[main_color: #2b2f3a]];\r\n@menu_text_color: [[menu_text_color: #7a8189]];\r\n@menu_text_hover_color: [[menu_text_hover_color: #ffffff]];\r\n@menu_width: [[menu_width: auto]];\r\n@menu_font_size: [[menu_font_size: 14px]];\r\n\r\n@sub_menu_width : [[sub_menu_width: 130px]];\r\n@sub_menu_text_color : [[sub_menu_text_color: #9ea2a5]];\r\n@sub_menu_text_hover_color : [[sub_menu_text_hover_color: #8c9195]];\r\n@sub_menu_background_color: [[sub_menu_background_color: #ffffff]];\r\n@sub_menu_border_color: [[sub_menu_border_color: #eeeeee]];\r\n@sub_menu_font_size: [[sub_menu_font_size: 12px]];\r\n\r\n\r\n@sub_menu_background_hover_color: darken(@sub_menu_background_color, 5%);\r\n\r\n#cssmenu {\r\n\tposition: relative;\r\n\theight: 44px;\r\n\tbackground: @main_color;\r\n    width: @menu_width;\r\n}\r\n\r\n#cssmenu ul {\r\n\tlist-style: none;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tline-height: 1;\r\n}\r\n\r\n#cssmenu>ul {\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\tbackground: @main_color;\r\n\twidth: 100%;\r\n    z-index: 500;\r\n}\r\n\r\n#cssmenu:after, #cssmenu>ul:after {\r\n  content: \".\";\r\n  display: block;\r\n  clear: both;\r\n  visibility: hidden;\r\n  line-height: 0;\r\n  height: 0;\r\n}\r\n\r\n#cssmenu.align-right>ul>li {\r\n  float: right;\r\n}\r\n\r\n#cssmenu.align-center ul {\r\n  text-align: center;\r\n}\r\n\r\n#cssmenu.align-center ul ul {\r\n\ttext-align: left;\r\n}\r\n\r\n#cssmenu>ul>li {\r\n\tdisplay: inline-block;\r\n\tposition: relative;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n\r\n#cssmenu>ul>#menu-button {\r\n\tdisplay: none;\r\n}\r\n\r\n#cssmenu ul li a {\r\n\tdisplay: block;\r\n\tfont-family: Helvetica, sans-serif;\r\n\ttext-decoration: none;\r\n}\r\n\r\n#cssmenu>ul>li>a {\r\n\tfont-size: @menu_font_size;\r\n\tfont-weight: bold;\r\n\tpadding: 15px 20px;\r\n\tcolor: @menu_text_color;\r\n\ttext-transform: uppercase;\r\n\r\n\t-webkit-transition: color .25s ease-out;\r\n\t-moz-transition: color .25s ease-out;\r\n\t-ms-transition: color .25s ease-out;\r\n\t-o-transition: color .25s ease-out;\r\n\ttransition: color .25s ease-out;\r\n}\r\n\r\n#cssmenu>ul>li.has-sub>a {\r\n\tpadding-right: 32px;\r\n}\r\n\r\n#cssmenu>ul>li:hover>a {\r\n\tcolor: @menu_text_hover_color;\r\n}\r\n\r\n#cssmenu li.has-sub::after {\r\n\tdisplay: block;\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 0;\r\n}\r\n\r\n#cssmenu>ul>li.has-sub::after {\r\n\tright: 10px;\r\n\ttop: 15 + (@menu_font_size - 4)\/2;\r\n\tborder: 5px solid transparent;\r\n\tborder-top-color: @menu_text_color;\r\n}\r\n\r\n#cssmenu>ul>li:hover::after {\r\n\tborder-top-color: @menu_text_hover_color;\r\n}\r\n\r\n#indicatorContainer {\r\n\tposition: absolute;\r\n\theight: 12px;\r\n\twidth: 100%;\r\n\tbottom: 0px;\r\n\toverflow: hidden;\r\n\tz-index: -1;\r\n}\r\n\r\n#pIndicator {\r\n\tposition: absolute;\r\n\theight: 0;\r\n\twidth: 100%;\r\n\tborder: 12px solid transparent;\r\n\tborder-top-color: #2b2f3a;\r\n\tz-index: -2;\r\n\t-webkit-transition: left .25s ease;\r\n\t-moz-transition: left .25s ease;\r\n\t-ms-transition: left .25s ease;\r\n\t-o-transition: left .25s ease;\r\n\ttransition: left .25s ease;\r\n}\r\n\r\n#cIndicator {\r\n\tposition: absolute;\r\n\theight: 0;\r\n\twidth: 100%;\r\n\tborder: 12px solid transparent;\r\n\tborder-top-color: #2b2f3a;\r\n\ttop: -12px;\r\n\tright: 100%;\r\n\tz-index: -2;\r\n}\r\n\r\n#cssmenu ul ul {\r\n\tposition: absolute;\r\n\tleft: -9999px;\r\n\ttop: 56 + @menu_font_size;\r\n\topacity: 0;\r\n\t-webkit-transition: opacity .3s ease, top .25s ease;\r\n\t-moz-transition: opacity .3s ease, top .25s ease;\r\n\t-ms-transition: opacity .3s ease, top .25s ease;\r\n\t-o-transition: opacity .3s ease, top .25s ease;\r\n\ttransition: opacity .3s ease, top .25s ease;\r\n    z-index: 1000;\r\n}\r\n\r\n#cssmenu ul ul ul {\r\n\ttop: 37px;\r\n\tpadding-left: 5px;\r\n}\r\n\r\n#cssmenu ul ul li {\r\n\tposition: relative;\r\n}\r\n\r\n#cssmenu>ul>li:hover>ul {\r\n\tleft: auto;\r\n\ttop: 30 + @menu_font_size;\r\n\topacity: 1;\r\n}\r\n\r\n#cssmenu.align-right>ul>li:hover>ul {\r\n\tleft: auto;\r\n\tright: 0;\r\n\topacity: 1;\r\n}\r\n\r\n#cssmenu ul ul li:hover>ul {\r\n\tleft: (@sub_menu_width + 40);\r\n\ttop: 0;\r\n\topacity: 1;\r\n}\r\n\r\n#cssmenu.align-right ul ul li:hover>ul {\r\n\tleft: auto;\r\n\tright: (@sub_menu_width + 40);\r\n\ttop: 0;\r\n\topacity: 1;\r\n\tpadding-right: 5px;\r\n}\r\n\r\n#cssmenu ul ul li a {\r\n\twidth: @sub_menu_width;\r\n\tborder-bottom: 1px solid @sub_menu_border_color;\r\n\tpadding: 10px 20px;\r\n\tfont-size: @sub_menu_font_size;\r\n\tcolor: @sub_menu_text_color;\r\n\tbackground: @sub_menu_background_color;\r\n\t-webkit-transition: all .35s ease;\r\n\t-moz-transition: all .35s ease;\r\n\t-ms-transition: all .35s ease;\r\n\t-o-transition: all .35s ease;\r\n\ttransition: all .35s ease;\r\n}\r\n\r\n#cssmenu.align-right ul ul li a {\r\n\ttext-align: right;\r\n}\r\n\r\n#cssmenu ul ul li:hover>a {\r\n\tbackground: @sub_menu_background_hover_color;\r\n\tcolor: @sub_menu_text_hover_color;\r\n}\r\n\r\n#cssmenu ul ul li:last-child>a, #cssmenu ul ul li.last>a {\r\n\tborder-bottom: 0;\r\n}\r\n\r\n#cssmenu>ul>li>ul::after {\r\n\tcontent: '';\r\n\tborder: 6px solid transparent;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tborder-bottom-color: @sub_menu_background_color;\r\n\tposition: absolute;\r\n\ttop: -12px;\r\n\tleft: 30px;\r\n}\r\n\r\n#cssmenu.align-right>ul>li>ul::after {\r\n\tleft: auto;\r\n\tright: 30px;\r\n}\r\n\r\n#cssmenu ul ul li.has-sub::after {\r\n\tborder: 4px solid transparent;\r\n\tborder-left-color: @sub_menu_text_color;\r\n\tright: 10px;\r\n\ttop: 10 + @sub_menu_font_size\/2 - 4;\r\n\t-moz-transition: all .2s ease;\r\n\t-ms-transition: all .2s ease;\r\n\t-o-transition: all .2s ease;\r\n\ttransition: all .2s ease;\r\n\t-webkit-transition: -webkit-transform .2s ease, right .2s ease;\r\n}\r\n\r\n#cssmenu.align-right ul ul li.has-sub::after {\r\n\tborder-left-color: transparent;\r\n\tborder-right-color: @sub_menu_text_color;\r\n\tright: auto;\r\n\tleft: 10px;\r\n}\r\n\r\n#cssmenu ul ul li.has-sub:hover::after {\r\n\tborder-left-color: @sub_menu_background_color;\r\n\tright: -5px;\r\n\t-webkit-transform: rotateY(180deg);\r\n\t-ms-transform: rotateY(180deg);\r\n\t-moz-transform: rotateY(180deg);\r\n\t-o-transform: rotateY(180deg);\r\n\ttransform: rotateY(180deg);\r\n}\r\n\r\n#cssmenu.align-right ul ul li.has-sub:hover::after {\r\n\tborder-right-color: @sub_menu_background_color;\r\n\tborder-left-color: transparent;\r\n\tleft: -5px;\r\n\t-webkit-transform: rotateY(180deg);\r\n\t-ms-transform: rotateY(180deg);\r\n\t-moz-transform: rotateY(180deg);\r\n\t-o-transform: rotateY(180deg);\r\n\ttransform: rotateY(180deg);\r\n}\r\n\r\n@media all and (max-width: 800px), \r\nonly screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 1024px),\r\nonly screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 1024px),\r\nonly screen and (     -o-min-device-pixel-ratio: 2\/1)    and (max-width: 1024px),\r\nonly screen and (        min-device-pixel-ratio: 2)      and (max-width: 1024px),\r\nonly screen and (                min-resolution: 192dpi) and (max-width: 1024px),\r\nonly screen and (                min-resolution: 2dppx)  and (max-width: 1024px) {\r\n    #cssmenu {\r\n    \twidth: auto;\r\n    }\r\n\r\n    #cssmenu.align-center ul {\r\n\t\ttext-align: left;\r\n    }\r\n\r\n    #cssmenu.align-right>ul>li {\r\n\t\tfloat: none;\r\n    }\r\n\r\n\t#cssmenu ul {\r\n\t\twidth: auto;\r\n\t}\r\n\r\n\r\n\t#cssmenu .submenuArrow, #cssmenu #indicatorContainer {\r\n\t\tdisplay: none;\r\n\t}\r\n\t\r\n\t#cssmenu>ul {\r\n\t\theight: auto;\r\n\t\tdisplay: block;\r\n\t}\r\n\r\n\t#cssmenu>ul>li {\r\n\t\tfloat: none;\r\n\t}\r\n\r\n\t#cssmenu li, #cssmenu>ul>li {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t#cssmenu ul ul, \r\n\t#cssmenu ul ul ul, \r\n\t#cssmenu ul>li:hover>ul, \r\n\t#cssmenu ul ul>li:hover>ul,\r\n\t#cssmenu.align-right ul ul, \r\n\t#cssmenu.align-right ul ul ul, \r\n\t#cssmenu.align-right ul>li:hover>ul, \r\n\t#cssmenu.align-right ul ul>li:hover>ul {\r\n\t\tposition: relative;\r\n\t\tleft: auto;\r\n\t\ttop: auto;\r\n\t\topacity: 1;\r\n\t\tpadding-left: 0;\r\n\t\tpadding-right: 0;\r\n\t\tright: auto;\r\n\t}\r\n\r\n\t#cssmenu ul .has-sub::after {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t#cssmenu ul li a {\r\n\t\tpadding: 12px 20px;\r\n\t}\r\n\r\n\t#cssmenu ul ul li a {\r\n\t\tborder: 0;\r\n\t\tbackground: none;\r\n\t\twidth: auto;\r\n\t\tpadding: 8px 35px;\r\n\t}\r\n\r\n\t#cssmenu.align-right ul ul li a {\r\n\t\ttext-align: left;\r\n\t}\r\n\r\n\t#cssmenu ul ul li:hover>a {\r\n\t\tbackground: none;\r\n\t\tcolor: @sub_menu_text_hover_color;\r\n\t}\r\n\r\n\t#cssmenu ul ul ul a {\r\n\t\tpadding: 8px 50px;\r\n\t}\r\n\r\n\t#cssmenu ul ul ul ul a {\r\n\t\tpadding: 8px 65px;\r\n\t}\r\n\r\n\t#cssmenu ul ul ul ul ul a {\r\n\t\tpadding: 8px 80px;\r\n\t}\r\n\r\n\t#cssmenu ul ul ul ul ul ul a {\r\n\t\tpadding: 8px 95px;\r\n\t}\r\n\r\n\t#cssmenu>ul>#menu-button {\r\n\t\tdisplay: block;\r\n\t\tcursor: pointer;\r\n\t}\r\n\r\n\t#cssmenu #menu-button>a {\r\n\t\tpadding: 14px 20px;\r\n\t}\r\n\r\n\t#cssmenu ul.open li, #cssmenu>ul.open>li {\r\n\t\tdisplay: block;\r\n\t}\r\n\r\n\t#cssmenu>ul.open>li#menu-button>a {\r\n\t\tcolor: #fff;\r\n\t\tborder-bottom: 1px solid rgba(150, 150, 150, .1)\r\n\t}\r\n\r\n\t#cssmenu ul ul::after {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t#cssmenu #menu-button::after {\r\n\t\tdisplay: block;\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\theight: 3px;\r\n\t\twidth: 22px;\r\n\t\tborder-top: 2px solid @menu_text_color;\r\n\t\tborder-bottom: 2px solid @menu_text_color;\r\n\t\tright: 20px;\r\n\t\ttop: 15px;\r\n\t}\r\n\r\n\t#cssmenu #menu-button::before {\r\n\t\tdisplay: block;\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\theight: 3px;\r\n\t\twidth: 22px;\r\n\t\tborder-top: 2px solid @menu_text_color;\r\n\t\tright: 20px;\r\n\t\ttop: 25px;\r\n\t}\r\n\r\n\t#cssmenu ul.open #menu-button::after, #cssmenu ul.open #menu-button::before {\r\n\t\tborder-color: #fff;\r\n\t}\r\n}","jquery":"$('#cssmenu').prepend('<div id=\"indicatorContainer\"><div id=\"pIndicator\"><div id=\"cIndicator\"><\/div><\/div><\/div>');\r\n    var activeElement = $('#cssmenu>ul>li:first');\r\n\r\n    $('#cssmenu>ul>li').each(function() {\r\n        if ($(this).hasClass('active')) {\r\n            activeElement = $(this);\r\n        }\r\n    });\r\n\r\n\r\n\tvar posLeft = activeElement.position().left;\r\n\tvar elementWidth = activeElement.width();\r\n\tposLeft = posLeft + elementWidth\/2 -6;\r\n\tif (activeElement.hasClass('has-sub')) {\r\n\t\tposLeft -= 6;\r\n\t}\r\n\r\n\t$('#cssmenu #pIndicator').css('left', posLeft);\r\n\tvar element, leftPos, indicator = $('#cssmenu pIndicator');\r\n\t\r\n\t$(\"#cssmenu>ul>li\").hover(function() {\r\n        element = $(this);\r\n        var w = element.width();\r\n        if ($(this).hasClass('has-sub'))\r\n        {\r\n        \tleftPos = element.position().left + w\/2 - 12;\r\n        }\r\n        else {\r\n        \tleftPos = element.position().left + w\/2 - 6;\r\n        }\r\n\r\n        $('#cssmenu #pIndicator').css('left', leftPos);\r\n    }\r\n    , function() {\r\n    \t$('#cssmenu #pIndicator').css('left', posLeft);\r\n    });\r\n\r\n\t$('#cssmenu>ul').prepend('<li id=\"menu-button\"><a>Menu<\/a><\/li>');\r\n\t$( \"#menu-button\" ).click(function(){\r\n    \t\tif ($(this).parent().hasClass('open')) {\r\n    \t\t\t$(this).parent().removeClass('open');\r\n    \t\t}\r\n    \t\telse {\r\n    \t\t\t$(this).parent().addClass('open');\r\n    \t\t}\r\n    \t});"}