menu always open

marcelocaser · 22 Dec 2015, 17:18

Hi again,

There is some class that leaves always open menu? I use the top menu and I would leave it always open . It's possible?

thank you!

22 Dec 2015, 17:56

Hi,
I think menu always can not be open, because you should think mobile mode. I think Desktop-> always open, Mobile -> open and close. Do you agree with me?
if you want, I can create a workaround.

marcelocaser · 22 Dec 2015, 18:43

Yes I agree with you. I find it interesting to create a solution as you said. Always open for Desktop and Mobile is always closed. What will it cost this solution?

Another question, when I click the menu, using Desktop, for example, Adamantium Theme -> Sample Page, the page opens, but when I go back in the menu, this is opened. It would be interesting close.

22 Dec 2015, 22:29

Adamantium menu has statefull feature. So, after you click a menuitem, it is open in another page as you said. You need to change layout.js. I will change layout.js for your two questions.

23 Dec 2015, 00:19

Can you please try my changes on Mobile and Desktop?

full layout.js

Code: Select all

// FNC for detecting for click outside of any elements ============== 
$.fn.clickOff = function(callback, selfDestroy) {
		var clicked = false;
		var parent = this;
		var destroy = selfDestroy || true;
		
		parent.click(function() {
			clicked = true;
		});
		
		$(document).click(function(event) { 
			if (!clicked) {
				callback(parent, event);
			}
			if (destroy) {
			};
			clicked = false;
		});
	};
	
/** 
 * PrimeFaces Adamantium Layout
 */
var Adamantium = {
  
    init: function() {
        this.menuWrapper = $('#layout-menu-cover');
        this.menu = this.menuWrapper.find('ul.layout-menu');
        this.menulinks = this.menu.find('a.menulink');
        this.menuButton = $('#menu-button');
        this.topMenu = $('#top-menu');
        this.topMenuButton = $('#topmenu-button');
        this.expandedMenuitems = this.expandedMenuitems||[];

        this.menuButton.addClass('fix-topmenu');
        this.menuWrapper.addClass('fix-topmenu');
        this.menuWrapper.removeClass('Animated05');
        this.leftMenuMode = false;
        
        this.bindEvents();
    },
    
    bindEvents: function() {
        var $this = this;
        
        this.menuButton.on('click',function() {
            $this.menuButtonClick = true;
            
            if($this.menuWrapper.hasClass('active-menu')){
                $this.menuButton.removeClass('active-menu');
                $this.menuWrapper.removeClass('active-menu');
            }
            else{
                $this.menuButton.addClass('active-menu');
                $this.menuWrapper.addClass('active-menu');
            }
        });
       
        this.menulinks.on('click',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent();
            
            if(menuitem.hasClass('active-menu-parent')) {
                menuitem.removeClass('active-menu-parent');
                menuitemLink.removeClass('active-menu').next('ul').removeClass('active-menu');
                $this.removeMenuitem(menuitem.attr('id'));
            }
            else {
                var activeSibling = menuitem.siblings('.active-menu-parent');
                if(activeSibling.length) {
                    activeSibling.removeClass('active-menu-parent');
                    $this.removeMenuitem(activeSibling.attr('id'));

                    activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu');
                    activeSibling.find('li.active-menu-parent').each(function() {
                        var menuitem = $(this);
                        menuitem.removeClass('active-menu-parent');
                        $this.removeMenuitem(menuitem.attr('id'));
                    });
                }

                menuitem.addClass('active-menu-parent');
                menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
                $this.addMenuitem(menuitem.attr('id'));
            }

            if(menuitemLink.next().is('ul')) {
                e.preventDefault();
            }
            else {
                $this.menuButton.removeClass('active-menu');
                $this.menuWrapper.removeClass('active-menu');
            }

            $this.saveMenuState();
            
            if($this.perfectScrollbar) {
                $this.menuWrapper.perfectScrollbar("update");
            }
        })
        .clickOff(function(e) {
            if($this.menuButtonClick) {
                $this.menuButtonClick = false;
            } else {
                var activeMenuParent = $this.menu.find('.active-menu-parent'),
                    activeMenu = activeMenuParent.find('.active-menu');
                    
                activeMenuParent.removeClass('active-menu-parent');
                activeMenu.removeClass('active-menu');
                
                if($this.leftMenuMode) {
                    $this.menuButton.removeClass('active-menu'); // added for closing on Mobile 
                    $this.menuWrapper.removeClass('active-menu'); // added for closing on Mobile
                }
            }
        });
        
        this.topMenuButton.on('click',function() {
            $this.topMenuButtonClick = true;
            
            if($this.topMenu.hasClass('active-menu')){
                $this.topMenuButton.removeClass('active-menu');
                $this.topMenu.removeClass('active-menu');
            }
            else {
                $this.topMenuButton.addClass('active-menu');
                $this.topMenu.addClass('active-menu');
            }
        });
        
        //topbar
        this.topMenu.find('a').click(function(e) {
            var link = $(this),
            submenu = link.next('ul');
            
            if(submenu.length) {
                if(submenu.hasClass('active-menu')) {
                    submenu.removeClass('active-menu');
                    link.removeClass('active-menu');
                    $this.topMenuActive = false;
                }
                else {
                    $this.topMenu.find('> li > ul.active-menu').removeClass('active-menu').prev('a').removeClass('active-menu');
                    link.addClass('active-menu').next('ul').addClass('active-menu');
                    $this.topMenuActive = true;
                }
            }
            else {
                if($(e.target).is(':not(:input)')) {
                    $this.topMenu.find('.active-menu').removeClass('active-menu');
                    $this.topMenuActive = false;
                }
            }
        })
        .on('mouseenter', function() {
            var link = $(this);
    
            if(link.parent().parent().is($this.topMenu)&&$this.topMenuActive&&document.documentElement.clientWidth > 960) {
                var submenu = link.next('ul');
                
                $this.topMenu.find('.active-menu').removeClass('active-menu');
                link.addClass('active-menu');
                
                if(submenu.length) {
                    submenu.addClass('active-menu');
                }
            }
        });
        
        this.topMenu.find('li').clickOff(function() {
            if($this.topMenuButtonClick) {
                $this.topMenuButtonClick = false;
            }
            else {
                $this.topMenuButton.removeClass('active-menu');
                $this.topMenu.removeClass('active-menu');
                $this.topMenu.find('.active-menu').removeClass('active-menu');
                $this.topMenuActive = false;
            }   
        });
        
        if(!this.isMobile()) {
            if(this.menuWrapper.hasClass('layout-menu-cover-left')) {
                this.perfectScrollbar = this.menuWrapper.perfectScrollbar({suppressScrollX: true});
            }
            else {
                var win = $(window);
                if(win.width() <= 960 || win.height() <= 560) {
                    this.perfectScrollbar = this.menuWrapper.perfectScrollbar({suppressScrollX: true});
                    
                    $this.menuButton.removeClass('active-menu'); // added for closing on Mobile 
                    $this.menuWrapper.removeClass('active-menu'); // added for closing on Mobile
                    $this.leftMenuMode = true; // added for clickOff on Mobile
                }
                
                win.on('resize', function() {
                    if(win.width() <= 960 || win.height() <= 560) {
                        if(!$this.perfectScrollbar) {
                            $this.perfectScrollbar = $this.menuWrapper.perfectScrollbar({suppressScrollX: true});
                        }
                        
                        $this.menuButton.removeClass('active-menu'); // added for closing on Mobile 
                        $this.menuWrapper.removeClass('active-menu'); // added for closing on Mobile
                        $this.leftMenuMode = true; //added for clickOff on Mobile
                    }
                    else {
                        if($this.perfectScrollbar)  {
                            $this.perfectScrollbar.perfectScrollbar('destroy');
                            $this.perfectScrollbar = null;
                        }
                    }
                });
            }
        }
        else {    
            this.menuWrapper.removeClass('Animated05');
            
            if(this.menuWrapper.hasClass('layout-menu-cover-left')) {
                this.menuWrapper.css('overflow-y', 'auto');
            }
            else {
                var win = $(window);
                if(win.width() <= 960 || win.height() <= 560) {
                    this.menuWrapper.css('overflow-y', 'auto');
                    $this.leftMenuMode = true; //added for clickOff on Mobile
                }
            
                win.on('resize', function() {
                    if(win.width() <= 960 || win.height() <= 560) {
                        $this.menuWrapper.css('overflow-y', 'auto');
                        $this.leftMenuMode = true; //added for clickOff on Mobile
                    }
                    else {
                        $this.menuWrapper.css('overflow-y', 'visible');
                    }
                });
            }  
        }
    },
    
    removeMenuitem: function(id) {        
        /* Remove stateful */
    },
    
    addMenuitem: function(id) {
        /* Remove stateful */
    },
    
    saveMenuState: function() {
        /* Remove stateful */
    },
    
    clearMenuState: function() {
        /* Remove stateful */
    },
    
    restoreMenuState: function() {
        /* Remove stateful */
    },
    
    isMobile: function() {
        return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent));
    },
    
    changeMenuLayout: function(orientation) {
        var $this = this;
        if(orientation === 'top') {
            this.menuWrapper.addClass('layout-menu-cover-top').removeClass('layout-menu-cover-left');
        } 
        else if(orientation === 'left') {
            this.menuWrapper.removeClass('Animated05 layout-menu-cover-top').addClass('layout-menu-cover-left');
            if(!$this.isMobile()) {
                setTimeout(function() {
                    $this.menuWrapper.addClass('Animated05');
                }, 100);
                
                this.perfectScrollbar = this.menuWrapper.perfectScrollbar({suppressScrollX: true});
            }
        }
    }
};

$(function() {
   Adamantium.init();
});

And please add this css code in your css file or adamantium-layout.less;

Code: Select all

/* Large desktop */
@media (min-width: 961px){
     .layout-menu-cover-top.fix-topmenu{margin-top:80px; height:auto; opacity:1; overflow:visible;}
    #menu-button{display: none;}
    #layout-portlets-cover{padding-top: 145px !important;}
}

@media (min-height:320px) and (max-height:560px) and (min-width: 961px) {
    #menu-button{display: initial;}
    .layout-menu-cover-top.fix-topmenu{width:300px; height:100%; margin-left:-300px; margin-top:0px;}
    .layout-menu-cover-top.fix-topmenu.active-menu{margin-left:0px; height:100%; margin-top:0px; overflow:hidden;}
    #layout-portlets-cover{padding-top: 90px !important;}
}

marcelocaser · 23 Dec 2015, 13:08

guy, good job. It works as I wanted. Thank you! But we have a problem. See the images below.

----------------------------------------------------------------------------------------------------------------------------------------------

As you can see. In mobile, the menu is not shown.

marcelocaser · 23 Dec 2015, 13:43

guy, I think confuse me. In solution, on desktop, the menu will always stay open or not? As shown in the image below.

aragorn wrote:Can you please try my changes on Mobile and Desktop?

full layout.js

Code: Select all

// FNC for detecting for click outside of any elements ============== 
$.fn.clickOff = function(callback, selfDestroy) {
		var clicked = false;
		var parent = this;
		var destroy = selfDestroy || true;
		
		parent.click(function() {
			clicked = true;
		});
		
		$(document).click(function(event) { 
			if (!clicked) {
				callback(parent, event);
			}
			if (destroy) {
			};
			clicked = false;
		});
	};
	
/** 
 * PrimeFaces Adamantium Layout
 */
var Adamantium = {
  
    init: function() {
        this.menuWrapper = $('#layout-menu-cover');
        this.menu = this.menuWrapper.find('ul.layout-menu');
        this.menulinks = this.menu.find('a.menulink');
        this.menuButton = $('#menu-button');
        this.topMenu = $('#top-menu');
        this.topMenuButton = $('#topmenu-button');
        this.expandedMenuitems = this.expandedMenuitems||[];

        this.menuButton.addClass('fix-topmenu');
        this.menuWrapper.addClass('fix-topmenu');
        this.menuWrapper.removeClass('Animated05');
        this.leftMenuMode = false;
        
        this.bindEvents();
    },
    
    bindEvents: function() {
        var $this = this;
        
        this.menuButton.on('click',function() {
            $this.menuButtonClick = true;
            
            if($this.menuWrapper.hasClass('active-menu')){
                $this.menuButton.removeClass('active-menu');
                $this.menuWrapper.removeClass('active-menu');
            }
            else{
                $this.menuButton.addClass('active-menu');
                $this.menuWrapper.addClass('active-menu');
            }
        });
       
        this.menulinks.on('click',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent();
            
            if(menuitem.hasClass('active-menu-parent')) {
                menuitem.removeClass('active-menu-parent');
                menuitemLink.removeClass('active-menu').next('ul').removeClass('active-menu');
                $this.removeMenuitem(menuitem.attr('id'));
            }
            else {
                var activeSibling = menuitem.siblings('.active-menu-parent');
                if(activeSibling.length) {
                    activeSibling.removeClass('active-menu-parent');
                    $this.removeMenuitem(activeSibling.attr('id'));

                    activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu');
                    activeSibling.find('li.active-menu-parent').each(function() {
                        var menuitem = $(this);
                        menuitem.removeClass('active-menu-parent');
                        $this.removeMenuitem(menuitem.attr('id'));
                    });
                }

                menuitem.addClass('active-menu-parent');
                menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
                $this.addMenuitem(menuitem.attr('id'));
            }

            if(menuitemLink.next().is('ul')) {
                e.preventDefault();
            }
            else {
                $this.menuButton.removeClass('active-menu');
                $this.menuWrapper.removeClass('active-menu');
            }

            $this.saveMenuState();
            
            if($this.perfectScrollbar) {
                $this.menuWrapper.perfectScrollbar("update");
            }
        })
        .clickOff(function(e) {
            if($this.menuButtonClick) {
                $this.menuButtonClick = false;
            } else {
                var activeMenuParent = $this.menu.find('.active-menu-parent'),
                    activeMenu = activeMenuParent.find('.active-menu');
                    
                activeMenuParent.removeClass('active-menu-parent');
                activeMenu.removeClass('active-menu');
                
                if($this.leftMenuMode) {
                    $this.menuButton.removeClass('active-menu'); // added for closing on Mobile 
                    $this.menuWrapper.removeClass('active-menu'); // added for closing on Mobile
                }
            }
        });
        
        this.topMenuButton.on('click',function() {
            $this.topMenuButtonClick = true;
            
            if($this.topMenu.hasClass('active-menu')){
                $this.topMenuButton.removeClass('active-menu');
                $this.topMenu.removeClass('active-menu');
            }
            else {
                $this.topMenuButton.addClass('active-menu');
                $this.topMenu.addClass('active-menu');
            }
        });
        
        //topbar
        this.topMenu.find('a').click(function(e) {
            var link = $(this),
            submenu = link.next('ul');
            
            if(submenu.length) {
                if(submenu.hasClass('active-menu')) {
                    submenu.removeClass('active-menu');
                    link.removeClass('active-menu');
                    $this.topMenuActive = false;
                }
                else {
                    $this.topMenu.find('> li > ul.active-menu').removeClass('active-menu').prev('a').removeClass('active-menu');
                    link.addClass('active-menu').next('ul').addClass('active-menu');
                    $this.topMenuActive = true;
                }
            }
            else {
                if($(e.target).is(':not(:input)')) {
                    $this.topMenu.find('.active-menu').removeClass('active-menu');
                    $this.topMenuActive = false;
                }
            }
        })
        .on('mouseenter', function() {
            var link = $(this);
    
            if(link.parent().parent().is($this.topMenu)&&$this.topMenuActive&&document.documentElement.clientWidth > 960) {
                var submenu = link.next('ul');
                
                $this.topMenu.find('.active-menu').removeClass('active-menu');
                link.addClass('active-menu');
                
                if(submenu.length) {
                    submenu.addClass('active-menu');
                }
            }
        });
        
        this.topMenu.find('li').clickOff(function() {
            if($this.topMenuButtonClick) {
                $this.topMenuButtonClick = false;
            }
            else {
                $this.topMenuButton.removeClass('active-menu');
                $this.topMenu.removeClass('active-menu');
                $this.topMenu.find('.active-menu').removeClass('active-menu');
                $this.topMenuActive = false;
            }   
        });
        
        if(!this.isMobile()) {
            if(this.menuWrapper.hasClass('layout-menu-cover-left')) {
                this.perfectScrollbar = this.menuWrapper.perfectScrollbar({suppressScrollX: true});
            }
            else {
                var win = $(window);
                if(win.width() <= 960 || win.height() <= 560) {
                    this.perfectScrollbar = this.menuWrapper.perfectScrollbar({suppressScrollX: true});
                    
                    $this.menuButton.removeClass('active-menu'); // added for closing on Mobile 
                    $this.menuWrapper.removeClass('active-menu'); // added for closing on Mobile
                    $this.leftMenuMode = true; // added for clickOff on Mobile
                }
                
                win.on('resize', function() {
                    if(win.width() <= 960 || win.height() <= 560) {
                        if(!$this.perfectScrollbar) {
                            $this.perfectScrollbar = $this.menuWrapper.perfectScrollbar({suppressScrollX: true});
                        }
                        
                        $this.menuButton.removeClass('active-menu'); // added for closing on Mobile 
                        $this.menuWrapper.removeClass('active-menu'); // added for closing on Mobile
                        $this.leftMenuMode = true; //added for clickOff on Mobile
                    }
                    else {
                        if($this.perfectScrollbar)  {
                            $this.perfectScrollbar.perfectScrollbar('destroy');
                            $this.perfectScrollbar = null;
                        }
                    }
                });
            }
        }
        else {    
            this.menuWrapper.removeClass('Animated05');
            
            if(this.menuWrapper.hasClass('layout-menu-cover-left')) {
                this.menuWrapper.css('overflow-y', 'auto');
            }
            else {
                var win = $(window);
                if(win.width() <= 960 || win.height() <= 560) {
                    this.menuWrapper.css('overflow-y', 'auto');
                    $this.leftMenuMode = true; //added for clickOff on Mobile
                }
            
                win.on('resize', function() {
                    if(win.width() <= 960 || win.height() <= 560) {
                        $this.menuWrapper.css('overflow-y', 'auto');
                        $this.leftMenuMode = true; //added for clickOff on Mobile
                    }
                    else {
                        $this.menuWrapper.css('overflow-y', 'visible');
                    }
                });
            }  
        }
    },
    
    removeMenuitem: function(id) {        
        /* Remove stateful */
    },
    
    addMenuitem: function(id) {
        /* Remove stateful */
    },
    
    saveMenuState: function() {
        /* Remove stateful */
    },
    
    clearMenuState: function() {
        /* Remove stateful */
    },
    
    restoreMenuState: function() {
        /* Remove stateful */
    },
    
    isMobile: function() {
        return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent));
    },
    
    changeMenuLayout: function(orientation) {
        var $this = this;
        if(orientation === 'top') {
            this.menuWrapper.addClass('layout-menu-cover-top').removeClass('layout-menu-cover-left');
        } 
        else if(orientation === 'left') {
            this.menuWrapper.removeClass('Animated05 layout-menu-cover-top').addClass('layout-menu-cover-left');
            if(!$this.isMobile()) {
                setTimeout(function() {
                    $this.menuWrapper.addClass('Animated05');
                }, 100);
                
                this.perfectScrollbar = this.menuWrapper.perfectScrollbar({suppressScrollX: true});
            }
        }
    }
};

$(function() {
   Adamantium.init();
});

And please add this css code in your css file or adamantium-layout.less;

Code: Select all

/* Large desktop */
@media (min-width: 961px){
     .layout-menu-cover-top.fix-topmenu{margin-top:80px; height:auto; opacity:1; overflow:visible;}
    #menu-button{display: none;}
    #layout-portlets-cover{padding-top: 145px !important;}
}

@media (min-height:320px) and (max-height:560px) and (min-width: 961px) {
    #menu-button{display: initial;}
    .layout-menu-cover-top.fix-topmenu{width:300px; height:100%; margin-left:-300px; margin-top:0px;}
    .layout-menu-cover-top.fix-topmenu.active-menu{margin-left:0px; height:100%; margin-top:0px; overflow:hidden;}
    #layout-portlets-cover{padding-top: 90px !important;}
}

24 Dec 2015, 11:34

I will check my css and get back to you.

marcelocaser · 24 Dec 2015, 12:06

Ok. I Thank!

28 Dec 2015, 09:56

Please try with;
CSS

Code: Select all

/* Large desktop */
@media (min-width: 961px){
    .layout-menu-cover-top.fix-topmenu{margin-top:80px; height:auto; opacity:1; overflow:visible;}
    #menu-button{display: none;}
    #layout-portlets-cover{padding-top: 145px !important;}
}

/* Mobile and Tablet */
@media (max-width: 960px){
    #menu-button{display: initial;}
    .layout-menu-cover-top.fix-topmenu{width:300px; height:100%; margin-left:-300px; margin-top:0px;}
    .layout-menu-cover-top.fix-topmenu.active-menu{margin-left:0px; height:100%; margin-top:0px; overflow:hidden;}
    #layout-portlets-cover{padding-top: 90px !important;}
}

/* according to landscape phones height and tablets height */
@media (min-height:320px) and (max-height:560px){
    #menu-button{display: initial;}
    .layout-menu-cover-top.fix-topmenu{width:300px; height:100%; margin-left:-300px; margin-top:0px;}
    .layout-menu-cover-top.fix-topmenu.active-menu{margin-left:0px; height:100%; margin-top:0px; overflow:hidden;}
    #layout-portlets-cover{padding-top: 90px !important;}
}

layout.js

Code: Select all

// FNC for detecting for click outside of any elements ============== 
$.fn.clickOff = function(callback, selfDestroy) {
      var clicked = false;
      var parent = this;
      var destroy = selfDestroy || true;
      
      parent.click(function() {
         clicked = true;
      });
      
      $(document).click(function(event) { 
         if (!clicked) {
            callback(parent, event);
         }
         if (destroy) {
         };
         clicked = false;
      });
   };
   
/** 
 * PrimeFaces Adamantium Layout
 */
var Adamantium = {
  
    init: function() {
        this.menuWrapper = $('#layout-menu-cover');
        this.menu = this.menuWrapper.find('ul.layout-menu');
        this.menulinks = this.menu.find('a.menulink');
        this.menuButton = $('#menu-button');
        this.topMenu = $('#top-menu');
        this.topMenuButton = $('#topmenu-button');
        this.expandedMenuitems = this.expandedMenuitems||[];

        this.menuButton.addClass('fix-topmenu');
        this.menuWrapper.addClass('fix-topmenu');
        this.menuWrapper.removeClass('Animated05');
        this.leftMenuMode = false;
        
        this.bindEvents();
    },
    
    bindEvents: function() {
        var $this = this;
        
        this.menuButton.on('click',function() {
            $this.menuButtonClick = true;
            
            if($this.menuWrapper.hasClass('active-menu')){
                $this.menuButton.removeClass('active-menu');
                $this.menuWrapper.removeClass('active-menu');
            }
            else{
                $this.menuButton.addClass('active-menu');
                $this.menuWrapper.addClass('active-menu');
            }
        });
       
        this.menulinks.on('click',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent();
            
            if(menuitem.hasClass('active-menu-parent')) {
                menuitem.removeClass('active-menu-parent');
                menuitemLink.removeClass('active-menu').next('ul').removeClass('active-menu');
                $this.removeMenuitem(menuitem.attr('id'));
            }
            else {
                var activeSibling = menuitem.siblings('.active-menu-parent');
                if(activeSibling.length) {
                    activeSibling.removeClass('active-menu-parent');
                    $this.removeMenuitem(activeSibling.attr('id'));

                    activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu');
                    activeSibling.find('li.active-menu-parent').each(function() {
                        var menuitem = $(this);
                        menuitem.removeClass('active-menu-parent');
                        $this.removeMenuitem(menuitem.attr('id'));
                    });
                }

                menuitem.addClass('active-menu-parent');
                menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
                $this.addMenuitem(menuitem.attr('id'));
            }

            if(menuitemLink.next().is('ul')) {
                e.preventDefault();
            }
            else {
                $this.menuButton.removeClass('active-menu');
                $this.menuWrapper.removeClass('active-menu');
            }

            $this.saveMenuState();
            
            if($this.perfectScrollbar) {
                $this.menuWrapper.perfectScrollbar("update");
            }
        })
        .clickOff(function(e) {
            if($this.menuButtonClick) {
                $this.menuButtonClick = false;
            } else {
                var activeMenuParent = $this.menu.find('.active-menu-parent'),
                    activeMenu = activeMenuParent.find('.active-menu');
                    
                activeMenuParent.removeClass('active-menu-parent');
                activeMenu.removeClass('active-menu');
                
                if($this.leftMenuMode) {
                    $this.menuButton.removeClass('active-menu'); // added for closing on Mobile 
                    $this.menuWrapper.removeClass('active-menu'); // added for closing on Mobile
                }
            }
        });
        
        this.topMenuButton.on('click',function() {
            $this.topMenuButtonClick = true;
            
            if($this.topMenu.hasClass('active-menu')){
                $this.topMenuButton.removeClass('active-menu');
                $this.topMenu.removeClass('active-menu');
            }
            else {
                $this.topMenuButton.addClass('active-menu');
                $this.topMenu.addClass('active-menu');
            }
        });
        
        //topbar
        this.topMenu.find('a').click(function(e) {
            var link = $(this),
            submenu = link.next('ul');
            
            if(submenu.length) {
                if(submenu.hasClass('active-menu')) {
                    submenu.removeClass('active-menu');
                    link.removeClass('active-menu');
                    $this.topMenuActive = false;
                }
                else {
                    $this.topMenu.find('> li > ul.active-menu').removeClass('active-menu').prev('a').removeClass('active-menu');
                    link.addClass('active-menu').next('ul').addClass('active-menu');
                    $this.topMenuActive = true;
                }
            }
            else {
                if($(e.target).is(':not(:input)')) {
                    $this.topMenu.find('.active-menu').removeClass('active-menu');
                    $this.topMenuActive = false;
                }
            }
        })
        .on('mouseenter', function() {
            var link = $(this);
    
            if(link.parent().parent().is($this.topMenu)&&$this.topMenuActive&&document.documentElement.clientWidth > 960) {
                var submenu = link.next('ul');
                
                $this.topMenu.find('.active-menu').removeClass('active-menu');
                link.addClass('active-menu');
                
                if(submenu.length) {
                    submenu.addClass('active-menu');
                }
            }
        });
        
        this.topMenu.find('li').clickOff(function() {
            if($this.topMenuButtonClick) {
                $this.topMenuButtonClick = false;
            }
            else {
                $this.topMenuButton.removeClass('active-menu');
                $this.topMenu.removeClass('active-menu');
                $this.topMenu.find('.active-menu').removeClass('active-menu');
                $this.topMenuActive = false;
            }   
        });
        
        if(!this.isMobile()) {
            if(this.menuWrapper.hasClass('layout-menu-cover-left')) {
                this.perfectScrollbar = this.menuWrapper.perfectScrollbar({suppressScrollX: true});
            }
            else {
                var win = $(window);
                if(win.width() <= 960 || win.height() <= 560) {
                    this.perfectScrollbar = this.menuWrapper.perfectScrollbar({suppressScrollX: true});
                    
                    $this.menuButton.removeClass('active-menu'); // added for closing on Mobile 
                    $this.menuWrapper.removeClass('active-menu'); // added for closing on Mobile
                    $this.leftMenuMode = true; // added for clickOff on Mobile
                }
                
                win.on('resize', function() {
                    if(win.width() <= 960 || win.height() <= 560) {
                        if(!$this.perfectScrollbar) {
                            $this.perfectScrollbar = $this.menuWrapper.perfectScrollbar({suppressScrollX: true});
                        }
                        
                        $this.menuButton.removeClass('active-menu'); // added for closing on Mobile 
                        $this.menuWrapper.removeClass('active-menu'); // added for closing on Mobile
                        $this.leftMenuMode = true; //added for clickOff on Mobile
                    }
                    else {
                        if($this.perfectScrollbar)  {
                            $this.perfectScrollbar.perfectScrollbar('destroy');
                            $this.perfectScrollbar = null;
                        }
                    }
                });
            }
        }
        else {    
            this.menuWrapper.removeClass('Animated05');
            
            if(this.menuWrapper.hasClass('layout-menu-cover-left')) {
                this.menuWrapper.css('overflow-y', 'auto');
            }
            else {
                var win = $(window);
                if(win.width() <= 960 || win.height() <= 560) {
                    this.menuWrapper.css('overflow-y', 'auto');
                    $this.leftMenuMode = true; //added for clickOff on Mobile
                }
            
                win.on('resize', function() {
                    if(win.width() <= 960 || win.height() <= 560) {
                        $this.menuWrapper.css('overflow-y', 'auto');
                        $this.leftMenuMode = true; //added for clickOff on Mobile
                    }
                    else {
                        $this.menuWrapper.css('overflow-y', 'visible');
                    }
                });
            }  
        }
    },
    
    removeMenuitem: function(id) {        
        /* Remove stateful */
    },
    
    addMenuitem: function(id) {
        /* Remove stateful */
    },
    
    saveMenuState: function() {
        /* Remove stateful */
    },
    
    clearMenuState: function() {
        /* Remove stateful */
    },
    
    restoreMenuState: function() {
        /* Remove stateful */
    },
    
    isMobile: function() {
        return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent));
    },
    
    changeMenuLayout: function(orientation) {
        var $this = this;
        if(orientation === 'top') {
            this.menuWrapper.addClass('layout-menu-cover-top').removeClass('layout-menu-cover-left');
        } 
        else if(orientation === 'left') {
            this.menuWrapper.removeClass('Animated05 layout-menu-cover-top').addClass('layout-menu-cover-left');
            if(!$this.isMobile()) {
                setTimeout(function() {
                    $this.menuWrapper.addClass('Animated05');
                }, 100);
                
                this.perfectScrollbar = this.menuWrapper.perfectScrollbar({suppressScrollX: true});
            }
        }
    }
};

$(function() {
   Adamantium.init();
});

layoutmenu.xhtml

Code: Select all

<div class="layout-menu-cover-top Animated05" id="layout-menu-cover">
        <h:form id="menuform">
            <pm:menu>
...

Screenshots;

Desktop Mode;

Mobile and Tablet Modes;

menu always open

Who is online