SmartMenu dropdown doesn't work if Main Menu is Display Inline

[ZeRoFrEeZe]

Hi, It seems that the dropdown menus won’t drop down if the main menu “a” tags are display:inline;
Assuming that I am unable to use display:block; , but only display:inline. Is there anyway to make it work?

Demos:
1. working – http://jsfiddle.net/94vNj/1/
2. non working (css change, ‘.sm a’ all display inline) – http://jsfiddle.net/94vNj/2/

Also, upon further testings, if I set only the first main menu “a” tag to display inline, all of them will not work as well.

3. non working (only first a element display inline) – http://jsfiddle.net/94vNj/3/

[admin]

Yes, this is done intentionally. There is a check in the script (the “isCSSOn()” method) that tests the computed display of the first link in the menu tree and when it’s not “block”, the script assumes CSS is disabled in the user agent. And in that case the script prevents handling events (e.g. focus, mouseenter, etc.) so that accidental JS errors are not produced.

So basically in the current code it’s always assumed that the menu item links will have “display:block” applied (this is set in the core CSS and it’s not recommended changing anything there since it might break some script feature).

And this brings the question why exactly do you want to set “display:inline” to the menu item links? I mean is there something you can’t achieve when “display:block” is used?

[ZeRoFrEeZe]

Thank you very much for your response & explanation.

Reason I need display:inline is that I am trying to text-align:center the menu item links. As the menu item links text are dynamic, width of each item could change anytime.

Some alternatives is that I could use padding or position % to push it to the center, but these methods have some other limitations for me as well.

I am just wondering if there is any other way to check if the CSS is disabled?

[admin]

OK, I see. No need to apply the “display:inline” on the links. You can use “display:inline-block” for the main menu LIs instead – e.g. something like this:

#main-menu {
	text-align:center;
}
#main-menu ul {
	text-align:left;
}
#main-menu > li {
	float:none;
	display:inline-block;
	margin-right:-4px;
}
*:first-child+html #main-menu > li { /* for IE7 */
	display:inline;
	margin-right:0;
	zoom:1;
}
* html #main-menu li { /* for IE6 */
	float:none;
	display:inline;
	zoom:1;
}
/*
 Override the above in collapsible mode.
 Make sure the break point width is the same as the one in the theme you use.
*/
@media screen and (max-width: 640px) {
	#main-menu {
		text-align:left;
	}
	#main-menu > li {
		display:block;
		margin-right:0;
	}
}

This will work in all browsers including IE7+.

But I will try to think of some safer way to check if CSS is disabled too.

Cheers!

[ZeRoFrEeZe]

Right!! That works as well.

Thank you very much Admin.

Sad to say, for my situation, the website audience sometimes involve users from China. Therefore there is a need for me to support for IE6 as well. If I’m not wrong, that’s where the inline-block problem comes in.

I will make-do with your suggestion for now, thank you once again!!

[admin]

OK, sorry, I didn’t think you’d need IE6 support too – I added another rule for it in the code sample above. Just take a look at the previous post again.

Cheers!

[wmorton]

I’m having trouble following this. My horizontal menu is on the left edge but everything else on my page is centered (800px width content container). I can’t find the #main-menu code anywhere, and trying to insert in to the sm-mint css isn’t working. Could I possibly be missing a file? I really want to get the menu items centered within the 800px column of my page.

[GingerNut]

I know this is an old topic, but I have just used this to center my menu 🙂

I would now like the menu to only be the width of the text in it please?

eg. http://www.hampshirevolleyball.org.uk/

This is using an older version of SM, but I can’t seem to replicate it with scss 🙁

Yours Roy

[Author]

Posts