{"id":"311","title":"Modern Accordion Menu","structure":"basic","depth":"3","active":"1","terms":["vertical","jquery","accordion"],"thumbnail":"311\/thumbnail\/css_menu_thumb.png","images":[],"css":"@main_color:  [[main_color:  #222222]];\r\n@menu_width: [[menu_width: 250px]];\r\n@menu_font_size: [[menu_font_size: 16px]];\r\n@menu_text_color : [[menu_text_color : #dddddd]];\r\n@menu_text_hover_color:[[menu_text_hover_color: #FFFFFF]];\r\n@menu_border_color : [[menu_border_color : #000000]];\r\n@sub_menu_font_size : [[sub_menu_font_size : 15px]];\r\n@sub_menu_text_color : [[sub_menu_text_color : #777777]];\r\n@sub_menu_text_hover_color : [[sub_menu_text_hover_color : #666666]];\r\n@sub_menu_background_color : [[sub_menu_background_color : #f1f1f1]];\r\n@sub_menu_border_color : [[sub_menu_border_color : #dddddd]];\r\n\r\n@menu_hover: darken(@main_color, 5%);\r\n@submenu_hover: darken(@sub_menu_background_color, 5%);\r\n\r\n@import url(http:\/\/fonts.googleapis.com\/css?family=Roboto+Condensed:400,300);\r\n\r\n#cssmenu {\r\n\tposition: relative;\r\n\tmargin: 0;\r\n\tfont-family: 'Roboto Condensed';\r\n\tline-height: 1;\r\n\twidth: @menu_width;\r\n}\r\n\r\n.align-right {\r\n\tfloat: right;\r\n}\r\n\r\n#cssmenu ul {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tlist-style: none;\r\n\tdisplay: block;\r\n}\r\n\r\n#cssmenu ul li {\r\n\tposition: relative;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n\r\n#cssmenu ul li a {\r\n\ttext-decoration: none;\r\n\tcursor: pointer;\r\n}\r\n\r\n#cssmenu>ul>li>a {\r\n\tcolor: @menu_text_color;\r\n\ttext-transform: uppercase;\r\n\tdisplay: block;\r\n\tpadding: 20px;\r\n\tborder-top: 1px solid @menu_border_color;\r\n\tborder-left: 1px solid @menu_border_color;\r\n\tborder-right: 1px solid @menu_border_color;\r\n\tbackground: @main_color;\r\n\tbox-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);\r\n\tletter-spacing: 1px;\r\n\tfont-size: @menu_font_size;\r\n\tfont-weight: 300;\r\n\t-webkit-transition: all .25s ease-in;\r\n\t-moz-transition: all .25s ease-in;\r\n\t-ms-transition: all .25s ease-in;\r\n\t-o-transition: all .25s ease-in;\r\n\ttransition: all .25s ease-in;\r\n\tposition: relative;\r\n\r\n}\r\n\r\n#cssmenu>ul>li:first-child>a {\r\n\tborder-top-left-radius: 3px;\r\n\tborder-top-right-radius: 3px;\r\n}\r\n\r\n#cssmenu>ul>li:last-child>a {\r\n\tborder-bottom-left-radius: 3px;\r\n\tborder-bottom-right-radius: 3px;\r\n\tborder-bottom: 1px solid @menu_border_color;\r\n}\r\n\r\n#cssmenu>ul>li:hover>a, #cssmenu>ul>li.open>a, #cssmenu>ul>li.active>a {\r\n\tbackground: @menu_hover;\r\n\tcolor: @menu_text_hover_color;\r\n}\r\n\r\n#cssmenu ul>li.has-sub>a::after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tborder-top: 13px solid @menu_border_color;\r\n\tborder-botom: 13px solid transparent;\r\n\tborder-left: (@menu_width\/2) solid transparent;\r\n\tborder-right: (@menu_width\/2) solid transparent;\r\n\tleft: 0;\r\n\tbottom: -13px;\r\n\tbottom: 0px;\r\n\tz-index: 1;\r\n\topacity: 0;\r\n\t-webkit-transition: all .2s ease;\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}\r\n\r\n#cssmenu ul>li.has-sub>a::before {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tborder-top: 13px solid @menu_hover;\r\n\tborder-botom: 13px solid transparent;\r\n\tborder-left: (@menu_width\/2) solid transparent;\r\n\tborder-right: (@menu_width\/2) solid transparent;\r\n\tleft: 0;\r\n\tbottom: -12px;\r\n\tbottom: -1px;\r\n\tz-index: 3;\r\n\topacity: 0;\r\n\t-webkit-transition: all .2s ease;\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}\r\n\r\n#cssmenu ul>li.has-sub::after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 0;\r\n\tborder: 7px solid transparent;\r\n\tborder-top-color: @menu_text_color;\r\n\tz-index: 2;\r\n\tright: 20px;\r\n\ttop: 20 + (@menu_font_size - 7)\/2;\r\n\tpointer-events: none;\r\n}\r\n\r\n#cssmenu ul>li:hover::after, #cssmenu ul>li.active::after, #cssmenu ul>li.open::after {\r\n\tborder-top-color: @menu_text_hover_color;\r\n}\r\n\r\n#cssmenu ul>li.has-sub.open>a::after {\r\n\topacity: 1;\r\n\tbottom: -13px;\r\n}\r\n\r\n#cssmenu ul>li.has-sub.open>a::before {\r\n\topacity: 1;\r\n\tbottom: -12px;\r\n}\r\n\r\n#cssmenu ul ul {\r\n\tdisplay: none;\r\n}\r\n\r\n#cssmenu ul ul li {\r\n\tborder-left: 1px solid #ccc;\r\n\tborder-right: 1px solid #ccc;\r\n}\r\n\r\n#cssmenu ul ul li a {\r\n\tbackground: @sub_menu_background_color;\r\n\tdisplay: block;\r\n\tposition: relative;\r\n\tfont-size: @sub_menu_font_size;\r\n\tpadding: 14px 20px;\r\n\tborder-bottom: 1px solid @sub_menu_border_color;\r\n\tcolor: @sub_menu_text_color;\r\n\tfont-weight: 300;\r\n\t-webkit-transition: all .25s ease-in;\r\n\t-moz-transition: all .25s ease-in;\r\n\t-ms-transition: all .25s ease-in;\r\n\t-o-transition: all .25s ease-in;\r\n\ttransition: all .25s ease-in;\r\n}\r\n\r\n#cssmenu ul ul li:first-child>a {\r\n\tpadding-top: 18px;\r\n}\r\n\r\n#cssmenu ul ul ul li {\r\n\tborder: 0;\r\n}\r\n\r\n#cssmenu ul ul li:hover>a, #cssmenu ul ul li.open>a, #cssmenu ul ul li.active>a {\r\n\tbackground: @submenu_hover;\r\n\tcolor: @sub_menu_text_hover_color;\r\n}\r\n\r\n#cssmenu ul ul>li.has-sub>a::after {\r\n\tborder-top: 13px solid @sub_menu_border_color;\r\n}\r\n\r\n#cssmenu ul ul>li.has-sub>a::before {\r\n\tborder-top: 13px solid @submenu_hover;\r\n}\r\n\r\n#cssmenu ul ul ul li a {\r\n\tpadding-left: 30px;\r\n}\r\n\r\n#cssmenu ul ul>li.has-sub::after {\r\n\ttop: 14 + (@sub_menu_font_size - 6)\/2;\r\n\tborder-width: 6px;\r\n\tborder-top-color: @sub_menu_text_color;\r\n}\r\n\r\n#cssmenu ul ul>li:hover::after, #cssmenu ul ul>li.active::after, #cssmenu ul ul>li.open::after {\r\n\tborder-top-color: @sub_menu_text_hover_color;\r\n}\r\n\r\n","jquery":"$('#cssmenu li.has-sub>a').on('click', function(){\r\n\t\t$(this).removeAttr('href');\r\n\t\tvar element = $(this).parent('li');\r\n\t\tif (element.hasClass('open')) {\r\n\t\t\telement.removeClass('open');\r\n\t\t\telement.find('li').removeClass('open');\r\n\t\t\telement.find('ul').slideUp();\r\n\t\t}\r\n\t\telse {\r\n\t\t\telement.addClass('open');\r\n\t\t\telement.children('ul').slideDown();\r\n\t\t\telement.siblings('li').children('ul').slideUp();\r\n\t\t\telement.siblings('li').removeClass('open');\r\n\t\t\telement.siblings('li').find('li').removeClass('open');\r\n\t\t\telement.siblings('li').find('ul').slideUp();\r\n\t\t}\r\n\t});"}