Forum Stats

  • 3,853,184 Users
  • 2,264,189 Discussions
  • 7,905,280 Comments

Discussions

How to Highlight Active Navigation Menu Item?

DannyS-Oracle
DannyS-Oracle Member Posts: 165
edited Jul 13, 2016 12:40PM in APEX Discussions

Hi guys, I have similar problem to my previous question (How to Highlight Active Link on Navigation Bar?).

How do I highlight the active menu item in Navigation Menu? In the screenshot below the active menu is not highlighted even though I am opening the respective page (Account Support Revenue Impact is not highlighted):

Screen Shot 2016-07-12 at 8.26.58 PM.png

And this is the good working example from Apex's sample application (Sales by Month is highlighted):

Screen Shot 2016-07-12 at 8.31.24 PM.png

I have tried going to the Shared Components > Navigation Menu and set the Current List Entry to "Current Page is Target", just like the sample application; but it didn't work.

Any help will be appreciated! I am using Apex v5.0.3 theme Vita.

Danny

Tagged:
DannyS-Oracle

Best Answer

  • Sven W.
    Sven W. Member Posts: 10,551 Gold Crown
    edited Jul 13, 2016 7:52AM Answer ✓

    Seems like this is an oracle internal area. So we can not access it.

    @Danny please create a showcase in apex.oracle.com.

    Also make sure that the "is current" entry exists only for the sub navigation entry and not for the parent navigation entry.

    If the same page "is current" for multiple menu entries, only the first one is choosen. So in your case you might want to remove the setting from the parent menu entry.

    DannyS-Oracle

Answers

  • PMON
    PMON Member Posts: 1,260 Gold Trophy
    edited Jul 13, 2016 12:04AM

    Danny,

    Making the Current List Entry to "Current Page is Target" should produce your desired results.  To debug the issue you can right click on your active menu item and select inspect item.  It should open up the f12 tools and take you to the html element for your menu item.  You should see that it has a class like the following "a-TreeView-content is-selected is-current"  If it does, then it should be highlighted as expected, or else some other style is overriding the default classes used.  You can browse the other classes applied in the f12 tools console and check on/off attributes in classes to see which on is truly messing with your styling. 

    If you want someone to take a closer look at it, please create a sample on apex.oracle.com and provide guest developer credentails.

    Hope this helps,

    Paul

  • DannyS-Oracle
    DannyS-Oracle Member Posts: 165
    edited Jul 13, 2016 12:48AM

    Hi Paul, thanks for describing the steps.

    Yep as I mentioned, it did not work even though I set the Current List entry attribute to "Current Page is Target". In the inspector, the "is-selected" and "is-current" classes appear on the parent item, but not on the selected page itself.  I did not add any styling, so I doubt there is CSS override.

    You can try login to this app https://apex.oraclecorp.com/pls/apex/f?p=27756:20:13026045099771::NO:::

    Both username and password are "dev". If you see under each nav-menu item, only "Test Schedule" is highlighted properly - even though the setting for all is the same...

    Danny

  • PMON
    PMON Member Posts: 1,260 Gold Trophy
    edited Jul 13, 2016 1:07AM

    can't hit the url

  • Sven W.
    Sven W. Member Posts: 10,551 Gold Crown
    edited Jul 13, 2016 7:52AM Answer ✓

    Seems like this is an oracle internal area. So we can not access it.

    @Danny please create a showcase in apex.oracle.com.

    Also make sure that the "is current" entry exists only for the sub navigation entry and not for the parent navigation entry.

    If the same page "is current" for multiple menu entries, only the first one is choosen. So in your case you might want to remove the setting from the parent menu entry.

    DannyS-Oracle
  • Mahmoud_Rabie
    Mahmoud_Rabie Cloud Solution Architect, Member Posts: 3,216 Bronze Crown
    edited Jul 13, 2016 8:19AM

    Hi Danny,

    Did you try, for each sublist entry to make its setting:

    Current List Entry

    - List Entry Current for Pages Type := Colon Delimited Page List

    For example if the parent page is 1 and subpage is 2, then put 1:2 as colon delimited page list for current list entry of page 2.

    Please take a look at

    How to highlight a selected list element

    I hope that helps or solves your problem.

    Regards

    Mahmoud

    DannyS-Oracle
  • DannyS-Oracle
    DannyS-Oracle Member Posts: 165
    edited Jul 13, 2016 12:40PM

    Finally got it working.

    As Sven mentioned, the "is current" needs to be available at the child entry. So what happened was, every time I generated a new page I also made new navigation entry for the page, and also set the parent page's entry (let's say page 1). I guess the intended use of this was highlighting both the parent (page 1) and active child item (e.g. page 2,3,4) in the UI. But in the real implementation it did not work - so I guess this is a bug from Apex itself?

    Each time I made new navigation entry and set its parent, the parent entry's "Current List Entry" was automatically set to "Comma Delimited Page List", and the child page's number would be added there. So for example, my parent page's Current List Entry values were 1,2,3,... This made the child page not getting highlighted, as only the first "is current" will be highlighted.

    In the end, I chose to let the parent entry not highlighted, and made the child entry highlighted by removing all the children page number from the parent's Current List Entry (1 ,2,3,...) .

    Thanks for taking the time to help me guys, really appreciate it!

    Danny

This discussion has been closed.