Wayfinder: getting &hideSubMenus to show proper submenu levels

342 Posts

Willi Waizenegger Reply #11, 14 years, 9 months ago

Yes, benmarte, that's the general idea. The client isn't interested in the animated movement, though. I'll look at all options.

Thanks for all input.

☆ A M B ☆
894 Posts

benmarte Reply #12, 14 years, 9 months ago

@waizen I made you a quick example of what you need to do on this jsfiddle link, hope that solves your problem

Just make sure you modify the JS and CSS so it targets your nav otherwise it will apply it to all your list items

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

342 Posts

Willi Waizenegger Reply #13, 14 years, 9 months ago

@benmarte Thank you for your code.

I just implemented it and the menu opens and closes beautifully. The left column menu even keeps appearing while in the top level pages and they open/close beautifully. Great job!

Now, the issue is that, while the menu is opening and closing perfectly, the links for each menu item don't work; top-of-page menu or side column menu. The weird thing is that, I can hover over each menu item and I can see the links...I can go to the page source and see that the links are all there. However, clicking on each menu item doesn't take you anywhere.

Not being a js guru, I'm sure I've failed to do something correctly. I confirmed that adding the js code part stops the links from working (but make the menu open/close) and taking the js code out makes the links work again.

Now, the question that will make me look stupid: you said that the js needs to be modified to target my nav? The CSS portion I get, but what about the js? How exactly do I modify that? I have a feeling that's where I went wrong. I added the js code you supplied exactly (with no modification) directly to the head of the page, surrounded by:

<script language="javascript">
<!--
code...code...code...
//-->
</script>

The opening / closing action, though is great. Thank you for your continued help. [ed. note: waizen last edited this post 14 years, 9 months ago.]

☆ A M B ☆
894 Posts

benmarte Reply #14, 14 years, 9 months ago

For example if you nav is inside a div with id="nav" then you would have to modify this code on the js


$('li > a')

To this


$('#nav li > a')

Hope that fixes it for you just make sure you use the correct id or class your nav container is using.

Good luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

342 Posts

Willi Waizenegger Reply #15, 14 years, 9 months ago

Okay, so I changed the js in the head to read:

<script language="javascript">
<!--
$(document).ready(function(){
    $('#navigation-left-col li > a').click().toggle(
          function(){
            $(this).next('#navigation-left-col ul').css({'display':'block'})
        
    },
        function(){
            $(this).next('#navigation-left-col ul').css({'display':'none'})
                });
    
      });
//-->
</script>

And because the script is now targeting that side column only, the top menu is working great, but the side menu, while it opens and closes the menu containers perfectly, somehow prevents the links from taking you anywhere. Strange because you can see the links when viewed in the source code but something is blocking the site from being able to navigate within itself when you click on a side menu item. The links just work enough to open/close the menu item.

Again, thank you for your continued effort.

☆ A M B ☆
894 Posts

benmarte Reply #16, 14 years, 9 months ago

If you had a link I could be of more help, the only thing that would do that is if you had a preventDefault or return false on the JS.

You can try doing this:

<script language="javascript">
<!--
$(document).ready(function(){
    $('#navigation-left-col > li ').click().toggle(
          function(){
            $(this).next('#navigation-left-col ul').css({'display':'block'})
         
    },
        function(){
            $(this).next('#navigation-left-col ul').css({'display':'none'})
                });
     
      });
//-->
</script>

See if that works really hard to say since I can't see what you have in order to debug.

Good Luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

342 Posts

Willi Waizenegger Reply #17, 14 years, 9 months ago

Thanks again, benmarte. Unfortunately, that latest code you offered stops the open/close action.

The site is located here: http://67.222.24.164/~hawkresort/index.php. Since I need to work on this site and be able to access different pages while I do so, I need to take the js code off my head while I do so. However, I'll put the original one you presented after I'm done tonight. Not sure if you can (or want to) look at the site after 5:00PM eastern U.S. time (where I am) but I'll have this code up throughout the weekend.

BTW: the 'Recreation' section in the left column has the most submenus.

Thank you.

☆ A M B ☆
894 Posts

benmarte Reply #18, 14 years, 9 months ago

@waizen we might have to rethink how your nav is to work, right now it has 3 levels so since each li has child ul until it reaches the last level it will keep expanding I really don't know why they are linking since there is no prevent default or return false.

The problem is all your li have links so it will not expand since when you click on one it will go to the specific page instead of expanding.

I will see if there's another way to approach this and get back to you. [ed. note: benmarte last edited this post 14 years, 9 months ago.]

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

342 Posts

Willi Waizenegger Reply #19, 14 years, 9 months ago

@benmarte : actually, the menu now has up to four levels (not my idea) in some submenus. Anyway, the levels show up, CSS-wise if I let the thing expand completely, i.e., without the use of the js script you provided and the wayfinder call set to &hideSubMenus=`0`. They do expand/contract, just starting at the second level. Unfortunately, when you look at the left column after I click on the 'Recreation' menu item, you see what you get: way too long of an expansion.

Now, like I said before, I'm nowhere near any kind of js guru but I keep wondering if the script needs an additional bit that tells the system to go somewhere. Something like:

window.location.pathname = "[[~[[id]]]]"

...or something. BTW, I already tried modifying the js to:

<script language="javascript">
<!--
$(document).ready(function(){
    $('#navigation-left-col li > a').click().toggle(
          function(){
            $(this).next('#navigation-left-col ul').css({'display':'block'})
        
    },
        function(){
            $(this).next('#navigation-left-col ul').css({'display':'none'})
                }
function() {
window.location.pathname = "[[~[[id]]]]"
});
    
      });
//-->
</script>

...and it didn't work. No doubt I've butchered the code, but you get what I'm trying to say. [ed. note: waizen last edited this post 14 years, 9 months ago.]

☆ A M B ☆
894 Posts

benmarte Reply #20, 14 years, 9 months ago

@waizen adding that wont achieve since all your list items have links to pages, most of the time accordion menus are used the top level item doesn't have any functionality except to expand and contract the list.

My suggestion is to use some css based on the active class and display the child list items you won't be able to use the accordion menu unless your top level li have no links on them are you attach a class to them.

As for your code it needs to be this so you can see what I mean

<script language="javascript">
<!--
$(document).ready(function(){
    $('#navigation-left-col li > a').click().toggle(
          function(){
            $(this).next('#navigation-left-col ul').css({'display':'block'})
            window.location.pathname = "[[~[[id]]]]"
         
    },
        function(){
            $(this).next('#navigation-left-col ul').css({'display':'none'})
                }

     
      });
//-->
</script>

Using this code might help you understand what I described above better.

Good luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX