Custom menus – hiding child links until parent is clicked

  • Hello,
    My site https://www.lucyryderwebprint.co.uk/test
    is using a child theme of twentyeleven.

    I have 1 custom menu for the navigation, set as the Primary menu. I have 5 child links under ‘My Work’ , and want them to only be visible on a 2nd row of navigation, when their parent ‘My work’ is clicked.

    In the custom menu settings, the child links are sat under ‘My work’, indented to the right to show they are it’s children.

    Currently the child links break the main parent links in the second line of links.

    Are there any WordPress Gurus out there who might know how to achieve this?…

    Many thanks in advance!!
    ??

Viewing 15 replies - 1 through 15 (of 18 total)

  • Hi Lucy,

    The submenu displays fine in the original twentyeleven theme, but it displays vertically an on hover. Vertical display is more flexible since you can add more submenu items without worrying about fitting them into one single line.
    The only way of showing the submenu on click is with Javascript, but I would not recommend this because the parent menu item would not take you anywhere: it would simply show and/or hide the submenu.
    If you are dead set on horizontal submenu and on click behavior to show it, you would have to:
    1. Set the submenu to position:absolute (or fixed) and display:none in the style.css file,
    2. Use Javascript to show the submenu on click (but not on the parent item).
    This tutorial shows you how to accomplish smth very similar to this, with the difference that their menu is vertical, but you can still use it and keep it horizontal on your site. However, since it is not WP-specific, you will have to replace all instances of the ‘subnav’ class in the CSS and JS code given with the actual class of your submenu, which is ‘sub-menu’.

    Don’t hesitate to let me know if you need additional help.

    Ggood luck!

    Thread Starter LucyRyder

    (@lucyryder)

    Hiya Marventus, you absolute star thank you so much for your reply!

    Yes my client is stuck on a horizontal nav so I will try this today and let you know if i have any probs, have a good Saturday! (or whatever day it is where you are)

    Lucy

    You are welcome, Lucy. Give it a try and let me know if you encounter any more problems.
    Cheers!

    Thread Starter LucyRyder

    (@lucyryder)

    Hi Marventus, just looking at this now – do i call the jquery file in the <head></head> of my header.php??

    Thanks!

    Lucy

    Hi Lucy,

    Ideally, it is best to load JS files at the end (i.e., in the footer).
    In order to accomplish this, drop the following code in your functions.php file before the closing php code tag (?>):

    // Call JS Menu Dropdown
function call_js_menu_dropdown() {
	wp_enqueue_script( '[name_of_file]', get_bloginfo('template_url').'/js/[name_of_file].js', false, false, true);
}
add_action('wp_enqueue_scripts', 'call_js_menu_dropdown');

    Make sure that you replace both instances of [name_of_file] in that code with the actual name of the tutorial’s jquery file (excluding the .js extension). So, if the tutorial file was called jquery_tutorial.js, you would have to replace [name_of_file] with jquery_turorial.
    Also, the code I provided will look for the file inside the directory:

    [wp_root]/wp-content/themes/[your-theme]/js

    If you would like to place it somewhere else, let me know and I’ll tell you how to modify the code accordingly.

    Thread Starter LucyRyder

    (@lucyryder)

    Hi Marventus, sorry to bother you again ??

    – I have added the below code before the closing ?> tag in my child theme’s functions.php file:-
    // Call JS Menu Dropdown
    function call_js_menu_dropdown() {
    wp_enqueue_script( ‘menu’, get_bloginfo(‘template_url’).’/js/menu.js’, false, false, true);
    }
    add_action(‘wp_enqueue_scripts’, ‘call_js_menu_dropdown’);

    – I have created a menu.js file with the code from the tutorial, but replaced the selectors for the main and sub menus with those in my html code

    – I have stored this file in twentyeleven-child / js / menu.js and changed ‘name_of_file’ in my functions.php code to ‘menu’ (i didn’t need the square brackets did i??)

    – I have changed the selectors in the css that i copied from the tutorial; to those in my html code

    but it looks like the menu.js is not being loaded on the page – i know a little bit about the script tab in Firebug and i think it shows me it is not being loaded….

    any ideas what I am doing wrong? I am happy to get the drop downs working first then will style to be an inline sub menu.

    I must admit i’m quite confused about how to load JS on my site as I have a few plugins that use it and I am getting conflict between my slider and gallery and read about putting this ‘wp_enqueue_script ‘WordPress function in in stead of calling JQuery the standard <script></script> way – its a bit confusing!

    Thank you thank you thank you,
    Lucy

    Thread Starter LucyRyder

    (@lucyryder)

    I’ve also just read that WP calls Jquery in no-conflict mode and that in the .js file you need to use Jquery instead of $ – changed all instance of it in my menu.js file but it dd not make a difference – it still looks like it is not being called..

    Many thanks, and hope you’ve had a good weekend!

    Hi Lucy,
    Sorry you couldn’t make it work. It was my mistake, actually. It turns out that it is advisable to add the file extension in the first parameter, so the new code to call the menu.je script would be:

    // Call JS Menu Dropdown
function call_js_menu_dropdown() {
	wp_enqueue_script( 'menu.js', get_bloginfo('template_url').'/js/menu.js', false, false, true);
}
add_action('wp_enqueue_scripts', 'call_js_menu_dropdown');

    Also, I checked your site and the menu.js script does not appear to be loading. In order to make sure the script gets loaded, you can click Ctr+U (view source) on your browser (with your site open) to see your site’s source code. Then, in the window that opens, click Ctrl+F to do a search, and enter ‘menu.js’ in the search field. If the search comes out empty, it means the script didn’t load.

    I hope this works for you. IF it does not, for some reason, let me know and we’ll work it out.

    Have a nice weekend too!

    P.S.: If you can’t get wp_enqueue_script to work, you can load the script either:
    1. Directly from header.php or footer.php:

    <script src="<?php get_bloginfo('template_url');?>/js/menu.js" type="text/javascript"></script>

    Or, if you would rather not modify the theme’s markup directly:
    2. From functions.php:
    a. In the header:

    function load_dropdown_menu () {
echo '<script src="'.get_bloginfo('template_url').'/js/menu.js" type="text/javascript"></script>';
}
add_action('wp_head', 'load_dropdown_menu');

    b. In the footer:
    In the add_action line, change wp_head to wp_footer.

    Thread Starter LucyRyder

    (@lucyryder)

    Hi Marventus,

    Again thank you so much for taking the time to reply to me with such thorough answers and help ?? I will be working this again tomorrow and will let you know the outcome! You shoud be a WordPress tutor!

    Lucy

    No problem: I hope this works. If it doesn’t, let me know.
    Good luck!

    Thread Starter LucyRyder

    (@lucyryder)

    Hi Marventus,

    Sorry to bother you again!

    – I got the link to the menu.js to work with loading the script directly from the header.php – here’s the code for my header template:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    – and the link is in the source code – but when i click on the link tot he file its brings a 404 message up saying the file does not exist in the location. I saved my js/menu.js folder and file in lots of places in my file system to see if it wanted it somewhere else – ? in the root of the wordpress folder
    ??then in the wp-content folder
    ? Then in themes
    ? then in twentyeleven-child (my theme)
    and to no avail, it also showed in Firebug that the script wasn’t being loaded.

    Am i doing something else wrong do you think? Cold any other calls to JQuery in any of the plugins i have installed on the site be stopping mine load? ( i know things conflict as i’m having a conflict with easing slider and Mouseover gallery too at the moment).

    I wondered if this line:
    <?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

    in the header was conflicting with something as this uses the wp_enqeue_script function and not sure if you are only mean to use this once on a site, but that did not affect it either.

    Sorry again to keep bothering you – i’m sure once i find out the secret ingredient for using JQuery with WordPress i’ll be able to perform magic!!!

    Lucy

    Hi Lucy,

    The link to the script is giving you a 404 error because the function get_bloginfo does not print anything: it simply retrieves the information for usage, so your src attribute was being returned as:

    src="/js/menu.js"

    i.e., a directory that does not exist in your WP root folder. I seem to have neglected to add the ‘echo’ bit in one of my examples, so sorry for that.

    To correct this, you should echo the function results, like so:

    <script src="<?php echo get_bloginfo('template_url');?>/js/menu.js" type="text/javascript"></script>

    That should return the full URL path to the script.

    Thread Starter LucyRyder

    (@lucyryder)

    Hi Marventus!

    Thanks for that, I changed the call to to eh menu.js script in my header.php to what you said above – i tried the other ways in the function.php file and could not get it working….

    Now when i view the source, the menu.js is listed in the <script> tag – but the path to it is in my parent theme twenty eleven instead of my child themem twentyelevenchild – does it matter if i put the menu.js in twentyeleven/js rather in my child theme? (just thinking for when i update the parent theme if there are updates in the future)

    Anyway, the link to the script is in the code if i view source, but not shown as loading on the page in the Script tag in Firebug – and i cannot get the drop down menu to work as at all. If the link to it is in the View source code, does this mean it is loading correctly bu i have done something wrong in my menu.js file or my CSS so that the navigation is not targeted correctly or something do you think?

    Many thanks again!

    Thread Starter LucyRyder

    (@lucyryder)

    Hi Marventus – PLEASE IGNORE MY LAST MESSAGE!!! – ON my live site I can see menu.js is being loaded (bit not on my local???) – so I will now look at possible things I have done wrong in my actual script / CSS for the navigation and get back to you if I have any ore queries!

    – I wonder if it may be ok but just not working in the same way my Easing slider isn’t working in the Home page because of conflicts with other J Query loading to…

    Anyway, thank again for all your help i’ll get back to you.

    P.S can I give you some starts next yo your profile on here or something to say thank for all your time and help? (an if you don’t actually work for WordPress i’ll be even more impressed!)

    Cheers!
    Lucy

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Custom menus – hiding child links until parent is clicked’ is closed to new replies.