PDA

View Full Version : All Levels Navigational Menu Width & Alignment Problems



mindretreat
04-17-2009, 06:50 PM
1) Script Title: All Levels Navigational Menu (v2.1)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...menu/index.htm
3) Describe problem:

I have 2 problems: Please go to www dot micemassage dot com to see the problem.

Problem 1: The text in some of my drop-down menus are longer than others. How can I make the width of one drop-down menu to be wider than others? Compare "About Us --> AAAAAAAAAAAAAAAA1" with "Brands --> B1". Is it possible to have different drop-down widths for different top buttons?

Problem 2: The last top button has drop-down width that aligns to the left and it exceeds my right website border. How do I make the last menu option align to the right along my right website border so that it does not exceed? See under "Spa Software --> H1" and you can see it exceeds the right border.

Please kindly assist.

Thank You very much in advance.

Nile
04-17-2009, 08:14 PM
At the top of the page, you have:

<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

You can delete the highlighted, and also get rid of ddlevelsfiles/ddlevelsmenu-sidebar.css. It is not needed.

Now, in ddlevelsfiles/ddlevelsmenu-base.css, find this code:


.ddsubmenustyle li a {
background-color: #F0F0F0;
color: #000000;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
margin: 0;
padding: 5px;
text-decoration: none;
width: 160px;
}


And fix it to this:


.ddsubmenustyle li a {
background-color: #F0F0F0;
color: #000000;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
margin: 0;
padding: 5px;
text-decoration: none;
width: auto;
}

ddadmin
04-17-2009, 09:30 PM
You can individually alter the width of a certain drop down menu by adding an inline CSS "width" attribute inside the sub menu's HTML, ie:


<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#" style="width:250px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAA1</a></li>
<li><a href="#" style="width:250px">A2</a></li>
<li><a href="#" style="width:250px">A3</a></li>
</ul>


The last top button has drop-down width that aligns to the left and it exceeds my right website border. How do I make the last menu option align to the right along my right website border so that it does not exceed? See under "Spa Software --> H1" and you can see it exceeds the right border.

Hmm there's no easy way to just have the right most drop down menu drop to the left (instead of right) of the window's edge unfortunately. The script does this automatically only if a drop down menu spills over the browser's right edge, not the edge of a certain DIV as in your case.

Fixed error in sample code

mindretreat
04-18-2009, 02:55 AM
Thanks to Nile and DD Admin.

For DD Admin's suggestion, I cannot get your solution to work. The drop-down menu stays incorrectly aligned at 250px.

When I increased to 280px, the drop-down menu aligns correctly, but below the "Relaxation Lounges" instead of "Spa Software".

Please go to www dot micemassage dot com to see the effects of the solution at width:280px.

Please further assist.

Thank You.

ddadmin
04-18-2009, 08:53 AM
Looking at your page, the HTML for your drop down menus (ULs) are invalid. It should be one nested UL containing additional sub ULs, not separate ULs as you have now. When in doubt, view the original HTML in the code you cut and pasted. You may also want to make sure you're familiar with the syntax of nested lists in HTML in general.

mindretreat
04-18-2009, 01:23 PM
Hi,

In the Demo supplied with the file, there are also separate ULs for each individual drop-down menu.

I reproduced them as below. I do not want to include sub-items for each drop-down menu for a clearer picture.

Please see www dot micemassage dot com and you can see the style is similar to the below demo code except there are no sub-items.

Please further assist.

Thank You.


<!--Top Drop Down Menu 1 HTML-->


<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>


<!--Top Drop Down Menu 2 HTML-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item Folder 3b</a>
<ul>
<li><a href="#">Sub Item 3.1b</a></li>
<li><a href="#">Sub Item 3.2b</a></li>
<li><a href="#">Sub Item 3.3b</a></li>
<li><a href="#">Sub Item 3.4b</a></li>
</ul>
</li>
<li><a href="#">Item 4b</a></li>
<li><a href="#">Item Folder 5b</a>
<ul>
<li><a href="#">Sub Item 5.1b</a></li>
<li><a href="#">Item Folder 5.2b</a>
<ul>
<li><a href="#">Sub Item 5.2.1b</a></li>
<li><a href="#">Sub Item 5.2.2b</a></li>
<li><a href="#">Sub Item 5.2.3b</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>

<!--Top Drop Down Menu 3 HTML-->

<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a></li>
<li><a href="http://tools.dynamicdrive.com/password/">htaccess Password</a></li>
<li><a href="http://tools.dynamicdrive.com/userban/">htaccess Banning</a></li>
</ul>

</body>
</html>

Nile
04-19-2009, 01:53 AM
Did my code work?
Anyways, glad to help you!

mindretreat
04-19-2009, 04:44 AM
Hi Nile,

Yes, your code does work.

However, I need each individual drop-down menu to be of different widths wheareas your suggestion is a universal change in width for all drop-down menus.

Please further assist.

Thank You.

Nile
04-19-2009, 05:19 AM
Each does have a different width. The width for each one will only be as long as it needs to be, making the widths for each one depending on the length of content.

mindretreat
04-19-2009, 06:44 AM
Hi Nile,

Yes, but there is a problem when there is a 2nd and 3rd level drop-down menu.

Please see www dot micemassage dot com and you can see the arrow in deeper level menus being "pushed" on top and blocking the menu text.

If this is solved, your solution can be implemented.

Can you please help on this. Thanks!

mindretreat
04-20-2009, 04:47 PM
Hi DD Admin,

I need your help too.

Thank You.

ddadmin
04-21-2009, 12:01 AM
Ok, there was an error in the code I posted showing you how to get one particular sub menu to be a certain width. The explicit width attribute should be added inside the A elements of the sub menu, and not the UL, so it should be something like:


<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#" style="width:250px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAA1</a></li>
<li><a href="#" style="width:250px">A2</a></li>
<li><a href="#" style="width:250px">A3</a></li>
</ul>

I tried this on one of the sub menus for the default DD demo, and it works.

mindretreat
04-21-2009, 07:40 PM
Hi DD Admin,

Individual width change works!

Can you help me with Problem 2? I am sure many others users of All Levels Navigational Menu (v2.1) will face the problem I am facing and it will be good to solve this. Thank You.


Problem 2: How do I make the rightmost drop-down menu align to the right of the "SPA SPFTWARE" button (below "E") instead of the left of the button (below "S")?