SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question w3schools top drop down menu in DHTML

    I tried to edit w3schools top drop down menu in DHTML tutorial example but I can't seem to get it to work. I added another field in the menu but it doesn't work. Can any1 help?

    <html>
    <head>
    <style>
    body{font-family:arial;}

    table{font-size:80%;background:black}

    a{color:black;text-decoration:none;font:bold}

    a:hover{color:#606060}

    td.menu{background:lightblue}

    table.menu
    {
    font-size:100%;
    position:absolute;
    visibility:hidden;
    }
    </style>
    <script type="text/javascript">
    function showmenu(elmnt)
    {
    document.all(elmnt).style.visibility="visible"
    }

    function hidemenu(elmnt)
    {
    document.all(elmnt).style.visibility="hidden"
    }
    </script>
    </head>
    <body>

    <h3>Drop down menu</h3>

    <table width="100%">
    <tr bgcolor="#FF8080">
    <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
    <a href="../default.asp">Tutorials</a><br />
    <table class="menu" id="tutorials" width="100%">
    <tr><td class="menu"><a href="../html">HTML</a></td></tr>
    <tr><td class="menu"><a href="../xhtml">XHTML</a></td></tr>
    <tr><td class="menu"><a href="../css">CSS</a></td></tr>
    <tr><td class="menu"><a href="../xml">XML</a></td></tr>
    <tr><td class="menu"><a href="../xsl">XSL</a></td></tr>
    </table>
    </td>
    <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
    <a href="../default.asp">Scripting</a><br />
    <table class="menu" id="scripting" width="100%">
    <tr><td class="menu"><a href="../js/default.asp">JavaScript</a></td></tr>
    <tr><td class="menu"><a href="../vbscript/default.asp">VBScript</a></td></tr>
    <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
    <tr><td class="menu"><a href="../asp/default.asp">ASP</a></td></tr>
    <tr><td class="menu"><a href="../ado/default.asp">ADO</a></td></tr>
    </table>
    </td>
    <td onmouseover="showmenu('home')" onmouseout="hidemenu('home')">
    <a href="../default.asp">Home</a><br />
    <table class="menu" id="scripting" width="100%">
    <tr><td class="menu"><a href="../js/default.asp">JavaScript</a></td></tr>
    <tr><td class="menu"><a href="../vbscript/default.asp">VBScript</a></td></tr>
    <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
    <tr><td class="menu"><a href="../asp/default.asp">ASP</a></td></tr>
    <tr><td class="menu"><a href="../ado/default.asp">ADO</a></td></tr>
    </table>
    </td>
    <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
    <a href="../site/site_validate.asp">Validation</a><br />
    <table class="menu" id="validation" width="100%">
    <tr><td class="menu"><a href="../site/site_validate.asp">Validate HTML</a></td></tr>
    <tr><td class="menu"><a href="../site/site_validate.asp">Validate XHTML</a></td></tr>
    <tr><td class="menu"><a href="../site/site_validate.asp">Validate CSS</a></td></tr>
    <tr><td class="menu"><a href="../site/site_validate.asp">Validate XML</a></td></tr>
    <tr><td class="menu"><a href="../site/site_validate.asp">Validate WML</a></td></tr>
    </table>
    </td>
    </tr>
    </table>

    <p>Mouse over these options to see the drop down menus</p>

    </body>
    </html>


    ---Thanks

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which field is the one you added?


    BTW; document.all will only work in IE

  3. #3
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    Australia
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change the id of the 3rd menu from "scripting" to "home" Because you have the same ID for the second and third columns, they produce an error.

    Currently you have the second colums as:

    Code:
    <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
    <a href="../default.asp">Scripting</a><br />
    <table class="menu" id="scripting" width="100%">
    and the third as:

    Code:
    <td onmouseover="showmenu('home')" onmouseout="hidemenu('home')">
    <a href="../default.asp">Home</a><br />
    <table class="menu" id="scripting" width="100%">
    Change this third one to be:
    Code:
    <td onmouseover="showmenu('home')" onmouseout="hidemenu('home')">
    <a href="../default.asp">Home</a><br />
    <table class="menu" id="home" width="100%">


  4. #4
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks !

    I did what you said before but I must have missed changing one field that why I could never get it to work.

    It works now. Thanks for taking the time to solve my problem.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    Australia
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. Glad it worked



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •