Help - jQuery Multi Level Menu - Drop Down Position

[atomgroom]

Hi Everyone-

I am working with this jquery / css based drop down menu navigation.
http://www.dynamicdrive.com/style/cs...ss_menu_2/P60/

I've got everything just the way I want it, except for one small item.

I am looking to have the last one or two top menu items to the right -to have their drop down menu positioned and drop from the right, rather than the left:0; positioning.

Attempting to add a separate class didnt work for me, hoping maybe someone out there has done this maybe.

Any help is appreciated. Long Live CSS and Jquery!

Thank you in advance to anyone who can lend a hand.

[ddadmin]

The script already will drop the sub menu from the right of the anchor if it's too close to the window's right edge and will become partially hidden. Or are you asking how to do this regardless of the circumstances?

[atomgroom]

@ddadmin-

Oh Nice! I didn't even catch that it did that. That type of position is what I would like to apply to my last two menu options in the navigation.

The reason why is due to my main content wrapper size. It's set to fit to accommodate 8x6 users, so in that sense rather then getting that type of position just by screen size, I'd like to have control over it and just force those last two to automatically drop or anchor from the right.

If you can help further that'd be awesome.

Thanks
AG

[ddadmin]

Sure, try the below modified .js file. Then in your LI anchor where you want its sub menu to drop to the left, add class="left" inside it. Using the original menu's HTML as an example:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="left"><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li class="left"><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

[atomgroom]

@DD Admin

Man you're all over it, many thanks and nice work. I am trying to avoid asking you question after question, but unfortunately I need it to offset further because of my menu graphics.

I tried controlling it by using something like this:

.left li ul {
position: absolute;
left: 200px;
display: block;
visibility: none;
color: #333;
border: 1px solid #242424;
border-top: 1px solid #232323;
margin: 0;
z-index:1000;
}

But this seems to have no effect on the drop down position at all, which leads me to believe that the JS file is still in control. I've attached a mini screen shot of what I mean, maybe you can show me where I can offset by a pixel amount? The red box in the .jpg is the offset I need, obviously it would offset towards the left maybe 20px or so.

Many thanks again and great work.
AG

[ddadmin]

Sure, the code in red inside the .js file is what controls by how much the sub menu drops to the left when it's told to do so:

					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width() || $(this).hasClass('left'))? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft

You can +100 or -100 to the end of the code in red for example to affect how much it shifts to the left or right.

[atomgroom]

DDadmin-

That's the stuff. Thanks again man, truly appreciated. I can always get it with the CSS but struggle with the JS end of the functionality.

Good learning experience nonetheless. If at any time you might need some graphics work done, feel free to give me a shout, I'd be glad to return the favor... http://www.atomgroom.com

AG