Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author wizzud

    (@wizzud)

    I don’t think it’s feasible to add script to the plugin because there are simply too many ways of applying expand/collapse, and everybody wants something slightly different! Some want click activation, some want hover; different icons or font glyphs, at the front or at the end; some want all open, some all closed, some partially open; some want a clicked sub to close all sub within it, others just want the clicked sub to close; etc, etc, etc. No matter how generic you try to make something like that there’s always someone who “needs” it to be different.
    So, I think the answer is No. However, if you want a starting point for some script to apply yourself, you could try this? :

    jQuery(function($){
      $('.widget_custom_menu_wizard').each(function(){
        $(this).find('ul ul').each(function(){
          var an = $('<a/>', {href:'#'})
            .addClass('cmw-expander')
            .html('<span>▲</span><span>▼</span>');
          an.css({marginRight:'0.5em',textDecoration:'none'})
            .find('span').eq(1).hide();
          an.on('click', function(){
            var d = $(this).data(),
                act = d.open===false?'slideUp':(d.open?'slideDown':'hide');
            $(this).siblings('ul')[act]();
            $(this).find('span').each(function(i){
              $(this)[!i === !d.open ? 'hide' : 'show']();
            });
            d.open = !d.open;
            return false;
          });
          $(this).parent().prepend(an);
        });
      }).find('.cmw-expander').trigger('click');
    });

    Thank you for the followup Wizzud! Your plugin is extremely helpful! I really appreciate your work here.

    I’m also curious about having the dropdown menus function when hovering the mouse over the menu.

    Would this code work for this function? Where would I put this code in exactly?

    Thank you again for your help!!

    Plugin Author wizzud

    (@wizzud)

    1. No, the code above will not work for hover … and if you are giving any consider to touch device usage then you might want to reconsider the use of hover anyway? The code above adds an anchor element to each item that has a submenu, and puts a click handler on that anchor (to open/close the submenu). The code is intended to be a starting point, not a definitive solution, because, for instance, placement/styling of the anchor may not suit all people/themes.
    If you need to apply hover, then the added anchor would not be needed, and you would be adding hover (mouseenter/mouseleave) handlers directly to the items that have submenus, and you would need to have a set strategy for what gets expanded/collapsed when.
    2. Once again, there are a number of ways of applying the code. If you have something like the CSS & JavaScript Toolbox plugin then you could paste the code into it, ensure that it runs after jQuery is loaded, and you’re set. Otherwise you could paste the code into a file of its own, then load that file into either the header or footer of every page (ensuring that jQuery is loaded first). Or you could simply paste the code directly into the header or footer (if you theme provides separate files for them).
    If you do anything with your theme, I would recommend using a child theme (if you don’t already have one) because then you would not lose the changes when the theme gets updated.
    If you are not used to editing theme files, then I would recommend using something like the CSS & JavaScript Toolbox plugin.

    Hi Wizzud-

    Thank you for getting back to me.

    I want to be able to click on a menu item, and have sub menus pop up. Hover is not necessary.

    I pasted this code into my child theme, but I still all the menus are still visible.

    Is there a way to click on a menu item and have it pop up as a sub menu?

    Again, I really appreciate your time and your coding expertise, Wizzud. It’s very generous of you to answer our questions and create this plugin.

    Thank you-

    I installed the CSS and JavaScript Toolbox plugin, and then pasted the above code into a new code block. Then I selected the pages I wanted to be affected by this code. However, the menus are still not hidden, and I got a giant error message when I clicked on the menu.

    Would you know how to work around this?

    Thank you~

    Here is the website:

    http://www.colleenblackard.com

    Plugin Author wizzud

    (@wizzud)

    Without going through every page of your site, I can’t see the CMW plugin being used, so I assume you’ve removed it.

    The simplest way to test the code above is in Firefox, using the Firebug extension : create a widget that will output multiple levels of menu items, and go to the page at the frontend; make sure Firebug is running, and in its Console tab’s code box, paste the above code and Run it. (it works – on a 2 level menu – because I’ve just re-tested it). You could also run the debugger (the Script tab) on the included (into your theme) javascript, and put breakpoints at certain points in the code snippet to make sure you’re hitting them?

    Wrt the CSS & Javascript Toolbox, I don’t know what the error could be that it produces, and I have to admit that I haven’t tried the Toolbox recently, or even specifically with this code … I mentioned it because its a plugin that I have used successfully in the past, and it is intended to handle precisely this sort of scenario. Also note that I only gave it as an example – doubtless there are others that will do a similar job, and a lot of themes also provide customisation of this sort as part of their options.

    For “popup” submenus you’re going to need a whole lot more script and/or styling, and a clear idea of what a “popup” means to you. I would suggest that you look around for a specific script plugin to handle them (probably a jQuery one?), and then set it up to handle your particular requirements. Remember that you can always set CMW up with a unique id on the container, so that jQuery javascript can target very specific instances of the widget, and if you use, for example, body classes in the selector as well, you can even target the same widget instance but on different pages. All sorts of possibilities are available … and Firebug is definitely the developer’s best friend (my opinion!).

    Wargon

    (@wargon)

    Hi Wizzud and thanks for a great plugin.

    I have tried the code above and it works great however it eliminates the function that remembers witch page is active. So when clicking on a subpage the menu will collapse and go back to default state.

    Is there a way for it the menu to stay open on the active page?

    Thanks in advance!

    Plugin Author wizzud

    (@wizzud)

    Here’s a slight modification to the above code…

    jQuery(function($){
      $('.widget_custom_menu_wizard').each(function(){
        var currPath = $(this).find('li.current-menu-item');
        $(this).find('ul ul').each(function(){
          $('<a/>', {href:'#'})
            .addClass('cmw-expander')
            .html('<span>▲</span><span style="display:none;">▼</span>')
            .css({position:'absolute',right:'-1em',textDecoration:'none'})
            .on('click', function(ev, hide){
              var d = $(this).data(),
                  isOpen = !d.closed,
                  effect = hide?'hide':(isOpen?'slideUp':'slideDown');
              $(this).siblings('ul')[effect]();
              $(this).find('span').each(function(i){
                $(this)[!i === isOpen ? 'hide' : 'show']();
              });
              d.closed = isOpen;
              this.blur();
              return false;
            })
            .prependTo($(this).parent().css('position','relative'));
        });
        if(currPath.length){
          currPath = currPath.parentsUntil(this, 'li')
            .add(currPath).children('.cmw-expander');
        }
        $(this).find('.cmw-expander').not(currPath)
          .trigger('click', [true]);
      });
    });

    The differences are that it initially keeps the current menu item (assuming there is one!) expanded (ancestors and immediate children), and the trigger is absolutely positioned to the right.

    Once again, this is only meant to be an example of what can be done. It is not intended for a production site!

    Wargon

    (@wargon)

    Thanks for the code Wizzud, it works great!

    As I´m not a backend coder this will do nicely for me and with some modifications to the css it will be perfect!

    Wargon

    (@wargon)

    Hi again! I have a question wether or not its possible to modify the above code so that it automatically closes other menu items when opening the current one?

    Thanks again Wizzud!

    Plugin Author wizzud

    (@wizzud)

    Simple answer : Yes, of course it is.

    Is it simple to do? Depends : If all you want to do is close any item already open at the same level as the one now being opened, then you could just scan parent’s siblings for the relevant data setting and trigger a click. However, what about that open item’s open descendants? Should they also be closed? Or should they remain open? Also, scanning siblings for a data setting is more expensive than filtering siblings for a class, so depending on the number of items in your menu, it might be better to switch to using classes to indicate “open-or-closed” instead of data.

    Am I going to do it for you? Hmmm … prob’ly not.

    I would love to use this code where would I add this function?

    Plugin Author wizzud

    (@wizzud)

    This thread, 4th post, point (2) … ?

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Collapse and expand’ is closed to new replies.