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

Log in to reply