Thu, 2010-07-08 23:27
Hi,
Using the standard SpryMenuBar in Dreamweaver CS5 as a template, I styled my SpryMenuBar to suit and match my website. One thing I didn't like about the SpryMenuBar was that long text in submenus caused the long text to extend beyond the submenu's div.
I added some CSS to fix this (based on some Google results I found) and it works fine in Firefox, but in Internet Explorer my submenus drop down horizontally instead of vertically.
A working example can be found at the same link from my previous post www dot abstractproductions dot com dot au/about-us.php
The CSS that was changed reads as follows:
/* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: auto; min-width: 120px; float: left; } /* Submenus should appear below their parent (top: <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: auto; min-width: 120px; position: absolute; left: -1000em; } /* We want the menu items in our sub menus to * fill up the entire width of the sub menu, so * make sure it is display:block and not floated. * Also remove any specified width from the default * style sheet and turn on "nowrap". */ ul.MenuBarHorizontal ul li { display: block; float: none; width: auto; min-width: 120px; white-space: nowrap; border-bottom: solid 1px #000; }
The main change is that the widths of ul and li are now auto. What I think is happening (in IE) is that the width of ul.MenuBarHorizontal ul is becoming large enough to hold all of its children horizontally, due to the "width: auto" setting.
Changing the "width: auto" setting to a pixel value does make the menu drop vertically in IE (so long as the said pixel value isn't too large), but this also causes inconsistencies in the background of the submenu items so I don't think this is an ideal solution.
Thanks in advance.
Fri, 2010-07-09 00:48
#1
What is a "SpryMenuBar"?
What is a "SpryMenuBar"?
Fri, 2010-07-09 00:57
#2
Thanks for your reply, "A
Thanks for your reply,
"A Menu Bar widget is a set of navigational menu buttons that display submenus when a mouse pointer hovers over one of the buttons. Menu Bars let you display a large amount of navigational information in a compact space, and also give visitors to the site a sense of what is available on the site without having to browse it extensively."
The SpryMenuBar simply uses Spry to achieve this. "The Spry framework is a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript, without the need for refreshing the entire page. Spry also provides easy to build and style widgets, providing advanced page elements for end users."
Fri, 2010-07-09 01:05
#3
So, it's some sort of
So, it's some sort of proprietary drag and drop, one size fits all, system incorporated into The Weaver of Lies?
You should use a system like jQuery Superfish or Suckerfish.
Something that offers you a higher level of power to customize and tweak to fit your needs.
Sun, 2010-07-11 02:44
#4
Thanks Deuce, I've changed to
Thanks Deuce,
I've changed to Superfish and yes it is much better.