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!
menu always open
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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.
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.
Github Profile: https://github.com/mertsincan
-
- Posts: 122
- Joined: 13 Dec 2011, 15:07
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.
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.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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.
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Can you please try my changes on Mobile and Desktop?
full layout.js
And please add this css code in your css file or adamantium-layout.less;
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();
});
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;}
}
Github Profile: https://github.com/mertsincan
-
- Posts: 122
- Joined: 13 Dec 2011, 15:07
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.
----------------------------------------------------------------------------------------------------------------------------------------------
As you can see. In mobile, the menu is not shown.
-
- Posts: 122
- Joined: 13 Dec 2011, 15:07
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.jsAnd please add this css code in your css file or adamantium-layout.less;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(); });
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;} }
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I will check my css and get back to you.
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try with;
CSS
layout.js
layoutmenu.xhtml
Screenshots;
Desktop Mode;
Mobile and Tablet Modes;
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;}
}
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();
});
Code: Select all
<div class="layout-menu-cover-top Animated05" id="layout-menu-cover">
<h:form id="menuform">
<pm:menu>
...
Desktop Mode;
Mobile and Tablet Modes;
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 8 guests