Smooth Navigational Menu (v2.0)

[SKodidine]

1) Script Title:
Smooth Navigational Menu (v2.0)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem:
I am very wet behind the ears when it comes to webpages and scripts. I absolutely love the Smooth Navigational Menu (horizontal). Thank you for providing it.

After fiddling around, I was finally able to get rid of the down arrow for the menu items as each option will have a drop down.

My issue is that in the horizontal menu bar, I only have 6 items and it seems that the menu items are left justified leaving a large amount of empty space on the right.

How do I make the items "justified" so that the entire width is taken up and the items are evenly spaced?

Thank you.

PS: I did a search and looks like others had this issue with previous versions and some of the solutions suggested arent working.

[ajfmrf]

Please post alink to your site so people can see what you have and what may interfer with the code.

But a quick look at the code,I would change this part

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

and give ir a short length like 1000px; to start with.That is what I would begin with but you will probally to make kore then one adjustment to the width

[molendijk]

Determine the width of the horizontal main menu (on DD it is 465px), then add:

style="position: relative; width: 465px; left: 50%; margin-left: -233px"

to the div for the horizontal menu. The value for the (negative) margin-left equals the width of the horizontal main menu divided by 2 .
In other words, replace:

<div id="smoothmenu1" class="ddsmoothmenu">

with:

<!--<div id="smoothmenu1" class="ddsmoothmenu">-->
<!-- Determine the width of the horizontal main menu (on DD it is 465px), then add: style="position: relative; width: 465px; left: 50%; margin-left: -233px" to the div for the horizontal menu. The value for the (negative) margin-left equals the width of the horizontal main menu divided by 2  -->
<div id="smoothmenu1" class="ddsmoothmenu" style="position: relative; width: 465px; left: 50%; margin-left: -233px">

Btw, you don't have to manually remove the arrows for items that don't have submenus. The arrows will disappear automatically.

[SKodidine]

Thank you for your response Bud.

My site has nothing in it but the Smooth Navigational Menu (V2.0), nothing at all, I am just playing with this menu. No changes after adding width: 1000px;

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
/*width: 100%;*/
width:1000px;
}

[ajfmrf]

I shortened the width of the menu and centered it and brought it down from the top a little

http://www.web-user.info/test/smooth/index.html

Is this more what you wanted?

[SKodidine]

This is what I am looking for Bud. And thank you for your response as well Molendijk. It is centering the menu within the width.

Please see attached image what I was trying for. Be deafult it seems to be left justified like the top menu in the image, but I am looking for the menu items to be "justified" as in the second menu in the image.

Thank you.

[ajfmrf]

So you want it to be the full width of the menu as before but you want the links to be wider and equal in size?

[SKodidine]

Yes but not equal in size, It should vary I suppose with the length of the text for each link. Home versus Contact Us, being of different widths.

An example (and how I found the DD Smooth Navigational Menu) is the website of the local museum. www.anchoragemuseum.org

Each link text is of different width but they all seem to be spread to the full width of the menu bar. If I had fewer links, how would I still make them use the full width, is my dilemma.

[ajfmrf]

So,you don't have all of the links worked out yet? Or do you.

It would/could be a waste of time doing anything until you know how manylinks(dropdowns or submenues ) you are planning to make.
Figure out what you need and go from there.

Remember thought ,that the right side of the menu will have extra width to accomodate a submenu if there is one at the end this will make the menu look right .

[SKodidine]

Thank you Bud. I just got the menus and sub-menus worked out. While at it, I took a rudimentary shortcut to solve my problem, not the most desired nor the most elegant but works.

I just added a <li>&nbsp;&nbsp;</li> between the menu items to space them out evenly. A rookie solution but works nonetheless.

Attached is an image of the menu with spaces as mentioned above.

Any suggestion as to how a pro would have approached the issue?