Smooth Navigational Menu (v1.51) on Android Tablet

[mclaborn]

1) Script Title: Smooth Navigational Menu (v1.51)

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

3) Describe problem:
Trying to get this to work propertly on an Android tablet. On the iPad, when I touch a top-level menu item, it only expands the menu sub-items. On the Android tablet (built in browser) when I touch the top-level menu item, it expands the sub-items but also navigates immediately to the top-level link address instead of waiting for a sub-item to be touched. How can I make this work?

[jscheuer1]

The css will probably have to be updated and I can help you with that if this functions as desired, try this unofficial update (right click and 'Save As'):

ddsmoothmenu-sep-shadow-sep-headers-uniwhile.js

It has a bunch of bug fixes and some extra features. Hopefully it will take care of the issue for you.

[mclaborn]

Thanks John. It does fix the problem on the Android tablet!

I noticed that my down arrorws next to the top level menus are not showing up. Haven't had time to investigate yet. I'll do more testing on various browsers and devices and post more results later.

[jscheuer1]

OK, that's the css differences I was talking about. I moved most of the functionality of theming to the css. So a few selectors and how they're used have changed a little. The scripted theming (customtheme property in the on page init) still works, but I would suggest that if you're using it, switch to all css. You still configure the arrows in the script. Their positioning is in the new css files, but shouldn't need to be changed. Without that (missing in the old css files) I can understand why you're having problems with the arrows. Colors may be different than you're using. The new css files are well commented. So you should be able to see what is what, any questions though, just ask. First backup the ones you have, just in case there's anything in them you might want to reference later. Here are the updated ones (right click and 'Save As'):

ddsmoothmenu.css

ddsmoothmenu-v.css

There is an option for a hover change of the arrow images. If you use it, you will need the over images (or you can make your own to suit your theme, these go with the css I'm giving you):



The right_over.gif arrow I will have to attach to the next message because only 3 files are allowed per post.

If you're not using this feature, don't worry about it. To turn it on in the on page ddsmoothmenu.init call use this highlighted property:

ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" defaults to Horizontal
	arrowswap: true,
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

The over images need not be configured anywhere. The script takes the filename and location of the normal arrows and adds _over to the filename. So if whatever.gif is an arrow image, the script would look for whatever_over.gif as the over image if this feature is turned on. The script adds :hover css to the page automatically, so there's a chance it will work on touch devices. If not, hopefully it will degrade well. If not, let me know and I can disable it for touch devices.

BTW, the default method for these menus is now click to open/close. If you want non-touch devices to still do hover, you need to set it in the on page init:

ddsmoothmenu.init({
	mainmenuid: "smoothmenu-ajax", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" defaults to Horizontal
	arrowswap: true,
	method: 'hover', //'hover' (mouseover/out) or 'toggle' (click), defaults to 'toggle'
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	contentsource:  ["smoothcontainer", "external.htm"]
})

The script will detect touch devices and switch to 'toggle', which is click for them.

[jscheuer1]

Here's that right_over.gif:



Please read my previous message for details on it and on necessary updates for the css files which are attached to the previous message as well.

[mclaborn]

John - it is working well so far. I'm not done testing yet, so may have some questions later.

Was your intent that we custom the CSS files directly, or add overrides to the styles elsewhere, e.g. in our own style sheet? For example

.ddsmoothmenu ul li a.selected { 
background: lightblue !important; 
color: navy !important;
}

Makes it hard to change the colors of the selected menu item with overrides. If I have a vote, I would vote to remove the !important so I can override.

[mclaborn]

Bug report on this version: If the top level menu wraps to two lines, clicking one of the menu items on the top line causes the submenu to appear, but the submenu is behind the 2nd line of the main menu. Seems like the submenu needs a higher z-order so it will show over the 2nd line of the main menu.

[mclaborn]

Another bug: touching outside the menu does not hide the visible sub-menu on iPad. Works in other browsers and Android.

[jscheuer1]

Yes my intent was that we customize the css directly. However, if you want to keep the css file unchanged and add your own modifications in another stylesheet, a property value with the !important keyword can be easily overridden by another later one for the exact same selector if that later one also uses the !important keyword for its property value.

BTW - !important was only used to overcome a css bug in IE 8 or 7 (forget which) and earlier whereby without it, the .ddsmoothmenu ul li a.selected was not overriding the .ddsmoothmenu ul li a selector. I believe there may be another way of overcoming it. However, as I say, if you choose to override it, just add the !important keyword to your style properties for that selector.

And the .ddsmoothmenu ul li a.selected only comes into play when a menu item is active but no longer being hovered, as is the case when it triggers a drop down and the mouse then moves over that drop down.

I've fixed the bug of a wrapped main menu bleeding through drop downs from the unwrapped portion (same filename, so be careful):

ddsmoothmenu-sep-shadow-sep-headers-uniwhile.js

In it I also take a stab at fixing the issue you mentioned with ipad. I have no such device to test on. However, I'm guessing that adding window to document as the elements to look for clicks on that are outside the menus may fix that. If not, I will have to try adding an EventListener for touchstart or whatever it is in ipad.

Now I'll assume for now it would be the same on iphone, and that it's not required for any android products. But that will only come into play if adding window hasn't taken care of it.

After adding this updated script - The browser cache may need to be cleared and/or the page refreshed to see changes.

Edit: Just in case, I decided to go ahead and research and do a version with a document touchstart event for ipad and iphone.

So if the above doesn't fix the ipad issue of tapping in an empty area outside the menu not closing the open sub menus, try this version:

ddsmoothmenu-sep-shadow-sep-headers-uniwhile-itouch.js

The browser cache may need to be cleared and/or the page refreshed to see changes.

[mclaborn]

Re: css !important: got it - I'll override with !important.

Fix confirmed for the bleed through problem.

iPad still not working. I can work with you in testing this as needed. If you prefer to IM or call for this, let me know.