Responsive Side Toggle Menu Enhancements

[jdadwilson]

1) Script Title:
Responsive Side Toggle Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...togglemenu.htm

3) Describe problem:
One issue and two suggestions...

Issue: It would be nice to be able to adjust the placement of the top of the menu (vertically). My site included a top fixed navbar. When I implemented the Side Toggle Menu the first <li> entry was hidden behind the navbar. I worked around the issue by including a <br> before the first <li>.

Suggestion 1: Include a parameter (if possible) that would allow for all secondary level <ul>'s to close when another <ul> is opened. This capability is included in the Glossy Accordion Menu.

Suggestion 2: Include a parameter (if possible) that would allow for a hover image for the down arrow. The design of my site uses red lettering (and a red arrow) but the hover is dark brown background with white lettering. The red arrow with the dark brown background is not the best.

One final word... Great menu option and VERY EASY to implement.

jdadwilson

p.s. DreamWeaver did indicate a lot of potential errors from missing semi-colons in the js script.

[styxlawyer]

It should be possible to change the vertical position of the menu by adding "margin-top:2em;" (or some other appropriate value) to the ".sidetogglemenu{" section of the CSS file.

Dreamweaver is just being pedantic. Semicolons are optional in JavaScript but, if the code is going to be minified, it can break if the semicolons are missing. As a lifelong C, C++ & C# programmer I've always used them and never had a problem with JavaScript or PHP.

[molendijk]

In order to position the top of the menu beneath the bottom of the fixed navbar, you have to give the navbar an ID, say 'fixed_navbar'. Then you would do, at the end of the body section:

<script>
function navbar()
{
document.getElementById('togglemenu1').style.marginTop=document.getElementById('fixed_navbar').clientHeight+0+'px';
document.getElementById('togglemenu1').style.maxHeight=document.body.clientHeight-parseInt(document.getElementById('togglemenu1').style.marginTop)+'px';
}
navbar()
</script>

If there are other elements that you want to push the menu down, you have to take their clientHeight into account too. As an exercise, see what happens if you replace 0 above with a greater number, say 50

[jdadwilson]

Anyone from DD have a response to my suggestions?

jdadwilson

[Beverleyh]

Issue: It would be nice to be able to adjust the placement of the top of the menu (vertically).

You should be able do it with CSS - Try;

#togglemenu1 { top:5em !important }

Suggestion 1: Include a parameter (if possible) that would allow for all secondary level <ul>'s to close when another <ul> is opened. This capability is included in the Glossy Accordion Menu.

From a UX standpoint, on small screen devices this isn't usually a desirable behaviour. Imagine opening a large sub-menu and scrolling to the bottom, only to close it and have the menu contract; pulling the screen up with it and landing you in the middle of the page. It could be rather disorientating. That might be the reason for DDadmin's setup - although maybe it could be added as a desktop feature? Although for consistency across devices, one easily learnt and recognisable behaviour is usually best. DDadmin can hopefully provide his thoughts on that when he has time.

Suggestion 2: Include a parameter (if possible) that would allow for a hover image for the down arrow.

How about doing something with CSS? You could put a background colour on the arrow, and extend it a little way with a border. Something like this;

.sidetogglemenu a img.downarrow { background:#fff; border:3px solid #fff; border-radius:50% }

You could change the colour on hover;

.sidetogglemenu a:hover img.downarrow { background:yellow; border:3px solid yellow }

Or you could use an image with a contrasting background colour to begin with.

[molendijk]

You should be able do it with CSS - Try;

#togglemenu1 { top:5em !important }

But giving a fixed top position to the menu will cause its bottom to be out of sight (below the view port). Even if you would fix that for a given (vertical) window size, the issue might reappear with smaller horizontal window sizes, for instance, when the text of the nav bar is long. So I would prefer the javascript solution given above.
Maybe a css solution using table and table-cell could do it, I haven't tried that one.

[Beverleyh]

But giving a fixed top position to the menu will cause its bottom to be out of sight

Yes, on long menus/short viewports, but it doesn't really hinder usage because the scrollbar kicks in, so its still accessible. No fix needed, unless I'm missing something.

[jdadwilson]

You should be able do it with CSS - Try;

#togglemenu1 { top:5em !important }

This does not work. I set the margin-top to the desired height and it works fine. Probably not the best solution, but it works.

From a UX standpoint, on small screen devices this isn't usually a desirable behaviour. Imagine opening a large sub-menu and scrolling to the bottom, only to close it and have the menu contract; pulling the screen up with it and landing you in the middle of the page. It could be rather disorientating. That might be the reason for DDadmin's setup - although maybe it could be added as a desktop feature? Although for consistency across devices, one easily learnt and recognisable behaviour is usually best. DDadmin can hopefully provide his thoughts on that when he has time.

Not sure I totally understand your reply. I probably was not clear on the issue. Reference my test site menu (http://www.txfannin.org/new-site/index.php Note in the OTHER LINKS menu there are three sub-menu areas. Selecting the first displays the sub-menu items. Selecting the second does likewise. BUT the first sub-menu remains displayed. The desire is to have any open sub-menus close when any sub-menu is opened. This feature is implemented in the DD Glossy Accordion Menu

How about doing something with CSS? You could put a background colour on the arrow, and extend it a little way with a border. Something like this;

.sidetogglemenu a img.downarrow { background:#fff; border:3px solid #fff; border-radius:50% }

You could change the colour on hover;

.sidetogglemenu a:hover img.downarrow { background:yellow; border:3px solid yellow }

Or you could use an image with a contrasting background colour to begin with.

The first option works... But, what would really be desirable would be to have four options.
1. Normal state with a down arrow.
2. Normal state hover with a different color down arrow.
3. Selected state with an up arrow.
4. Selected state hover with a different color up arrow.

Given that the downarrow is implemented in the .js (and my limited knowledge of js) it is difficult to accomplish the desired effect.

Thanks for your assistance.
jdadwilson

[Beverleyh]

#togglemenu1 { top:5em !important }

This does not work.

I've just tested and can confirm the that DOES work for the demo as it comes from the DD page.

Not sure I totally understand your reply. I probably was not clear on the issue. Reference my test site menu (http://www.txfannin.org/new-site/index.php Note in the OTHER LINKS menu there are three sub-menu areas. Selecting the first displays the sub-menu items. Selecting the second does likewise. BUT the first sub-menu remains displayed. The desire is to have any open sub-menus close when any sub-menu is opened. This feature is implemented in the DD Glossy Accordion Menu

Yes I understand what you mean but I maintain that it generally isn't a desirable behaviour *now* for usability reasons. The Glossy Accordion menu is a much older script - originally created in 2008 and last updated in 2012, before responsive design became mainstream, and before mobile usability became an issue. On a large screen, the menu is a small part of the whole interface, so having sub-menus automatically contract isn't (wasn't) so much of a concern because you can keep your bearings within the context of the whole experience. Mobile on the other hand, changes the context of the menu - it becomes the only thing to occupy the screen, so menus with many items and many sub-menu items can easily disorientate a user. If the user had opened a long sub-menu and scrolled to the bottom of their screen to see lower items, only to have it close/contract automatically, outside of their control, when they tried to expand another menu item, they would lose their place as what they were previously looking at escaped away from them, back up the page and out of site, leaving them looking at whatever the menu was previously obscuring. Cue lost bearings. Cue confusion. Cue frustration.

I can't speak for DDadmin though so he might interject some alternative wisdom the next time he's passing.

[molendijk]

Yes, on long menus/short viewports, but it doesn't really hinder usage because the scrollbar kicks in, so its still accessible. No fix needed, unless I'm missing something.

Beverleyh, you're right, except that a vertical scrollbar without visible 'endpoint' doesn't look good. Also, 5em may be right for certain windows and bad for narrower ones (because the fixed navbar may take more vertical space there).