How to Highlight the Selected Menu Item in Websites That Generated by PHPMaker 9.2.0

Now we are going to add the ability of highlighting the selected menu item in web applications that generated by PHPMaker. Actually the following trick below is similar to this topic in PHPMaker discussion forum. Unfortunately, that code will only work for the menu bar item which have sub-menu items beneath it. That code in the forum will not work if the menu item does not have any sub-menu item.

So, I modified the code in the forum above so that it will work for the menu items which do not have sub-menu items beneath it. The only limitation for the following trick below is it will only work for the selected menu item and its top-parent menu if the selected menu item has more than one parent menu. For example, when your web application user is selecting the menu item (let's say its name is My Target Menu that located under the My Root Menu -> My Category Menu location, then only My Root Menu and My Target Menu menu items will be highlighted, whereas My Category Menu won't be highlighted.

In addition, please note that the following trick below is only suitable for the Horizontal Menu layout. If you are using Vertical Menu layout, then the top-parent menu will not be highlighted when the sub-menu is selected (only the selected page menu will be highlighted).

1. Copy the following code under the Client Scripts -> Global -> Pages with header/footer -> Startup Script:

   // This will highlight the current selected menu item and its top-parent (two-level menus):
   $('.yuimenuitemlabel').each(function(i) {
     menulabel = $(this).attr('href'); // get menu label
     if (menulabel == '<?php echo basename($_SERVER&#91;'PHP_SELF'&#93;); ?>') {
       $(this).closest('.yuimenubaritem').css('background-color', '#D0E6FF'); // parent menu
       $(this).closest('.yuimenuitem').css('background-color', '#D0E6FF'); // current menu item
       return false; // exit from each loop
     }
   });
   
   // This will highlight the current selected menu item which has no child menu (one-level menus only)
   $('.yuimenubaritemlabel').each(function(i) {
     menubarlabel = $(this).attr('href'); // get menu bar label
     if (menubarlabel == '<?php echo basename($_SERVER&#91;'PHP_SELF'&#93;); ?>') {
       $(this).closest('.yuimenubaritem').css('background-color', '#D0E6FF'); // current menu item
       return false; // exit from each loop
     }
   });
   

2. From Tools -> Advanced Settings menu of PHPMaker, make sure you have enabled the Local YUI/jQuery files item.
3. Finally, re-generate your script file using PHPMaker as always.