Help with dHTML/CSS Menu Aligning + Sizing

[TonyLock]

Take a look at the animation below. It shows what I have now and is a dHTML menu:

As you can see, it uses the full span of the browser.

The sub menus are all of fixed lengths (that's why Sub menu 2.3 wraps).

And the sub menus position themselves from the left end of the parent menu.

However, below is a mock up of what I want:

As you can see, the menu is now right aligned and doesn't use the fullness of the browser window.

The sub menus all have a MINIMUM width.

The sub menu also expands when the menu label is longer (e.g. Sub menu 2.3).

And the sub menu also positions itself from the right of it's parent.

How do I do this? I've included the code for the first example here:

dHTML_Menu.zipFetching info...

I'd really appreciate your help. Thank you.

[TonyLock]

Does anyone have any suggestions for this?

[sweetsam]

Not sure how you would do it in a DHTML menu or it makes a difference being dhtml. But in html one would set it up as an unordered list and float ul tag to the right and li tag to the left. That way the element would take up the width they need. Padding can be used to provide the text some breathing space. Hope this helps.

[TonyLock]

Not sure if that would work. Do you think you can try that out on the attached example code for me?

[primexx]

why don't you use a css dropdown and make it easier for yourself and everyone else? nobody uses dhtml anymore.

[TonyLock]

It is a CSS menu, what do you think the "d" stands for in "dHTML"?

And my code what a variation developed from that Suckerfish code on that site.

[TonyLock]

I know it can be done, take a look at this:

http://en.gravatar.com/site/terms-of-service

[The_Decryptor Veteran]

  TonyLock said:

It is a CSS menu, what do you think the "d" stands for in "dHTML"?

...

DHTML = JavaScript + HTML (and maybe CSS)

That your menu does nothing at all if JS is disabled means it isn't using CSS for the actual display, it's using JavaScript.

Anyway, the problem is this bit of CSS you have in the ".jqueryslidemenu" selector

width: 100%;

Replace that with "float:right;"

[TonyLock]

Thanks Decryptor :-)

I've dome that but the sub menus still appear to be left aligned to the parent. Do you have any ideas?

[Gally]

I took a quick look at the code, I think this is what you mean:

<div style="width:100%">
<div style="right:0px;width:350px;position:absolute">


<div id="myslidemenu" class="jqueryslidemenu">
<ul id="nav">
	<li><a href="#">Menu 1</a>
		<ul>
			<li><a href="#">Sub Menu 1.1</a></li>
			<li><a href="#">Sub Menu 1.2</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 2</a>
		<ul>
			<li><a href="#">Sub Menu 2.1</a></li>
			<li><a href="#">Sub Menu 2.2</a></li>
			<li><a href="#">This is a very long sub menu label 2.3</a></li>
		</ul>
	</li>
	<li><a href="#">Long Menu Label 3</a>
		<ul>
			<li><a href="#">Sub Menu 3.1</a></li>
			<li><a href="#">Sub Menu 3.2</a></li>
			<li><a href="#">Sub Menu 3.3</a></li>
		</ul>
	</li>
</ul>
<br style="clear: left" />
</div>


</div>
</div>

Put the #myslidemenu div inside a div telling it to stay right of the div with width of 100%.

Edit: you'll have to tune it yourself, thats just a rough edit.

[TonyLock]

Thanks but I was hoping the sub menus would alight from the right of the parent menu.

[Gally]

I think I have it!, ill upload in a sec.

Edit: Download Link

Edited June 14, 2009 by Gally

[TonyLock]

Cool, thank you.

It words perfertly in Chrome and in FF but in IE, the sub menus are still Left aligned. Why is IE such a dush?

[Gally]

Yeah, I used chrome when i was editing it, as for ie... i'll check it now...

Edit: Works perfect in IE8, is left aligned in IE7 and left aligned with padding on the third menu in IE6, maybe you could ad an alternate stylesheet for IE6 and IE7.

[TonyLock]

Here's another question for you. When overing over the sub menus, the background of the hover color of the parent disappears. Any idea why? When hovering in the sub menu, I wanted the parent's background color to remain black.

[Gally]

Thats something to do with a:hover, that would require javascript. Ill take a look at it but I know very little about js.

[TonyLock]

Do you think you can adapt the code on this page to right align the sub menus?

http://be.twixt.us/jquery/suckerFish.php

[Gally]

That could be very helpful, ill try..

[TonyLock]

I really do like jQuery, it has some wonderful effects...

[Gally]

This is actually much better code, i'm making a new menu with it, just need to change th font and stuff to make it match the other one.

[TonyLock]

Thank you Gally, I'm looking forward to seeing what you've come up with

[Gally]

Done. works perfectly with chrome, IE8 & safari, minor bug in IE7 with longer sub menu titles, extra padding below sub menu options in IE6. Overall animation works much better with right alignment than old menu.

Dropdown_Menu_2.zipFetching info...

[TonyLock]

FANTASTIC!!!!!

Thank you so much, you're a genius :D

[TonyLock]

OK, here's a Question, how do I dynamically add the down arrow ("▼" or rather "▼") to the top menus?

Here was what I was using in the past... but I don't know where to add the code in to your new script

$(this).children("a:eq(0)").append('<span>▼</span>')

[Gally]

The down arrow I put in is from the character map, its just a letter, in the one used in the other menu was a picture, When you say dynamically you mean it only shows when its active? If so you can put in the picture from the other one in and you should be able to control it in the css.

[Gally]

Right, made some small changes, it now looks slightly better in IE7 and the arrow changes direction when active. You might want to adjust them. You can easily change the images to do this.

Dropdown_Menu_2.1.zipFetching info...

Edited June 15, 2009 by Gally