Hello,
the Omega preview application has a menu on the left where the current page is highlighted. The highlighting appears to be done automatically by ensuring that the path defined in the outcome parameter of the MenuItem element matches the currently shown page. For example the menu with outcome "/panel" is highlighted when the page being loaded is panel.xhtml.
This approach doesn't work when more than one menu takes you to the same page (with different URL parameters). For example the menus with outcome "test?page=1" and "test?page=2" will both be highlighted when the page being loaded is test.xhtml (regardless of the URL parameters).
How can we customise the behaviour of the selected menu? Is this done in CSS?
Thank you
M
OmegaMenu current page highlighting
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
We use Js cookie API for menu state. You can see menu state processes in layout.js. When you click a menuitem, JS cookie is added it's id. Then, page is loaded and we get ids in the JS cookie and add active-menuitem class to menuitems that have these ids. Please see;
I couldn't replicate your issue. Can you please attach a screenshot and sample po:menu for me to replicate?
Code: Select all
saveMenuState: function() {
$.cookie('omega_expandeditems', this.expandedMenuitems.join(','), {path: '/'});
},
clearMenuState: function() {
$.removeCookie('omega_expandeditems', {path: '/'});
},
restoreMenuState: function() {
...
}
Github Profile: https://github.com/mertsincan
Hello,
thank you very much for the explanation! After reviewing my code I realised that some of the component IDs contained characters (e.g. space, +, |) that were breaking the functions you mentioned. Removing these has fixed the issue
I have a related question... the highlighting works well when I click on a menu item to display a page, but it does not work well if I right click and open the link in a new tab: the page opening in a new tab will not have the correct menu highlighted. Do you have any suggestions on how this can be resolved?
Cheers
M
thank you very much for the explanation! After reviewing my code I realised that some of the component IDs contained characters (e.g. space, +, |) that were breaking the functions you mentioned. Removing these has fixed the issue
I have a related question... the highlighting works well when I click on a menu item to display a page, but it does not work well if I right click and open the link in a new tab: the page opening in a new tab will not have the correct menu highlighted. Do you have any suggestions on how this can be resolved?
Cheers
M
PF 6.0, JSF 2.2, Payara 4.1.1
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I 'll work on your issue and get back to you.
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please make the following changes;
- please add the following js codes into template.xhtml or layourt.js;
- in sidebar.xhtml
- please add the following js codes into template.xhtml or layourt.js;
Code: Select all
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
var $this = PF('me');
if ($this) {
var pathname = window.location.pathname;
if (pathname.indexOf('.xhtml') > 0) {
var activeLink = $this.menulinks.filter('[href^="' + pathname + '"]');
$this.expandedMenuitems = [];
$this.clearMenuState();
var item = activeLink.parent('li');
$this.addMenuitem(item.attr('id'));
addParentItems($this, item);
rc();
}
}
});
function addParentItems($this, item) {
if (item && item.length) {
var parent = item.parents('li:first');
$this.addMenuitem(parent.attr('id'));
if (!parent.parent('ul').hasClass('layout-menu')) {
addParentItems($this, parent);
} else {
return;
}
}
return;
}
//]]>
</script>
Code: Select all
...
<div class="menu">
<h:form id="menuform">
<p:remoteCommand name="rc" update="menuform:omega_menu" />
<po:menu id="omega_menu" widgetVar="me">
...
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests