Web Analytics Made Easy - StatCounter Indenting Subtext in Dropdown Menu - CodingForum

Announcement

Collapse
No announcement yet.

Indenting Subtext in Dropdown Menu

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Indenting Subtext in Dropdown Menu

    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>
    <span id="menu1" onClick="showhide(menu1outline)" style="cursor:hand; text-decoration:none"><font size="1" face="Verdana" color="#0000FF">Test Menu</font></span><br>
    <span id="menu1outline" style="display:'none'; cursor:hand">
    <a href="http://option1" target="_blank" style="cursor:hand; text-decoration:none"><font size="1" indent="10px" face="Verdana" color="#0000FF">Option 1</font></a><br>
    <a href="http://option2" target="_blank" style="cursor:hand; text-decoration:none"><font size="1" face="Verdana" color="#0000FF">Option 2</font></a><br>
    </span>
    </body>
    </html>
    Tags: None
  • #2
    If you wrap the entire menu in a <div>, positioned relatively, you can set the indent for the (absolutely positioned within the div) <span> in your CSS - numerous ways:

    <body>
    <div style="position:relative;width:100px;">
    <span id="menu1" onClick="showhide(menu1outline)" style="cursor:hand; text-decoration:none"><font size="1" face="Verdana" color="#0000FF">Test Menu</font></span><br>
    <span id="menu1outline" style="position:absolute;left:10px;display:none; cursor:hand">
    <a href="http://option1" target="_blank" style="cursor:hand; text-decoration:none"><font size="1" indent="10px" face="Verdana" color="#0000FF">Option 1</font></a><br>
    <a href="http://option2" target="_blank" style="cursor:hand; text-decoration:none"><font size="1" face="Verdana" color="#0000FF">Option 2</font></a><br>
    </span>
    </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';
    }
    Last edited by adios; Jun 27, 2002, 09:11 PM.

    Comment

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

      Comment

      Previous template Next
      Working...
      X