Make a menu unroll AND open at the same time

Hello,

I have a problem with my theme on this website : https://e-xpertise.ch/demos/mon-3epilier/

As you can see, on the left sidebar there is a navigation menu called “NAVIGATION”. And as you can see, most of these menus have a small “+” (plus) symbol on the right.

When we click on this “+” symbol, the sub-menu open (drops down below the main menu element), which is good…

…BUT when we click on one main menu element (for exemple “L’essentiel en bref”:wink:, then the page opens, but the sub-menu doesn’t drop down as when we clicked on the “+”.

In my opinion it’s not ergonomic : when a user clicks on a main menu element, sure the page should open, BUT the menu itself should also “open” and display the sub-menu elements, just like when we just click on the “+” symbol.

Is there a way to do that ? I’m sure there is as it’s a small thing, but I have no idea how to do that.

Thanks a lot for the continuous great help guys ! :slight_smile:

  • Ash
    • WordPress Hacker

    Hello DJExp

    Please try the following code:

    add_action( 'wp_head', function() {
    ?>
    <script type="text/javascript">
    jQuery(function($){
    var _elem = '',
    _span = '';
    $('.menu-menu-principal-container ul li').each(function(){
    if( $(this).hasClass( 'current-menu-item' ) )
    {
    _elem = $(this);
    if( _elem.find( 'span' ).length )
    {
    _span = _elem.find( 'span' );
    }
    else
    {
    _span = _elem.parent().closest('li').find('span');
    }

    if( _span.length ) _span.click();
    }
    });
    });
    </script>
    <?php
    } );

    You can use this code in your child theme’s functions.php if the theme is not changed. Otherwise mu-plugin is the best option. To create a mu-plugin, go to wp-content/mu-plugins folder. If there is no mu-plugins folder then, create one. Now, inside the mu-plugins folder create file with name anything.php (make sure file extension is .php). Now start with a <?php tag and then put the above code.

    Hope it helps! Please feel free to ask more questions if you have any.

    Have a nice day!

    Cheers,

    Ash

  • DJExp
    • The Incredible Code Injector

    Hi Ash,

    Thanks a lot for the very detailed answer. I tried to make it work but I must be missing something :

    1. I put your code in a .php file and added “<?php” at the beginning.

    2. I created a mu-plugins folder and uploaded the file within this folder

    3. When I check my website (after emptying the cache + refreshing), the menu doesn’t behave any differently.

    Please find my file attached, maybe I did some kind of mistake ?

    Thanks a lot,

  • Ash
    • WordPress Hacker

    Hello DJExp

    Your code is right, I have just tested. Looks like the code is running a bit early. Try the following:

    add_action( 'wp_head', function() {
    ?>
    <script type="text/javascript">
    jQuery(function($){
    setTimeout( function() {
    var _elem = '',
    _span = '';
    $('.menu-menu-principal-container ul li').each(function(){
    if( $(this).hasClass( 'current-menu-item' ) )
    {
    _elem = $(this);
    if( _elem.find( 'span' ).length )
    {
    _span = _elem.find( 'span' );
    }
    else
    {
    _span = _elem.parent().closest('li').find('span');
    }

    if( _span.length ) _span.click();
    }
    });
    }, 1000 );
    });
    </script>
    <?php
    } );

    If it works, then reduce 1000 in the above code by 100, like 900, 800, and so on. Find the minimum value it works and use that one :slight_smile:

    Hope it helps! Please feel free to ask more questions if you have any.

    Have a nice day!

    Cheers,

    Ash

  • Ash
    • WordPress Hacker

    Glad to know. Maybe, it’s better to use 200 in that case. Because, if the menu takes more than 100ms to load, then the above script may fail. But I believe you definitely tested the script in different situation and browsers :slight_smile:

  • DJExp
    • The Incredible Code Injector

    Hello Ash, Hello WPMUDev team,

    I’m reopening this ticket because on a cloned site of the one in which we created the mu-plugin as you suggested, my customer did some changes and now the code don’t work fully anymore.

    More specifically, on this website : https://e-xpertise.ch/demos/mon-developpement-personnel.ch/ (you’ll need to access the admin to see it, because it’s in maintenance mode to avoid duplicate content issue, as it’s a work in progress based on another site).

    If you look at the left sidebar navigation menu. For example the menu “2. Ce qu’est le développement personnel”, you’ll see that your code works normally.

    aka when I click on the menu, the article opens but the menu also open to show the 2 sub-menus (2.1 and 2.2).

    That’s the proper functionning of your code, and it was working perfectly on other sites.

    However, on this one, something changed :

    My customer had to add a third level of navigation… It’s not just menu and submenu, it’s now menu > sub-menu > sub-sub-menu

    Check for exemple menu “3.1 Évoluer vers le simple” : if you click on this menu, things happen as they should : the menu “open” and the page load with the list of all articles.

    HOWEVER, when you click on one of the submenus, of the new added level, for exemple “Gérer l’avoir”, then the code doesn’t work as it should : it indeed loads the page with all the child articles of the “Gérer l’avoir” menu, BUT it doesn’t unroll the “Gérer l’avoir” menu. Instead it loads the page with the whole left sidebar navigation menu closed !

    I’m sure this is an anomaly due to the fact my customer added a new level in content’s hierarchy… So hopefully it’s not hard to fix.

    Is there a way to adapt your code so when people click on e menu of the second level, like “Gérer l’avoir” or “La réalisation de soi”, the website behave the same way it does in other context thanks to your code (aka not only loading the page, but also unrolling the menu) ?

    Is it clear ?

    Please let me know what you think, thanks a lot.

    DJ

  • Ash
    • WordPress Hacker

    Hello DJExp

    Would you please try the following code?

    add_action( 'wp_head', function() {
    ?>
    <script type="text/javascript">
    jQuery(function($){
    $('#nav_menu-2 .menu-menu-principal-container > ul > li.current-menu-parent > span.toggle-submenu').click();
    });
    </script>
    <?php
    } );

    Let me know if it works. Have a nice day!

    Cheers,

    Ash

  • DJExp
    • The Incredible Code Injector

    Hello Ash, thanks a LOT for the code !

    I tried your code and it doesn’t work. Have a look for yourself : https://e-xpertise.ch/demos/mon-developpement-personnel.ch/

    As you can see, with this code, the menu don’t stay open when I click on some sub-menu at all… It’s like if there was nothing.

    Not sure if the code doesn’t work or if I did something wrong. I added the code like last time, as a mu-plugins, based on your instructions (by adding “<? php” before your code). Here’s the exact code I used as a mu-plugins :

    <?php
    add_action( 'wp_head', function() {
    ?>
    <script type="text/javascript">
    jQuery(function($){
    $('#nav_menu-2 .menu-menu-principal-container > ul > li.current-menu-parent > span.toggle-submenu').click();
    });
    </script>
    <?php
    } );

    Please let me know, thanks!

  • Ash
    • WordPress Hacker

    Would you please try the following?

    <?php
    add_action( 'wp_head', function() {
    ?>
    <script type="text/javascript">
    jQuery(function($){
    setTimeout(function(){
    $('#nav_menu-2 .menu-menu-principal-container > ul > li.current-menu-parent > span.toggle-submenu').click();
    }, 200);
    });
    </script>
    <?php
    } );

    Let me know if it works. Have a nice day!

    Cheers,

    Ash

  • DJExp
    • The Incredible Code Injector

    Hi Ash,

    I tried the new code and it doesn’t work either…

    What’s weird is that the original code you created was working at least for the 1st level sub-menus, just not for the 2nd-level submenus… But these news codes don’t seem to have any effect.

    I let the new code on, so you can see for yourself… It doesn’t open the menus at all. Please let me know.

    Thanks A LOT for your help !

    DJ

  • DJExp
    • The Incredible Code Injector

    Hello Ash and team,

    Just wanted to let you know that my customer gave up on this thing, so I’m gonna mark the ticket as resolved.

    In any case, thanks A LOT for your help, I really appreciate you talking the time to help me out with that custom code.

    WPMUDev support is the best ! :slight_smile:

  • Ash
    • WordPress Hacker

    Hello DJExp

    I am extremely sorry for missing this thread, somehow it missed my radar, really sorry about that.

    If you still want me to take a look, please send me admin and FTP login so that I can place the code, test and find out the correct code combination.

    You can send me privately in the following format:

    1. Please go to https://premium.wpmudev.org/contact/#i-have-a-different-question

    2. Select “I have a different question” if not selected

    3. In subject line put “Attn-Ash” (this will ensure that the email is assigned to me)

    4. Provide the wanted details.

    5. Add the thread link in the message so that I can track.

    I will be really happy to help. Have a nice day!

    Cheers,

    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.