WordPress.org

Ready to get started?Download WordPress

Forums

Custom menus - hiding child links until parent is clicked (19 posts)

  1. LucyRyder
    Member
    Posted 2 years ago #

    Hello,
    My site http://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!!
    :)

  2. Marventus
    Member
    Posted 2 years ago #

    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!

  3. LucyRyder
    Member
    Posted 2 years ago #

    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

  4. Marventus
    Member
    Posted 2 years ago #

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

  5. LucyRyder
    Member
    Posted 2 years ago #

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

    Thanks!

    Lucy

  6. Marventus
    Member
    Posted 2 years ago #

    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.

  7. LucyRyder
    Member
    Posted 2 years ago #

    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

  8. LucyRyder
    Member
    Posted 2 years ago #

    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!

  9. Marventus
    Member
    Posted 2 years ago #

    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!

  10. Marventus
    Member
    Posted 2 years ago #

    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.

  11. LucyRyder
    Member
    Posted 2 years ago #

    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

  12. Marventus
    Member
    Posted 2 years ago #

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

  13. LucyRyder
    Member
    Posted 2 years ago #

    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

  14. Marventus
    Member
    Posted 2 years ago #

    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.

  15. LucyRyder
    Member
    Posted 2 years ago #

    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!

  16. LucyRyder
    Member
    Posted 2 years ago #

    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

  17. Marventus
    Member
    Posted 2 years ago #

    Hi Lucy,

    Your styles and scripts should be loading from the same parent directory, but for some reason they are not: style.css is being loaded from wp-content/themes/twentyeleven-child/style.css, and menu.js is being loaded from wp-content/themes/twentyeleven/menu.js.
    That is probably the reason for the discrepancies you seem to be experiencing between your live and local tests.
    Since you are developing a child theme, you should put your JS folder inside the twentyeleven-child folder. In that case, and assuming your menu.js is located inside wp-content/themes/twentyeleven-child/js/, this slightly different call should force WP to look for the menu.js file in the child theme folder instead of the original Twenty Eleven one:

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

    As for my profile, I'm not a moderator: just a regular user who likes to help out on the forums whenever I have time, :-)

    Let me know if you have any other questions.
    Cheers!

    Edit: Oh, I almost forgot. You seem to be calling jQuery twice on your test site, and different versions as well:
    - On line 15, v.1.4.2 from the Google Ajax API engine:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    - On line 34, v.1.6.1. from WP includes folder:

    <script type='text/javascript' src='http://www.lucyryderwebprint.co.uk/test/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>

    You should only keep one of these. My advise would be to always use the most recent version of jQuery. If you want to load it from Google because of speed, you should first unregister WP's version and register Google's. You can do that from your functions.php file with the following code:

    function user_custom_jquery() {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'), false, false, true;
        wp_enqueue_script( 'jquery' );
    }
    add_action('wp_enqueue_scripts', 'user_custom_jquery');

    The true part is the value for the in_footer parameter. Change it to false to load it from your header instead of your footer.

  18. LucyRyder
    Member
    Posted 2 years ago #

    Hi Marventus, ah that makes sense, i knew it must be a slight change in how the call fins the path to the .js file - i'll try this tomorrow!

    And yes I was just trying out liking to the online JQuery library to see if it fixed any of my conflicting plugin issues, but thanks for pointing out that WordPress houses its own version anyway at that location I did not know this!

    Well if you are doing this out of passion for developing and helping other people then i think that is very very kind of you.

    Many thanks!
    Lucy

  19. Marventus
    Member
    Posted 2 years ago #

    Hi Lucy,

    I'm doing a follow up on the topics in which I contributed. Were you ever able to figure this out?
    Do let me know if you encounter any problems.

    Cheers!

Topic Closed

This topic has been closed to new replies.

About this Topic