Monaca Onsen UI Discord Chat Github Repo

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