Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2010
    Location
    Costa Blanca Spain
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    cannot get navigation drop down menu to work

    Hope I'm in the right area for this - it's a mixture of html, javascript and css.

    I have been trying for ages to get a good piece of code that I can customise to allow me to put drop down menus in my navigation bar.

    I found a couple that work in their example but when I try to put it onto my page all drop down options remain visible.

    The simplest one I found is from w3schools. I created a new web page solely for the code I did not amend anything and I STILL get all options visible. The example on their site does it properly.

    Can anybody tell me what I am doing wrong?

    here is a copy of the w3 code as I used it:-
    [CODE]
    <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.getElementById(elmnt).style.visibility="visible";
    }
    function hidemenu(elmnt)
    {
    document.getElementById(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="120">
    <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
    <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>
    <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
    <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
    <tr><td class="menu"><a href="/xsl/default.asp">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="120">
    <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="120">
    <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>
    [ICODE]

    the link to it is:- http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu10

    All I want to do is put in 1 drop down option on my website.

    Here is my current code (it is a php file)
    [CODE]
    <!-- banner and link row -->
    <div align="center" style="background-image: url(i/bg/bodybg.PNG)">
    <img src="i/flamedradiator-header4.png" alt="RADyCAL Heating, Moraira, Costa Blanca, Infrared Heating" width="721" height="150"></img>
    </div>
    <div style="background-image: url(i/bg/imagebar2r.png); margin: 0px; height: 20px;" align="center">
    <a href="indexeng.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 10px">Home</span></a>
    <img src="i/redline-sep.bmp" alt=" " width="2" height="15"></img>
    <a href="whatisit.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 10px">What Is It?</span></a>
    <img src="i/redline-sep.bmp" alt=" " width="2" height="15"></img>
    <a href="producth.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 10px">Product List</span></a>
    <img src="i/redline-sep.bmp" alt=" " width="2" height="15"></img>
    <a href="images.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 10px">Gallery</span></a>
    <img src="i/redline-sep.bmp" alt=" " width="2" height="15"></img>
    <a href="aboutus.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 10px">About Us</span></a>
    <img src="i/redline-sep.bmp" alt=" " width="2" height="15"></img>
    <a href="contact.php" style="font-size: 15px; font-family: eurostile; font-weight: bold; text-decoration: none; color: #4a1111;" onmouseover="this.style.color='#C9252B'" onmouseout="this.style.color='#4a1111'"><span style="padding: 10px">Contact Us</span></a>
    </div>
    [ICODE]

    I want to add links to other pages in the 3rd option ('Products'). I have a css file and www.radycalheating.com/indexeng.php is one of the pages that uses this header file.

    Hope this makes sense!
    Thanks

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well I will say that w3schools is notorious for outdated sometimes even outright incorrect code examples. I would never put a dropdown menu in a table layout.

    Try this VERY easy tutorial for a cross browser compliant semantic way of building a dd menu.
    Teed

  • #3
    New Coder
    Join Date
    Apr 2010
    Location
    Costa Blanca Spain
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    not there yet!

    Thank you Teed.

    I've worked out the problem.
    Stupidly I was testing the 2 phps in isolation - the header with the navigation bar was one, the other was the main page in which I had stored the script. When I put the whole lot live and pulled up the page live it was better. I have used your example and amended it to include my styling.

    However I still have a bit of a problem and maybe you will have a quick fix for me. The dropdown is appearing behind the lower section of my page, that is, the first php file has the header and navigation bar and the main page calls this php file.

    you can see what I mean if you look at
    www.radycalheating.com/indexeng1.php

    What it should look like is
    www.radycalheating.com/indexeng.php

    I hope you can help with this as I am doing a time critical piece of work at the moment and I've spent hours on this one little area.

    regards

  • #4
    New Coder
    Join Date
    Apr 2010
    Location
    Costa Blanca Spain
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I managed to resolve the drop down behind other items issue with z-index.

    closing this thread now and starting a new one for positioning ul lists.


  •  

    Posting Permissions

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