Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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 );