css problem with a horizontal menu - i'm stuck :)

Hi there,

i try to create a horizontal menu which is positioned on the right side of the website. the site is three level deep, and the third level will show up if you hover on the second level menu...the problem is now, that since it’s positioned on the right side, the third-level submenu should ideally align with the right side of the second level list element (right side third-level list-element aligns with right-side second-level, submenu going left) like here:

http://www.kunane.com/test/index.php?id=6

the problem is now, that on hover it pushes the second level list elements apart, because the ul that shows up is set to "position:relative".
normally i would use "position:absolute" but then the third level submenu aligns with the left side of the second level element and displays to the right side...like here:

http://www.kunane.com/test/index.php?id=10

does anyone know how to do this...or does anyone know a website that uses similar menu?

thanks, j

okay, i think i got it solved...

http://www.kunane.com/test/index.php?id=12

i positioned the flyout absolute, set it to "left:100%" and subtracted the width of the flyout "margin-left: -200px;"

further there was no need for any "float:right;" i just didn’t assign a specific width to the horizontal UL, positioned it absolute and placed it with "right:0px" on the right side

this is tested with WinXP FF3 & 2, IE6 & 7, Safari3.1, Chrome & Opera 9.22 (will test further)

any thoughts on this solution, or other ideas?

thanks, j

Hi Sharkbait,

Is there a reason you need the second and third level items floated right rather than left? It just looks a little wrong to me. We read left to right, so having the drop downs right aligned with a ragged end (one the proper nav is in) just doesn’t work for me (But I am a bibliophiliac). I’d try having the nav bar right aligned, but the drop downs coming left aligned. As long as you set your main content container to overflow the nav will display across the edge of the page.

As to the method of doing it, I usually use the suckerfish method for drop down menus.

Cheers
Free

Is there a reason you need the second and third level items floated

actually i didn’t design it, i just have to do the html/css & MODx-ing

if i would align the dropdowns on the left side, the submenu would create scrollbars when the futhest item to the right is hovered...

...you are probably right about the menu floated to the right looking a bit awkward/unusual, and it would have been so much easier for me to create a "normal" one

i think i should have asked someone from the persian MODx forum for right-to-left designs & solutions or just browse some arabic websites

btw, i actually use the suckerfish script for IE6

thanks for looking at it, j

Hey no worries

Not that you need it, but overflow:visible should fix the scroll bar issue.

Not that you need it, but overflow:visible should fix the scroll bar issue.

thanks

Hi F O’Toole,

i’m playing around with your suggestions of the dropdowns being aligned to the left side, but still not sure if the horizontal scrollbar that appears can be stopped (or maybe it should be there anyways - ? )

but overflow:visible should fix the scroll bar issue

http://www.kunane.com/test/index.php?id=10

not really sure where to place it...i tried in several places, the scrollbar persists (1024px monitor)

thanks, j

Hey sharkbait,

I see you’ve put overflow:visible on #wraper and on body. If you leave it on #wrapper and change it to hidden on body it will stop the scroll bar on the page itself - the only problem is users wont be able to see any navigation that flows off the page.

Another solution would be either to make the navigation items narrower and/or bump the entire nav bar slightly to the left. If you move it to the left the same width as your wrappers padding (if you are padding it) it wont look out of place.

Hope that helps
Free

Is this being done with wayfinder ??

If so and from what I have read can you not create your own templates for the it ??

If so I would give the last 2 li ul’s in the second level a different class and align them so that they appear aligned on the right had side ( IE: the right of the box would appear in line with the right of the word ) and actually come back into the site ( have I explained that right ?? )

Not sure if it is possible in wayfinder but I’m sure someone will point you in the right direction if it is.

If not I would approach the client to see if there actually going to add new pages and if not hard code it, if they are find out where and if only on the 3rd level I would hard code the top 2 and do separate wayfinder calls to only display the 3rd level.

Hope that helps or even gives someone else a idea that could work

^^ Wow, a modx solution, that’s always good

I know you can easily add a last class to wayfinder - aligning that one right is brilliant - as long as the customers designer doesn’t complain.