Hi Aragron,
Your solution in previous Post for "keeping all items expanded" work fine for the expanded submenus, but just a small side effect :
before commenting out the line, only the last selected Item had the background and foreground colors changed to highlight it.
Now : when I select one item, previous selected one's stay with the background/foreground colors of the selected item, leading to some strange and disturbing visual aspect ...
How can I have (if possible) the best of the 2 : sub-item stay expanded and only the current selected item Highlighted ?
I add a link to see this :
http://37.187.72.27/Screenshot_menu.png
Kindest regards
Sub Menu layout side effect (closed)
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi Serenne,
Please make the following changes;
full event code;
Then, please add the following method;
Please make the following changes;
Code: Select all
$this.deactivateOnlyMenuItems(item); // Please use it instead of $this.deactivateItems(item.siblings(), true); in line 194
Code: Select all
...
this.menulinks.off('click').on('click', function(e) {
var link = $(this),
item = link.parent(),
submenu = item.children('ul'),
horizontal = $this.isHorizontal() && $this.isDesktop();
if($this.isSlim() && item.parent().hasClass('ultima-menu')) {
if(item.hasClass('active-menuitem')) {
if(submenu.length) {
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
submenu.hide();
}
if(item.parent().is($this.jq)) {
$this.menuActive = false;
}
}
else {
item.addClass('active-menuitem');
$this.addMenuitem(item.attr('id'));
$this.deactivateItems(item.siblings(), false);
submenu.show();
$this.updateSubPosOnSlimMenu(submenu, item);
if(item.parent().is($this.jq)) {
$this.menuActive = true;
}
}
}
else {
if(item.hasClass('active-menuitem')) {
if(submenu.length) {
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
if(horizontal) {
if(item.parent().is($this.jq)) {
$this.menuActive = false;
}
submenu.hide();
}
else {
submenu.slideUp();
}
}
}
else {
$this.addMenuitem(item.attr('id'));
if(horizontal) {
$this.deactivateItems(item.siblings());
item.addClass('active-menuitem');
$this.menuActive = true;
submenu.show();
}
else {
$this.deactivateOnlyMenuItems(item);
$this.activate(item);
}
}
if($this.isSlim()) {
var activeParentItem = submenu.parents('.active-menuitem:last');
setTimeout(function() {
$this.updateSubPosOnSlimMenu(activeParentItem.children('ul'), activeParentItem);
}, 350);
}
}
if(!horizontal) {
setTimeout(function() {
$(".nano").nanoScroller();
}, 500);
}
if(submenu.length) {
e.preventDefault();
}
});
...
Code: Select all
/**
* PrimeFaces Ultima Layout
*/
PrimeFaces.widget.Ultima = PrimeFaces.widget.BaseWidget.extend({
...
deactivateOnlyMenuItems: function(item) {
if (this.cfg.stateful) {
var menucookie = $.cookie('ultima_expandeditems');
if (menucookie) {
this.expandedMenuitems = menucookie.split(',');
var removedMenuItemIds = [];
for (var i = 0; i < this.expandedMenuitems.length; i++) {
var id = this.expandedMenuitems[i];
if (id && id !== item.attr('id')) {
var menuitem = $("#" + id.replace(/:/g, "\\:"));
if (menuitem.children('ul').length === 0) {
menuitem.removeClass('active-menuitem');
removedMenuItemIds.push(id);
}
}
}
for (var j = 0; j < removedMenuItemIds.length; j++) {
this.removeMenuitem(removedMenuItemIds[j]);
}
}
}
}
});
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You're welcome!
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 28 guests