Indenting Subtext in Dropdown Menu [Archive]

View Full Version : Indenting Subtext in Dropdown Menu

smininger

06-28-2002, 12:20 AM

Howdy folks,

I am a newbie to this board so please forgive any broaches in ediquette.

I have just started working with basic java scripting for my website. I am experimenting with drop down menus. So far I've been doing ok, but I can't seem to get the sub-menus to indent. I have posted the script below. Can anyone tell me how to indent 'option 1' and 'option 2' (see script below)?? I have tried everything from placing a text-indent:10px in the span, to indenting in the font settings. HELP???

<html>
<head>
<title>Drop Down Menu</title>
<script language="javascript">
var Open = ""
var Closed = ""
function showhide(what){if (what.style.display=='none'){what.style.display='';}else{what.style.display='none'}}
</script>
</head>
<body>
Test Menu 

<a href="http://option1" target="_blank" style="cursor:hand; text-decoration:none">Option 1</a> 
<a href="http://option2" target="_blank" style="cursor:hand; text-decoration:none">Option 2</a> 

</body>
</html>

adios

06-28-2002, 01:29 AM

If you wrap the entire menu in a <div>, positioned relatively, you can set the indent for the (absolutely positioned within the div) in your CSS - numerous ways:

<body>
<div style="position:relative;width:100px;">
Test Menu 

<a href="http://option1" target="_blank" style="cursor:hand; text-decoration:none">Option 1</a> 
<a href="http://option2" target="_blank" style="cursor:hand; text-decoration:none">Option 2</a> 

</div>
</body>

Don't quote CSS values like display: none...that's for writing JS strings to the .style object.

Also: only IE makes element ids into global variables; pass the id as a string:

onClick="showhide('menu1outline')"

...and use something like this:

function showhide(id) {
var el;
if (typeof document.all != 'undefined') el = document.all(id);
else if (typeof document.getElementById != 'undefined') el = document.getElementById(id);
if (el) el.style.display = (el.style.display == 'none') ? '' : 'none';
}

smininger

07-02-2002, 11:11 PM

Wow, thanks, that worked perfectly!!! I appreciate your help.