8 Replies Latest reply on Mar 4, 2019 12:47 PM by Sven W.

    Top navigation menu: How to influence sub list entries?

    Sven W.

      This is from Apex 18.1 on apex.oracle.com.

       

      I use a navigation menu on the top. Not on the left side. This is an important difference.

       

      Here is an example:

       

       

      The menu is based upon a (dynamic) list. I now want to influence the sub menus, for example to color code them using attributes from the list.

       

      Here is an example that i did for a left side navigation menu:

      apex5_sidebar_colored_after

       

      I wrote a (somewhat outdated) blog post how to do that: https://svenweller.wordpress.com/2015/11/05/apex-5-universal-theme-navigation-experiment-4/

       

      Base idea was to change the template for the list, so that the additional attributes are added as a class to the LI tag.

      apex5_sidebar_colored_template1.png (1677×271)

       

      The same is not possible for a top navigation menu. The list template is not used, at least not for the sub entries.

      Instead the menu widget uses some content layout to create the sub menu on the fly.

       

      I'm looking for a way to influence this behaviour.

      Best would be to be able to define the complete LI tag using the sub-template setting of the list.

      Second best would be to read an attribute (might be even a data-xxx entry) and use this to set a class for the menu label.

       

      John Snyders-Oracle do you have any idea how to solve this?

        • 2. Re: Top navigation menu: How to influence sub list entries?
          Sven W.

          Why do you think APEX Nitro would help?

          APEX Nitro can add local code, including JAvascript or CSS code to a page. But only for the local client.

          I don't see how that would change any possible solution.

          Care to give an example?

          • 3. Re: Top navigation menu: How to influence sub list entries?
            John Snyders-Oracle

            Hi Sven,

            I'm sure you are aware of much of this information but I want to explain the background for others:

            In UT the side navigation is implemented with the treeView widget with some UT specific hacks for badges. If you want to learn about what is possible with the treeView here is the doc:

            https://docs.oracle.com/en/database/oracle/application-express/18.2/aexjs/treeView.html

            In UT the top navigation is implemented with the menu widget. If you want to learn about what is possible with the menu here is the doc:

            https://docs.oracle.com/en/database/oracle/application-express/18.2/aexjs/menu.html

            Both the side and top navigation turn the navigation list into markup using a list template that you select. You can provide your own list template to support any navigation behavior you like. For top navigation there are two list templates that make sense Top Navigation Menu and Top Navigation Tab (very simple one level tabs). For side navigation there is just one template Side Navigation Menu (I wish it was called Side Navigation Tree to make it clear that it is using a tree for navigation and not the menu widget).

            Unlike older theme navigation the markup generated is not necessarily the markup that will be used at run time.

            Both the treeView and menu widgets take simple list markup and dynamically generate the more complicated markup that the widgets require. How the markup can impact the widget is documented. For menus: https://docs.oracle.com/en/database/oracle/application-express/18.2/aexjs/menu.html#from-markup-section

            For treeViews: https://docs.oracle.com/en/database/oracle/application-express/18.2/aexjs/treeView.html#from-markup-section

            Because the tree or menu are created from markup they don't support every option that is possible if the widgets were hand code in JavaScript.

             

            The treeView lets you specify CSS classes for the node and I believe this is what you were taking advantage of to color your side navigation.

             

            The menu does not allow a class for each menu item. The menu widget is intended to look and behave like a desktop OS menu. This is explained in the menu widget API introduction. I have resisted adding customization options that would deviate from the traditional desktop menus. There were 2 concessions or extensions that were made to the menu widget menu bar functionality to allow it to replace old builder menus 1) split menu bar items, 2) current menu style indication (explained in the JSDoc). This is not to say that the web can't have its own menu bars with non standard look and behavior, it is just that the APEX menu widget is not that. For example I would be in favor of adding an option to make menus look more like OSX menus (I call them ragged menus because the labels don't align). I'm against adding icons for the top level menu bar items because no traditional menu has those (you may be thinking of a toolbar). A recent enhancement to the menu widget allows style settings on the menu item icon. This was done to add color to icons. You can see this in action in Interactive Grid Actions>Format>Highlight dialog Colors menu those are menu widgets with per item styles for setting the icon color. This iconStyle option is currently not supported when creating menus from markup. It would not be unreasonable to support that but it wouldn't do what you want which is to style the whole menu item.

             

            There is a lot you can do to change the look of the menu widget just by changing CSS rules. But there is nothing built-in that would allow you to apply styles on a per item basis.

             

            So what are your options if you really want to color or otherwise apply specific styles to specific menu items:

             

            1) You could create your own menu widget or use some 3rd party menu and integrate it through your own list template. Note that the jQuery UI menu widget can't be used because it has the same name as the APEX menu (it is also not a great implementation). There are some simple mostly CSS based menus that may not be too much work. I haven't tried this and I'm not really motivated to. The APEX menus have a lot of functionality in them. For example moving menus onto the overflow menu if the screen gets too small, scrolling menus if there are too many items in a sub menu, and APEX menus don't have the tunnel problem (https://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/ ).

             

            2) The menu widget including menu bars supports custom content menus. I wrote about that here: APEX Media List Mega Menu – HardLikeSoftware  But as far as I know it has not been tried with APEX top navigation. I think a custom list template would be needed. You can do whatever you want in the custom markup including your own color styles. One big restriction is that custom content menu (also known as mega menus) do not allow nested sub menus.

             

            3) If you are happy to just color the icon there is the iconStyle option already mentioned but isn't set from markup. If you could target the menu item you could set this this option after the page is loaded. You can get to a specific menu item by giving it an id.  For the Top Navigation Menu list template the menu id is attribute 1 (A01). So if you had a page with an icon that you wanted styled red you could give it an id of "somePage" and then when the page loads:

            var menu$ = $("#t_Header .a-MenuBar");

            menu$.menu("find", "somePage").iconStyle = "color:red";

             

            This technique of finding menu items by name can be used for setting any option that can't be set from list markup and can even be used to set a custom JavaScript action. It can also be done from the beforeOpen event. But there is no way to modify the markup of the menu item because the markup is generated after the beforeOpen event.

             

            Those are the options I can think of. I may play round with options 2 and 3 and report back if I gather more details.

             

            One thing to consider with the desire to color menu items is accessibility. It is not a good idea to rely on color alone to indicate something important about the menu. Menu icons and their color should be considered decorative.

             

            Regards,

            -John

            • 4. Re: Top navigation menu: How to influence sub list entries?
              Sven W.

              Hi John,

               

              Thanks for looking into that.

               

              I checked the documentation for the menu widget and it seems as if there is a way to use a custom content.

               

              https://docs.oracle.com/en/database/oracle/application-express/18.2/aexjs/menu.html#from-markup-section

               

              The item type is "action" unless there is no <a> or <span> child (no label) or the anchor href="separator" or if the item is a sub menu. The type is sub menu if the <li> has a <ul> child. The sub menu is processed recursively. If the type is "action" and there is an id property and the apex.actions namespace exists and there is an action with the name equal to the id value then the menu item is associated with the action. The attribute data-custom="true" can be used with a menu bar item to create a custom markup menu. The custom markup goes under the list element <li> and must start with an element that has class a-Menu-content.

               

              Currently the html in the sub list entries seem to play no role when creating sub menus (top navigation menu).

              However i didn't know that maybe by setting data-custom="true" we could potentially provide some kind of html markup that is reused. Does this work for the top navigation menu too? Or only for custom menus?

               

              In my specific case I have a menu used for trainings. In that menu I want to indicate difficulty levels for the various trainings.

              Color code the entries is just one possible way, another one would be to add some stars ☆☆☆ .

              Accessibility is only of minor concern for that, if we can provide html markup code.

              • 5. Re: Top navigation menu: How to influence sub list entries?
                John Snyders-Oracle

                Hi Sven,

                I checked the documentation for the menu widget and it seems as if there is a way to use a custom content.

                 

                https://docs.oracle.com/en/database/oracle/application-express/18.2/aexjs/menu.html#from-markup-section

                 

                The item type is "action" unless there is no <a> or <span> child (no label) or the anchor href="separator" or if the item is a sub menu. The type is sub menu if the <li> has a <ul> child. The sub menu is processed recursively. If the type is "action" and there is an id property and the apex.actions namespace exists and there is an action with the name equal to the id value then the menu item is associated with the action. The attribute data-custom="true" can be used with a menu bar item to create a custom markup menu. The custom markup goes under the list element <li> and must start with an element that has class a-Menu-content.

                 

                Currently the html in the sub list entries seem to play no role when creating sub menus (top navigation menu).

                However i didn't know that maybe by setting data-custom="true" we could potentially provide some kind of html markup that is reused. Does this work for the top navigation menu too? Or only for custom menus?

                 

                In my specific case I have a menu used for trainings. In that menu I want to indicate difficulty levels for the various trainings.

                Color code the entries is just one possible way, another one would be to add some stars ☆☆☆ .

                Accessibility is only of minor concern for that, if we can provide html markup code.

                This is essentially option 2 and I don't know if it can work with a list template. I won't get to try it for at least a week.

                Regards,
                -John

                1 person found this helpful
                • 6. Re: Top navigation menu: How to influence sub list entries?
                  John Snyders-Oracle

                  Update: Custom Content works. Blog coming soon.

                  • 7. Re: Top navigation menu: How to influence sub list entries?
                    John Snyders-Oracle

                    So I know this doesn't solve the original use case. Standard apex menus cannot have arbitrary markup or per menu item styles/classes. But I think the custom markup mega menus can solve many/most of the cases where you would want custom styles. Here is how to do it: More APEX Menu Fun – HardLikeSoftware

                    Regards,

                    -John

                    1 person found this helpful
                    • 8. Re: Top navigation menu: How to influence sub list entries?
                      Sven W.

                      Thanks a lot John for looking into that. It's a pity that there is not simple way to solve it.

                       

                      This is for one of my side projects. I'll will test your suggestion as soon as I find some more time to work on it.

                       

                      In the past I also tried a normal list template instead of the topbar navigation menu, And this worked too,

                      I have to dig out that code and comparer the possible solutions.