ACCORDION MENU-7
.
.
.
.
.
<style>
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {margin:0;padding:0;border:0; list-style: none;line-height:1;display:block;position:relative;}
#cssmenu {width: 240px;font:14px Arial;color:#FFF;}
#cssmenu ul ul {display: none;}
.align-right {float: right;}
#cssmenu > ul > li > a {padding:5px;border-left: 1px solid #FBBB22;border-right: 1px solid #FBBB22;border-top: 1px solid #FBBB22;cursor:pointer;z-index:2;font:13px arial;text-decoration:none;color:#FFF;background:#333;}
#cssmenu > ul > li > a:hover {color:#FFF;background: #173377;}
#cssmenu > ul > li.active > a {color:#FFF;background: #400030;}
#cssmenu > ul > li > a:hover {color:#FFF;background: #105105;}
#cssmenu > ul > li.open > a {border-bottom: 1px solid #FBBB22;}
#cssmenu > ul > li:last-child > a, #cssmenu > ul > li.last > a {border-bottom:0;}
.holder {width: 0;height: 0;position: absolute;top: 0;right: 0;}
.holder::after, .holder::before {display: block;position: absolute;content: "";width: 6px;height: 6px;right:5px;z-index:10; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg);transform: rotate(-135deg);}
.holder::after {top:5px;border-top:2px solid #FBBB22;border-left:2px solid #FBBB22;}
#cssmenu > ul > li > a:hover > span::after, #cssmenu > ul > li.active > a > span::after, #cssmenu > ul > li.open > a > span::after {border-color: #FBBB22;}
.holder::before {top:5px;border-top: 2px solid;border-left: 2px solid;border-top-color: inherit;border-left-color: inherit;}
#cssmenu ul ul li a {cursor: pointer;border-bottom:0;border-left: 1px solid #FBBB22;border-right: 1px solid #FBBB22;padding:5px;z-index: 1;text-decoration: none;font-size:13px;color:#FFF;background:#173374;}
#cssmenu ul ul li:hover > a, #cssmenu ul ul li.open > a, #cssmenu ul ul li.active > a {
background: #105105;color: #FFF;}
#cssmenu ul ul li:first-child > a {box-shadow: none;}
#cssmenu ul ul ul li:first-child > a {box-shadow:none;}
#cssmenu ul ul ul li a {padding-left:5px;}
#cssmenu > ul > li > ul > li:last-child > a, #cssmenu > ul > li > ul > li.last > a { border-bottom:0;}
#cssmenu > ul > li > ul > li.open:last-child > a, #cssmenu > ul > li > ul > li.last.open > a {border-bottom:0;}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {border-bottom: 0;}
#cssmenu ul ul li.has-sub > a::after {display: block;position: absolute;content: ""; width:5px;height:5px;right:5px;z-index:10;top:5px;border-top:2px solid #FBBB22;border-left: 2px solid #FBBB22; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}
#cssmenu ul ul li.active > a::after, #cssmenu ul ul li.open > a::after, #cssmenu ul ul li > a:hover::after {border-color: #FBBB22;}
</style>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>HOME</span></a></li>
<li class='active has-sub'><a href='#'><span>HORIZONTAL MENUS</span></a>
<ul>
<li class='last'><a href='#'><span>Horizontal menu-1</span></a></li>
<li class='last'><a href='#'><span>Horizontal menu-2</span></a></li>
<li class='last'><a href='#'><span>Horizontal menu-3</span></a></li>
<li class='last'><a href='#'><span>Horizontal menu-4</span></a></li>
<li class='last'><a href='#'><span>Horizontal menu-5</span></a></li>
</ul></li>
<li class='active has-sub'><a href='#'><span>VECTRICAL MENUS</span></a>
<ul>
<li class='last'><a href='#'><span>Vectrical menu-1</span></a></li>
<li class='last'><a href='#'><span>Vectrical menu-2</span></a></li>
<li class='last'><a href='#'><span>Vectrical menu-3</span></a></li>
<li class='last'><a href='#'><span>Vectrical menu-4</span></a></li>
<li class='last'><a href='#'><span>Vectrical menu-5</span></a></li>
</ul></li>
<li class='active has-sub'><a href='#'><span>ACCORDION MENUS</span></a>
<ul>
<li class='last'><a href='#'><span>Accordion menu-1</span></a></li>
<li class='last'><a href='#'><span>Accordion menu-2</span></a></li>
<li class='last'><a href='#'><span>Accordion menu-3</span></a></li>
<li class='last'><a href='#'><span>Accordion menu-4</span></a></li>
<li class='last'><a href='#'><span>Accordion menu-5</span></a></li>
</ul></li>
<li class='active has-sub'><a href='#'><span>MEGA MENUS</span></a>
<ul>
<li class='last'><a href='#'><span>Mega menu-1</span></a></li>
<li class='last'><a href='#'><span>Mega menu-2</span></a></li>
<li class='last'><a href='#'><span>Mega menu-3</span></a></li>
<li class='last'><a href='#'><span>Mega menu-4</span></a></li>
<li class='last'><a href='#'><span>Mega menu-5</span></a></li>
</ul></li>
<li class='active has-sub'><a href='#'><span>GALLERIES</span></a>
<ul>
<li class='has-sub'><a href='#'><span>PHOTO GALLERIES</span></a>
<ul>
<li class='last'><a href='#'><span>Photo gallery-1</span></a></li>
<li class='last'><a href='#'><span>Photo gallery-2</span></a></li>
<li class='last'><a href='#'><span>Photo gallery-3</span></a></li>
<li class='last'><a href='#'><span>Photo gallery-4</span></a></li>
<li class='last'><a href='#'><span>Photo gallery-5</span></a></li>
</ul></li></ul>
<ul>
<li class='has-sub'><a href='#'><span>VIDEO GALLERIES</span></a>
<ul>
<li class='last'><a href='#'><span>Video gallery-1</span></a></li>
<li class='last'><a href='#'><span>Video gallery-2</span></a></li>
<li class='last'><a href='#'><span>Video gallery-3</span></a></li>
<li class='last'><a href='#'><span>Video gallery-4</span></a></li>
<li class='last'><a href='#'><span>Video gallery-5</span></a></li>
</ul></li></ul></li>
<li><a href='#'><span>VIDEOS</span></a></li>
<li><a href='#'><span>FILES</span></a></li></ul>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
<script>
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();}});
$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
(function getColor() {
var r, g, b;
var textColor = $('#cssmenu').css('color');
textColor = textColor.slice(4);
r = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
g = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
b = textColor.slice(0, textColor.indexOf(')'));
var l = rgbToHsl(r, g, b);
if (l > 0.7) {
$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');}
else{
$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');}})();
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0;}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;}
h /= 6;}
return l;}});})(jQuery);
</script>
