[Resolved] Vertical menu with collapsible subitems

Home Forums Support [Resolved] Vertical menu with collapsible subitems

Home Forums Support Vertical menu with collapsible subitems

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #884701
    Frans

    I would like to have an additional vertical menu in a sidebar (e.g. in a widget). I created a new menu with items and subitems. In the sidebar (custom navigation widget), all items and subitems are always visible. I would like to have only the items and after clicking or hovering a parent item, the appearance or fold out of the subitems (as happens in the primary generatepress dropdown menu).

    How can it be created ? A plugin ? Additonal css ?

    Frans van Ittersum

    #884823
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    If you’re not already using the Secondary Nav module, you can use it.

    If you are, then we’ll need some custom CSS for the widget. Can you link me to your site?

    #885810
    Frans

    Thanks !

    My idea is that the Secondary Nav module always results in a menu above the header. I do not know how to get it in a widget in the sidebar. As mentioned, I made a new menu and put it in a “navigation menu” widget. Then, the submenus are not collapsable.

    I found a plugin, Wpdevart vertical menu, that works as I intended. Unfortunately, this plugin does not apply the GeneratePress layout on the menu in the widget. However, I think that the Pro version can be configured in such a way that its appearance is similar as my GeneratePress configuration.

    If it is complex to imitate this plugin with GeneratePress, then I can purchase the Wpdevart vertical menu Pro version.

    I can provide the url of my site (https://medische-ethiek.nl/), but all testing on vertical menus is done on my test system (local Wamp64).

    Frans

    #885969
    Tom
    Lead Developer
    Lead Developer

    You can tell the Secondary Nav to show up in your sidebar by going to Customize > Layout > Secondary Navigation and changing the location setting.

    Let me know if that does it or not πŸ™‚

    #886942
    Frans

    This is a great idea ! It works: the secondary menu appears in the left sidebar.

    The problem now is that the submenu appears right to the main menu items. I would prefer to let them appear below the main menu item and pushing down the other main menu items: this is what, similarly, happens with the primary dropdown menu on mobile phones. All items (main and subitems) then remain within the left sidebar area.

    Can it be arranged with additional css ?

    Frans

    #887073
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    .dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li:hover ul, 
    .dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.sfHover > ul {
        left: 0;
        width: 100%;
        position: relative;
    }

    Let me know πŸ™‚

    #888195
    Frans

    Thanks, it works ! I added some layout and a li:active for clicking and keeping the submenu in place.

    
    .dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li:hover ul, 
    .dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.sfHover > ul {
        left: 0;
        width: 100%;
        position: relative;
    	  padding-left: 20px;
    	  padding-bottom: 14px;
    	  font-size: 16px;
    	  box-shadow: 0px 0px 0px 0px;
    }
    .dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li:active ul, 
    .dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.sfHover > ul {
        left: 0;
        width: 100%;
        position: relative;
    	  padding-left: 20px;
    	  font-size: 16px;
    	  box-shadow: 0px 0px 0px 0px;
    }

    I don’t know whether my css-code can be made more “lean”

    Frans

    #888352
    Tom
    Lead Developer
    Lead Developer
    #889874
    Frans

    I have three additional questions:

    1) my secondary navigation menu is now in the left sidebar. There are 4 entries at the highest level, 2 have a submenu. If I click on the first level with a submenu, it opens and remains opened; if I, thereafter, click on the second level with a submenu, the second submenu behaves similarly. However, at that moment the first submenu closes (when the second opens). In the mobile version, both submenus remain opened. Can this also be configured in the desktop version ?

    2) On mobile, my left sidebar (and thus the second navigation menu) appears below the page content. Can it be configured that the left sidebar appears above the page title and content ?

    3) The title of the secondary navigation menu in the left sidebar (“menu”) is centered. Can it be configured in such a way that the menu text is at the left (I cannot find the class that configures this layout).

    Thanks !

    Frans
    Example

    #889928
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. As of right now, this isn’t possible without custom javascript, unfortunately. The only reason it stays open until something else is clicked is that it’s in “focus” for accessibility reasons.

    2. This might help: https://generatepress.com/forums/topic/secondary-menu-not-responding-on-mobile-cant-move-menu-location/#post-847578

    3. Try this CSS:

    .secondary-navigation .menu-toggle {
        text-align: left;
    }
    #891009
    Frans

    Thanks ! 2 comments and 1 question left:

    Ad 1: I understand.
    Ad 2: It works, but the secondary navigation menu is now under the main menu and above the custom image of the Generatepress Page Header. Could it be placed under the custom image of the Page Header and above the content ?
    Ad 3: It works !

    Frans

    #891159
    Tom
    Lead Developer
    Lead Developer

    Try this as your Hook content:

    <script>
        var target, nav, clone;
        nav = document.getElementById( 'secondary-navigation' );
        if ( nav ) {
            clone = nav.cloneNode( true );
            clone.className += ' sidebar-nav-mobile';
            clone.setAttribute( 'aria-label', 'Mobile Menu' );
            target = document.querySelector( '.page-hero' );
            if ( target ) {
                target.insertAdjacentHTML( 'afterend', clone.outerHTML );
            } else {
                document.body.insertAdjacentHTML( 'afterbegin', clone.outerHTML )
            }
        }
    </script>

    Let me know πŸ™‚

    #893240
    Frans

    Thanks it works, but – sorry for that – 2 questions:

    1. With this script, the menu appears under the custom image of the page header, but does not disappear from the original (bottom) location. Should it be swtiched off in the customizer or do I need additional script ?

    2. With what css class can I style this menu on mobile ? I tried menu-mobile, but then the main menu changes on mobile as well. Can I use another class ?

    Thanks!

    Frans

    #893493
    Tom
    Lead Developer
    Lead Developer

    1. Try this CSS:

    @media (max-width: 768px) {
        .gen-sidebar-secondary-nav {
            display: none;
        }
    }

    2. You can do this:

    @media (max-width: 768px) {
        .secondary-navigation {...}
    }

    Hope this helps πŸ™‚

    #896492
    Frans

    Thanks ! Questions answered, problems solved.

    Frans

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.