Onsen Menu / List - Submenu
-
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?
-
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> Text 2</ons-list-item> <ons-list-item id="Text3" modifier="chevron" ng-click="menu.toggleMenu()"> <ons-icon icon="fa-eur"></ons-icon> 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 );