Adding menu using HTML

Post Reply
hmoussa
Posts: 5
Joined: 12 Nov 2018, 10:53

03 Dec 2018, 08:03

I tried to add the following code inside pa:tab

Code: Select all

<ul id="myUl1" class="navigation-menu">
                        <li role="menuitem" id="PIItems" >
                            <a href="#" class="ripplelink">
                                <span>Title11</span>
                                <span class="ink animate"></span>
                                <i class="material-icons">keyboard_arrow_down</i>
                            </a>
                            <ul role="menu">
                                <!-- repeated part -->
                                <li role="menuitem" id="PIItem1">
                                    <a class="ripplelink" href="http://#{request.serverName}:#{request.serverPort}#{request.contextPath}/main/page.xhtml" onclick="return false">
                                        <span>AA1</span>
                                        <span class="ink animate"></span>
                                    </a>                                    
                                </li>
                                <li role="menuitem" id="PItem2">
                                    <a class="ripplelink" href="http://#{request.serverName}:#{request.serverPort}#{request.contextPath}/main/page.xhtml" onclick="return false">
                                        <span>AA2</span>
                                        <span class="ink animate"></span>
                                    </a>                                    
                                </li>
                                                              
                            </ul>
                        </li>
                        
                        
                    </ul> 
but the menu not expanded when click the title
the purpose of doing this
because i plan to use ui:repeat with the li elements

so please advice

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

03 Dec 2018, 09:08

It is an expected behavior. pa:menu is a custom PrimeFaces component used on Barcelona Layout to provide menu. Therefore, JS codes depend on it. You need to change;

Code: Select all

PrimeFaces.widget.BarcelonaMenu = PrimeFaces.widget.BaseWidget.extend({ ...});

hmoussa
Posts: 5
Joined: 12 Nov 2018, 10:53

03 Dec 2018, 10:31

I found the js code
but i don't know what to do to make it work
could you please give example or explain more

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

03 Dec 2018, 15:19

Please remove PrimeFaces.widget.BarcelonaMenu = PrimeFaces.widget.BaseWidget.extend({ ...}); and add the following code instead of it ;

Code: Select all

var BarcelonaMenu = {
    
    init: function(menu) {
        this.jq = menu;
        this.menulinks = this.jq.find('a');
        this.expandedMenuitems = this.expandedMenuitems || [];     
        this.menuActive = false;
        this.topbarLinkClick = false;
        this.topbarMenuClick = false;
        this.nano = this.jq.closest('.nano');

        this._bindEvents();
        this.restoreMenuState();
    },
    
    _bindEvents: function() {
        var $this = this;
        
        this.menulinks.off('click').on('click', function(e) {
            var link = $(this),
            item = link.parent(),
            submenu = item.children('ul');
                                     
            if(item.hasClass('active-menuitem')) {
                if(submenu.length) {
                    $this.removeMenuitem(item.attr('id'));
                    item.removeClass('active-menuitem');
                    submenu.slideUp();
                }
            }
            else {
                $this.addMenuitem(item.attr('id'));
                $this.deactivateItems(item.siblings(), true);
                $this.activate(item);
            }
            
            setTimeout(function() {
                $this.nano.nanoScroller();
            }, 500);
                                    
            if(submenu.length) {
                e.preventDefault();
            }
        });
    },
         
    activate: function(item) {
        var submenu = item.children('ul');
        item.addClass('active-menuitem');

        if(submenu.length) {
            submenu.slideDown();
        }
    },
    
    deactivate: function(item) {
        var submenu = item.children('ul');
        item.removeClass('active-menuitem');
        
        if(submenu.length) {
            submenu.hide();
        }
    },
        
    deactivateItems: function(items, animate) {
        var $this = this;
        
        for(var i = 0; i < items.length; i++) {
            var item = items.eq(i),
            submenu = item.children('ul');
            
            if(submenu.length) {
                if(item.hasClass('active-menuitem')) {
                    var activeSubItems = item.find('.active-menuitem');
                    item.removeClass('active-menuitem');
                    item.find('.ink').remove();
                    
                    if(animate) {
                        submenu.slideUp('normal', function() {
                            $(this).parent().find('.active-menuitem').each(function() {
                                $this.deactivate($(this));
                            });
                        });
                    }
                    else {
                        submenu.hide();
                        item.find('.active-menuitem').each(function() {
                            $this.deactivate($(this));
                        });
                    }
                    
                    $this.removeMenuitem(item.attr('id'));
                    activeSubItems.each(function() {
                        $this.removeMenuitem($(this).attr('id'));
                    });
                }
                else {
                    item.find('.active-menuitem').each(function() {
                        var subItem = $(this);
                        $this.deactivate(subItem);
                        $this.removeMenuitem(subItem.attr('id'));
                    });
                }
            }
            else if(item.hasClass('active-menuitem')) {
                $this.deactivate(item);
                $this.removeMenuitem(item.attr('id'));
            }
        }
    },
    
    clearActiveItems: function() {
        var activeItems = this.jq.find('li.active-menuitem'),
        subContainers = activeItems.children('ul');

        activeItems.removeClass('active-menuitem');
        subContainers.hide();
    },
            
    removeMenuitem: function (id) {
        this.expandedMenuitems = $.grep(this.expandedMenuitems, function (value) {
            return value !== id;
        });
        this.saveMenuState();
    },
    
    addMenuitem: function (id) {
        if ($.inArray(id, this.expandedMenuitems) === -1) {
            this.expandedMenuitems.push(id);
        }
        this.saveMenuState();
    },
    
    saveMenuState: function() {
        $.cookie('barcelona_expandeditems', this.expandedMenuitems.join(','), {path: '/'});
    },
    
    clearMenuState: function() {
        $.removeCookie('barcelona_expandeditems', {path: '/'});
        this.clearMenuPinState();
    },
            
    restoreMenuState: function() {
        var menucookie = $.cookie('barcelona_expandeditems');
        if (menucookie) {
            this.expandedMenuitems = menucookie.split(',');
            for (var i = 0; i < this.expandedMenuitems.length; i++) {
                var id = this.expandedMenuitems[i];
                if (id) {
                    var menuitem = $("#" + this.expandedMenuitems[i].replace(/:/g, "\\:"));
                    menuitem.addClass('active-menuitem');
                    
                    var submenu = menuitem.children('ul');
                    if(submenu.length) {
                        submenu.show();
                    }
                }
            }
        }
    }
    
};

$(function() {
    var navigationMenus = $('.navigation-menu');
    for(var i=0; i < navigationMenus.length; i++) {
        BarcelonaMenu.init(navigationMenus.eq(i)); 
    }
});

hmoussa
Posts: 5
Joined: 12 Nov 2018, 10:53

04 Dec 2018, 14:53

thanks a lot for your support

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

05 Dec 2018, 14:32

You're welcome!

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests