Onsen Menu / List - Submenu

[internet2107]

I’ve a question about Menu, like this one.

<ul class="list">
 <li class="list__item list__item--chevron">Chevron Item</li>
 <li class="list__item list__item--chevron">Chevron Item</li>
</ul>

Is here someone, who built already a submenu inside, which also looks like accordion menu?

[internet2107]

If someone is interested, here one example.

<ons-sliding-menu menu-page="menu1.html" main-page="index.html" side="left" var="menu" type="overlay" max-slide-distance="350px" swipeable="true">
</ons-sliding-menu>


<ons-template id="menu1.html">
<ons-page id="example1" modifier="menu-page">
<ons-toolbar modifier="transparent"><div class="center">Menu</div>
</ons-toolbar>

<ons-list class="bottom-menu-list">
<ons-list-header>Text1</ons-list-header>
<ons-list-item id="Text1" modifier="chevron" ng-click="menu.toggleMenu()">
<ons-icon icon="fa-home"></ons-icon>
Text 1
</ons-list-item>

<ons-list-item id="Text2" modifier="chevron" ng-click="menu.toggleMenu()">
<ons-icon icon="fa-info"></ons-icon>
&nbsp;&nbsp;&nbsp;Text 2</ons-list-item>

<ons-list-item id="Text3" modifier="chevron" ng-click="menu.toggleMenu()">
    <ons-icon icon="fa-eur"></ons-icon>
&nbsp;&nbsp;&nbsp;Text 3
</ons-list-item>

<br>
<ons-list-header>Headertext 1</ons-list-header>
<div id='cssmenu'>
<ul>
<li class='has-sub list-item list__item--chevron'><a href='#'><span>Text klick1</span></a>
<ul>
<li id="text11" class="list-item list__item--chevron"><a href='javascript:menu.toggleMenu()'><span>Submenutext 1</span></a></li>
<li id="text12" class='list-item list__item--chevron'><a href='javascript:menu.toggleMenu()'><span>Submenutext 2</span></a></li>
<li id="text13" class="last list-item list__item--chevron"><a href='javascript:menu.toggleMenu()'><span>Submenutext 3</span></a></li>
</ul>
</li>
</ul>
</div>
</ons-list>
</ons-page>
</ons-template>

and here the CSS-Code

/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  position: relative;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #d4d4d4;
}
#cssmenu {
  border-bottom: none;
  border-top: none;
  line-height: 1;
}
#cssmenu a {
  line-height: 1;
}
#cssmenu > ul > li:first-child {
}
#cssmenu > ul > li:first-child > a {
  padding: 15px 10px;
  border-bottom: none;
  border-top: none;
}
#cssmenu > ul > li:first-child > a > span {
  padding: 0;
    background: transparent;
  color:black;
    border-bottom: none;
  border-top: none;
}
#cssmenu > ul > li:first-child:hover {
  background: transparent;
  color:black;
}

#cssmenu > ul > li {
  background: transparent;
  color:black;
  border-bottom: none;
  border-top: none;
}
#cssmenu > ul > li:hover {
  background: transparent;
  color:black;
}
#cssmenu > ul > li > a {
  display: block;
  background: transparent;
  color: black;
    border-bottom: none;
  border-top: none;
}
#cssmenu > ul > li > a > span {
  display: block;
  padding: 12px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 0px;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;

}
#cssmenu > ul > li.active {
  border-bottom: none;
  border-top: none;
}
#cssmenu > ul > li.has-sub > a span {
	  border-bottom: none;
  border-top: none;
}
#cssmenu > ul > li.has-sub.active > a span {
	  border-bottom: none;
  border-top: none;
}

#cssmenu ul ul {
  display: none;
  background: #f9f9f9;
    border-bottom: none;
  border-top: none;
}
#cssmenu ul ul li {
  padding: 0;
  border-bottom: none;
  border-top: none;
  background: transparent;
}
#cssmenu ul ul li:last-child {
  border-bottom: none;
}
#cssmenu ul ul a {
  padding: 10px 10px 10px 25px;
  display: block;
  color: black;
}
#cssmenu ul ul a:before {
  position: absolute;
  left: 10px;
  color: black;
    border-bottom: none;
  border-top: none;
}
#cssmenu ul ul a:hover {
  color: black;
}

and last but not least, the JS

 ( 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 );