Javascript / Drop Down Menu Help

By mudanoman on 7 Nov 2006 at 20:24 UTC

Looking for someone familiar with javascript and working out some tweaks on a navigation bar.

Fixes include.

- the drop down seems to be offset in IE6, in IE7 and FF it works fine
- the drop down seems to leave white areas when it drops down over content (leaving areas of content white)
- the drop down main link needs to be changed into a link. Right now it has a rel tag and in active.

Using script: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
two files: a css, a js file. I chose to go with this route instead of nice_menus module due to saving queries during page load.

Seems to work fine for the most part expect for these issues.

Thanks,

Ivan

Comments

have you tried the

budda

English

Cheshire

commented 9 November 2006 at 23:49

have you tried the alternative drop down menus in the JSTools or nicemenus modules here on drupal.org?

--
Ixis (UK): Drupal support, Drupal hosting.

re: Drop down menus for Navigation

dwees commented 12 November 2006 at 12:46

I'm currently using the Son of Suckerfish drop down menu, with an added JS file for IE. You can check it out at:

www.columbiasecondary.org

It seems to work fine...

Very clean! I will

mudanoman commented 12 November 2006 at 19:50

Very clean!

I will definitely look into it: http://www.htmldog.com/articles/suckerfish/dropdowns/

The one thing I am curious about is if say there is a flash element/video underneath the drop down does it create white spaces over the element or not. That was on of the big issues we were having with the Dynamic Drive script.

Thanks!

re: White Spaces

dwees commented 14 November 2006 at 15:29

We haven't had any video or flash elements on the site, so I don't know. It would be worth testing.

However how the script works is pretty simple. Basically some version of IE don't recognize the :hover pseudo-class properly or the 'first child' pseudo-class. What the JS appears to do is to add a class to the elements that require it 'on-the-fly' (and then have this class be appropriately positioned through CSS).

Given that this is essentially an entirely CSS solution, you shouldn't have any issues with any other content. However, I could be completely wrong, having not done any testing.

Dave

Fix for IE 7

dwees commented 18 November 2006 at 15:43

If you want to use this in your site, you will need a fix in your page.tpl.php file. Specifically, in the header you need to include:

    <!--[if IE]>
	<style type="text/css">
	#nav li:hover, #navli.hover {
    position: static;
	}
	</style>
	<![endif]-->

This fixes a bug with the Suckerfish Drop down menus in IE 7. You could probably adjust the conditional part of this statement so it only hits IE 7, but the code doesn't seem to affect any lower versions of IE.

Dave