can i add submenu on topbar ?

[zj0ch]

I want to add submenu on topbar, but i can't found example like it. Babylon can do it ?

[mert.sincan]

Is it into the drop-in panel? Exp; for "Profile", "Settings", "Messages" item etc.

[zj0ch]

I want to add submenu in setting and profile, but example not have.
I want to add submenu in submenu on topbar.

thank you!

[mert.sincan]

Babylon Layout doesn't support this feature. Maybe, you can write custom css style and JS codes to support it.

My Test;

Code: Select all

//CSS 
<style>
    .layout-wrapper .layout-topbar .topbar-menu > li > ul li > ul {
        list-style-type: none;
        padding-left: 0px;
        height: 0;
        overflow: hidden;
    }

    .layout-wrapper .layout-topbar .topbar-menu > li > ul li > ul a {
        padding-left: 28px;
    }

    .layout-wrapper .layout-topbar .topbar-menu > li > ul li.active-submenuitem > ul {
        height: auto;
    }

    @media screen and (max-width: 896px) {
        .layout-wrapper .layout-topbar .topbar-menu > li > ul li > ul a {
            padding-left: 44px;
        }
    }
</style>

Code: Select all

// in layout.js
// please add the following code to line 243

     this.topbarLinks.next('ul').find('> li > a').on('click', function(e) {
            var link = $(this), 
            item = link.parent(),
            submenu = item.next();
            
            $this.topbarMenuClick = true;
            
            item.siblings('.active-submenuitem').removeClass('active-submenuitem');
            if(submenu.length) {
                item.toggleClass('active-submenuitem');
            }
            
            if (link.attr('href') === '#') {
                e.preventDefault();
            }
        });

$(document.body).on('click', function () { // line 244
...

Code: Select all

//topbar.xhtml
...
<ul>
    <li>
        <a href="#">
            <i class="fa fa-fw fa-user"></i>
            <span>Profile</span>
        </a>
        <ul> <!-- Please add this tag for submenu -->
            <li>
                <a href="#">
                    <i class="fa fa-fw fa-home"></i>
                    <span>TEST</span>
                </a>
            </li>
        </ul> <!-- End -->
    </li>
    <li>
        <a href="#">
            <i class="fa fa-fw fa-cog"></i>
            <span>Settings</span>
        </a>
    </li>
    <li>
        <a href="#">
            <i class="fa fa-fw fa-envelope-o"></i>
            <span>Messages</span>
        </a>
    </li>
    ...
[code]