Force Menu to open Left, not Right...

[Isadore]

I came across (you may be familiar with it) a pure CSS horz/vertical dropdown Menu system that has a small bit of javascript to complete the system. The page demonstrating this Menu system is at:

Suckerfish Dropdowns - Vertical

The Javascript function appears as:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
  var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
	this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
	this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

..the CSS elements can be seen in the page source of the above link. My question is what would need to be added to force the menu to open left rather than right as the above example shows? This is a pretty good system for a pure Menu so thought it worth sharing (it may be a CSS issue but my gut feeling is that this is control by javascript).

 

[Isadore]

One note: I did find in the CSS code that the following acts on the 2d tiered list. The following causes the 2d layer menu to open right:

#nav li ul { /* second-level lists */
  position : absolute;
  left: -999em;
  margin-left : 11.05em;
  margin-top : -1.35em;

...this causes the Menu to open Right:

#nav li ul { /* second-level lists */
  position : absolute;
  left: -999em;
  margin-left : -11.05em;
  margin-top : -1.35em;

Where the margin-left value, if negative, forces the menu to open left, if positive, to the right.

No rush on this. It was my impression that this particular CSS Menu system was worth taking a look at. Thanks!

 

[Isadore]

Just finished tweaking the CSS Menu at a blog I am starting up. If you visit this page you will find the CSS driven MENU under the category "Primary references".

From what I understand of the reading the above javascript is strictly required to run the CSS Menu in IE (works without the javascript in Firefox et al.)

I have the MENU opening to the left; which works; but thought that if one could write a few lines of javascript to cause the menu's 'margin-left' param to shift with screen size might be a pretty nice system. Just a thought, and I looked for quite some time to find this (Blogger, where I am building a blog, does not (as far as I know) allow you to upload a ".js" file so it has to be either java or CSS and the latter seems to work great with the exception of not knowing where the screen boundaries are located relative to its opening position.