Solved

Are breaks permitted on drop down menus?

Posted on 2002-05-06
5
180 Views
Last Modified: 2010-04-09
can a menu item be on two lines. menu seems to extend to the length of the widest menu element. so that takes up alot of room.. can we break an element on two lines?  if so, then how?
also, can we set a width of the menu so that it doesn't strech out.  only the elements strech out.
0
Comment
Question by:qudoos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 33

Accepted Solution

by:
knightEknight earned 75 total points
ID: 6992061
You could create two options with broken text, but with the same "value", so that either one that is selected will result in the same thing.  Like this:

<SELECT>
  <OPTION value='1'>This would be</option>
  <OPTION value='1'>_______the number one</option>
  <OPTION value='2'>This would be</option>
  <OPTION value='2'>_______the number two</option>
</select>

if either the first or second option is selected, the server will see "1"

will also work with text:

  <OPTION value='This would be the number 1'>This would be</option>
  <OPTION value='This would be the number 1'>____the number one</option>

0
 
LVL 19

Expert Comment

by:webwoman
ID: 6992110
knightEknight's way is the only way you can do it that is cross-browser compatible, doesn't require a ton of scripting, specially constructed elements, and lots and lots of layers.

And in my mind, the path of least resistance (and easiest updating later on) is normally the best one. ;-)

Unless you really have some reason for using layers and lots of scripting to accomplish the same thing... sometimes the client requests it, sometimes you just want to see if it can be done. I can understand that. If so, somebody else probably has some tips. But it won't be easy... ;-)
0
 
LVL 2

Expert Comment

by:jpoesen
ID: 6993297
perhaps you could consider using a <select multiple> and then add some javascript that will automatically select both lines if you select 1 of them...

alternativelyas previously suggestes, there are a number of freely downloadable dhtml versions of dropdown boxes.

for example, check out
http://webfx.eae.net

Good luck
S.
0
 
LVL 1

Author Comment

by:qudoos
ID: 6993920
Thank you for your reply.  I had this in mind too but I guess there is no way of highlighting both lines at the same time so that the user doesn't get confused.
Is there any way so that the menu is a fixed width and doesn't strech out to the widest element?

Thank you for your answer and I'll be using it.
q
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7008918
<HTML>
<HEAD>
<SCRIPT language='javascript'>

 function selectAllWIthCurrentValue(theSelect)
 {
   var sValue = theSelect.options[theSelect.selectedIndex].value;

   for ( var i=0,n=theSelect.options.length; i<n; i++ )
     if ( theSelect.options[i].value == sValue )
        theSelect.options[i].selected = true;
 }

</script>
</head>

<BODY>

<FORM name='myform'  >
<SELECT  multiple size='5'  onChange='selectAllWIthCurrentValue(this);'>
 <OPTION value='1'>This would be</option>
 <OPTION value='1'> &nbsp; the number one</option>
 <OPTION value='2'>This would be</option>
 <OPTION value='2'> &nbsp; the number two</option>
 <OPTION value='3'>This would be</option>
 <OPTION value='3'> &nbsp; the number three</option>
 <OPTION value='4'>This would be</option>
 <OPTION value='4'> &nbsp; the number four</option>
 <OPTION value='5'>This would be</option>
 <OPTION value='5'> &nbsp; the number five</option>
</select>
</form>

</body>
</html>
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
AJAX Wordpress Not Reading Variable 2 59
I'm a Human captcha checkbox 13 43
Asp response.write to clients 6 34
Session on Html 8 42
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 …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 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