Responsive Side Toggle Menu Enhancements

[Beverleyh]

5em was just a random value given as an example. It could be modified, or used within media queries, for each use case.

No problem about the scrollbar endpoint - that can be fixed with CSS too;

#togglemenu1 { top:5em !important; bottom:0; height:auto }

[molendijk]

5em was just a random value given as an example. It could be modified, or used within media queries, for each use case.

I know, but it's a fixed value. Now when the navbar (containing large text) displays in smaller windows, it'll take more and more vertical space, and may end up being partially hidden by the menu or partially hiding the menu. Resolving this issue with the help of media queries would force us to use too much breakpoints.

No problem about the scrollbar endpoint - that can be fixed with CSS too;

#togglemenu1 { top:5em !important; bottom:0; height:auto }

You're right.

[Beverleyh]

Resolving this issue with the help of media queries would force us to use too much breakpoints.

Such is responsive design. Setting media query breakpoint (tweakpoints) when the content *breaks* the layout is recommended practice, so we can just set one when needed. Of course in UXD one would then address the suitability of a heavy populated navbar on mobile - at which point we question and reevaluate the suitability of the navbar (use a different content delivery pattern perhaps) or just show priority navigation, moving secondary navigation elsewhere.

[molendijk]

Beverleyh, I would think that the choice between using css or javascript is a question of coding technique, not a question of user satisfaction.

[Beverleyh]

Choice of JS or CSS to solve a problem isn't what I was addressing - I raised UXD in reply to your given scenario molendijk;

Now when the navbar (containing large text) displays in smaller windows, it'll take more and more vertical space, and may end up being partially hidden by the menu or partially hiding the menu.

in UXD one would then address the suitability of a heavy populated navbar on mobile - at which point we question and reevaluate the suitability of the navbar (use a different content delivery pattern perhaps) or just show priority navigation, moving secondary navigation elsewhere.

I hope that clears up any confusion.

[jdadwilson]

Wow, I surely didn't expect such a simple (for me anyway) issue to cause such a discussion. You are way over my head.

But... forget for a minute the smaller viewports. Note the home page for my test site http://www.txfannin.org/new-site/ as viewed on a large viewport. Selecting the MORE LINKS option in the top navbar displays my "Side Toggle Menu" which contain all the links to the areas of the site. Note also that three menu items have sub-menus as indicated by the down arrows. Selecting the first menu item with sub-menus displays the sub-menu items as desired. Next, select the second menu item with sub-menus. It too displays the sub-menus (first sub-menu items are still displayed). WAIT... what happened to the third menu item with sub-menus. It is off the screen (unless you have a very tall monitor)!

It just seems to me (at least in this instance) that if a user is navigating through a site and they select a sub-menu area and decide to then look in another sub-menu area the first area should collapse when the second is selected. If there are five areas and they are all open it would make for a confusing experience (just my thought).

Again, thanks for your great products and greater support.
jdadwilson

[molendijk]

On my machine, the third menu is not visible even if no sub-menu is open.
There's probably something on your page that prevents the menu from producing a vertical scrollbar.
Replace

<div id="togglemenu1" class="sidetogglemenu">

with

<div id="togglemenu1" class="sidetogglemenu" onClick="expandlength = ' '">

If that doesn't help try

<div id="togglemenu1" class="sidetogglemenu" onClick="expandlength = ' '" style="position: absolute; overflow: auto; ">

[Beverleyh]

It just seems to me (at least in this instance) that if a user is navigating through a site and they select a sub-menu area and decide to then look in another sub-menu area the first area should collapse when the second is selected

This is the behaviour that we should ideally avoid because it takes control away from the user. Manual contraction (the kind your menu currently has) is generally considered more user-friendly because the user stays in control - they can choose when and how they want to navigate - maybe comparing menu items from different sub-menus in order to decide on the most suitable destination.

I can't comment on your non-scrolling issue that molendijk has identified as I'm stuck on iPhone for now, put you could try to investigate at your side with the developer toolbar - great for troubleshooting - F12 in most common browsers. You would select the side menu container and check to see what styles are being applied/overridden and then you can hopefully counteract them directly.

[jdadwilson]

The first option does not work. The second option works but has a BAD side effect. A vertical scroll bar is added which allows the page to be scrolled to see the entire menu as desired, BUT when the page is opened a second time a horizontal scroll bar is added thus allowing the scrolling to the right to see the 'hidden' menu.

jdadwilson

[molendijk]

Then try

<div id="togglemenu1" class="sidetogglemenu" onClick="expandlength = ' '" style="position: absolute; overflow-x: hidden; overflow-y: auto; ">