Solved

Drop-Down menu -- need to change width

Posted on 2008-06-15
5
917 Views
Last Modified: 2010-05-18
I downloaded a freeware drop-down menu javascript.   I've made some slight modifications (color etc.).

However, I'm not able to adjust the width of the main menu ("Top One", "Top Two", ..., "Top Five") -- currently, measuring on the screen, it's about 3.5 inches wide.    I'd like to specify the width vs. having the "auto width" (I believe that property is set in the "dropdown.css" file).  

My questions:
1. How do I modify that top menu's width?    
2. Also, I may need to "flip" the horizontal menu into a "vertical" menu.   Can this be done with the code as well?    If yes, how?

Please see zipped menu files at:
http://www.savefile.com/files/1611631

EEH
0
Comment
Question by:ExpExchHelp
  • 3
  • 2
5 Comments
 
LVL 4

Accepted Solution

by:
wilson1000 earned 500 total points
ID: 21790168
Hi,

The width:auto specified on the <a> tag is possibly your best option as this will facilitate any character length. If you fix the width, you should make sure each value i.e. link name will fit correctly.

Change the width of the top level li tag globally by specifying:

#menu ul.horizontal li.level1 {
      float: left;
        width: 140px;  /* <<< specify your preferred width for each level 1 */
      height: 22px;
      padding: 1px 10px 1px 10px;
      border: 0px solid black;
      background-color: D7BF77;
}

The problem you will face is the fixed width of the actual menu container. If this container is inside another, i.e. one that holds the header, menu, body and footer - define this width value to 100% as opposed to 410px, like so :

#menu {
      width: 100%;
      background-color: #FFFFFF;
      line-height: normal;
      padding: 0px 0px 0px 20px;
}

If you want to make your menu vertical you will need to take the left floats off of each css declaration and change the width of your #menu container to a specified width - take the code in the box below for a vertical layout - I've optimized it for you.

The problem your now faced with is getting the drop-downs to position correctly i have tried to position these for you but this is hard coded somewhere within the Javascript - i'm an XHTML/ CSS writer i'm afraid and this falls beyond the scope of my expertise.

To get back to horizontal - put back the floats and change the #menu width to 100%

I hope this helps you ExpExchHelp, let me know if you are happy or i can help any further.

Kind regards
body {

	font: 100% Verdana, Arial, Helvetica, sans-serif;

	background: #fff;

	margin: 0;

	padding: 0;

	color: #000;

} 
 

#menu {

	width: 200px;

	background-color: #fff;

	line-height: normal;

	padding: 0 0 0 20px;

}
 

#menu ul {

	margin: 0;

	padding: 0;

	list-style: none;

}
 

#menu ul li {

	  list-style: none;

}
 

#menu ul li a {

	display: block;

	text-decoration: none;

	font-weight: bold;

	color: #66f;

}
 

#menu ul.horizontal li.level1 {

	height: 22px;

	padding: 1px 10px;

	border: 0 solid black;

	background-color: D7BF77;

}
 

#menu ul.horizontal li.level1 a {

	font: bold 12px Arial, Helvetica, sans-serif;

	color: black;

}
 

#menu ul.horizontal li.level1 a:hover {
 

}
 

#menu ul.horizontal > li.level1 a {

	width: auto;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#menu ul li a { float:none; }

/* End IE5-Mac hack */
 

#menu ul.dropdown, #menu ul.flyout {

	position: absolute;

	top: 0px;

	left: 150px;

	visibility: hidden;

	width: 135px;

	border-left: 1px solid #999;

	border-top: 1px solid #999;

	border-right: 1px solid #999;

	background-color: #fff;

}
 

#menu ul.dropdown li.level2,

#menu ul.flyout li.level3 {

	border-bottom: 1px solid #999;

}
 

#menu ul.dropdown li.level2 a,

#menu ul.flyout li.level3 a {

	font: normal 11px Arial, Helvetica, sans-serif;

	color: #000;

	padding: 2px 4px 2px 5px;

}
 

#menu ul.dropdown li.level2 a:hover,

#menu ul.flyout li.level3 a:hover {

	color: #000;

	font-weight: bold;

	background-color: #A9B8BD;

}

Open in new window

0
 

Author Comment

by:ExpExchHelp
ID: 21790535
wilson1000:

thanks for the prompt reply... I appreciate it.

Ok, for right now, I will focus on the horizontal menu only.    I made those two adjustments as you recommended.    

As my actual menu options are wider than just "Top One" etc. I currently fit only 4 menu items into the menu.   For the 5th item, it's being wrapped onto the next line.    I believe this is what you meant by the "Problem you will face..."

Is there a way to specify any menu width w/o the menu being wrapped?

EEH


body {

  background: #FFFFFF;

  margin: 0px;

  padding: 0px;

  color: #000000;

  font-family: Verdana;

} 
 

#menu {

      width: 100%;

      background-color: #FFFFFF;

      line-height: normal;

      padding: 0px 0px 0px 20px;

}
 

#menu ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}
 

#menu ul li {

  list-style: none;

}
 

#menu ul li a {

  float: left;

  display: block;

  text-decoration: none;

  font-weight: bold;

  color: #6666FF;

}
 

#menu ul.horizontal li.level1 {

      float: left;

      width: 140px;  /* <<< specify your preferred width for each level 1 */

      height: 22px;

      padding: 1px 10px 1px 10px;

      border: 0px solid black;

      background-color: D7BF77;

}
 

#menu ul.horizontal li.level1 a {

  font-family: Arial;

  font-size: 12px;

  font-weight: bold;

  color: black;

}
 

#menu ul.horizontal li.level1 a:hover {
 

}
 

#menu ul.horizontal > li.level1 a {

  width: auto;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#menu ul li a { float:none; }

/* End IE5-Mac hack */
 

#menu ul.dropdown,

#menu ul.flyout {

  position: absolute;

  top: 0px; 

  left: 0px;

  visibility: hidden;

  width: 135px;

  border-left: 1px solid #999999;

  border-top: 1px solid #999999;

  border-right: 1px solid #999999;

  background-color: white;

}
 

#menu ul.dropdown li.level2,

#menu ul.flyout li.level3 {

  border-bottom: 1px solid #999999;

}
 

#menu ul.dropdown li.level2 a,

#menu ul.flyout li.level3 a {

  font-family: Arial;

  font-size: 11px;

  font-weight: normal;

  color: black;

  padding: 2px 4px 2px 5px;

}
 

#menu ul.dropdown li.level2 a:hover,

#menu ul.flyout li.level3 a:hover {

  color: black;

  font-weight: bold;

  background-color: #A9B8BD;

}

Open in new window

0
 
LVL 4

Expert Comment

by:wilson1000
ID: 21796971
No trouble, how wide is your menu on your page? (pixels)
0
 

Author Comment

by:ExpExchHelp
ID: 21797854
The following line provides feedback about the table:
<table id="tab1" width="679" border="0" align="center" cellspacing="0" cellpadding="0">

In design mode, the menu goes about 3/4 across the table.   However, when opening the htm file, it's 100% stretched acoss the table.    Weird?!

EEH
0
 

Author Closing Comment

by:ExpExchHelp
ID: 31467414
While the answer was correct, the solution is only partially complete.   Pls see my last question that was never answered.

Thanks,
EEH
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now