Jump to content

Javascript drop down menu problem

- - - - -

  • Please log in to reply
2 replies to this topic

#1
SolidState

SolidState

    Learning Programmer

  • Members
  • PipPipPip
  • 38 posts
I am having a problem implementing this drop down menu script on a web page I am working on. I can't seem to locate the source of the problem, but it seems that the script is just not executing at all.

Here is the code

HTML
<html>     <head>
           <script type="text/javascript">
            var timeout = 500;
            var closetime = 0;
            var curmenitem = 0;


            function openmenu(id)
            {
               //kill close timer
               mencancelclosetime();


               //show new layer
               curmenitem = document.getElementById();
               curmenitem.style.visibility="visible";
            }


            function menclose()
            {
                 if(curmenitem){curmenitem.style.visibility="hidden";}
            }


            function menclosetime()
            {
                 closetime= window.setTimeout(menclose, timeout);
            }


            function mencancelclosetime()
            {
                 if(closetime)
                 {
                      window.clearTimeout(closetime);
                      closetime = null;
                 }
            }


           </script>
           <link rel="stylesheet" type="text/css" href="Main.css" />


     </head>


     <body>
          <div id="banner">
                <img src="./Images/RPMlogo.png" />
                <ul id="dropmenu">
                      <li><a href="Index.html">Home</a></li>
                      <li><a href="About.html">History</a></li>
                      <li><a href="#" onmouseover="openmenu('men1')" onmouseout="menclosetime()">New Parts</a>
                          <div id="men1" onmouseover="mencancelclosetime()" onmouseout="menclosetime()">
                               <a href="smlblkchevy.html">Small Block Chevy</a>
                               <a href="bgblkchevy.html">Big Block Chevy</a>
                               <a href="lsseries.html">LS Series</a>
                               <a href="smlblkford.html">Small Block Ford</a>
                               <a href="bgblkford.html">Big Block Ford</a>
                               <a href="mdlrmotor.html">Modular Motor</a>
                               <a href="ltmdlhemi.html">Late Model Hemi</a>
                               <a href="dmimp4cyl.html">Domestic and Import 4 Cylinder</a>
                               <a href=powersport.html">Power Sports</a>
                          </div>
                      </li>
                </ul>
          </div>
          <div id="body"><h1>Welcome to Russel Perfomance Machine!</h1><p>Russell Perfomance Machine produces high quality cynlinder heads for all types of engines.  We can also machine parts to custom specifications.</p></div>
     </body>
</html>

CSS
#dropmenu
{    margin: 0;
    padding: 0;
    z-index: 30}


#dropmenu li
{    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 11px arial}


#dropmenu li a
{    display: block;
    margin: 0 1px 0 0;
    padding: 4px 10px;
    width: 60px;
    background: #5970B2;
    color: #FFF;
    text-align: center;
    text-decoration: none}


#dropmenu li a:hover
{    background: #49A3FF}


#dropmenu div
{    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #EAEBD8;
    border: 1px solid #5970B2}


    #dropmenu div a
    {    position: relative;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #EAEBD8;
        color: #2875DE;
        font: 11px arial}


    #dropmenu div a:hover
    {    background: #49A3FF;
        color: #FFF}

Anyone know what I am doing wrong with this?

#2
SolidState

SolidState

    Learning Programmer

  • Members
  • PipPipPip
  • 38 posts
No one?

I just ended up haxing it with pure CSS, here's what I did if anyone is interested.

<ul id="dropmenu">                      <li><a href="Index.html">Home</a></li>
                      <li><a href="About.html">History</a></li>
                      <li><a href="#" onmouseover="men1.style.visibility='visible'" onmouseout="men1.style.visibility='hidden'">New Parts</a>
                          <div id="men1" onmouseover="men1.style.visibility='visible'" onmouseout="men1.style.visibility='hidden'">
                               <a href="smlblkchevy.html">Small Block Chevy</a>
                               <a href="bgblkchevy.html">Big Block Chevy</a>
                               <a href="lsseries.html">LS Series</a>
                               <a href="smlblkford.html">Small Block Ford</a>
                               <a href="bgblkford.html">Big Block Ford</a>
                               <a href="mdlrmotor.html">Modular Motor</a>
                               <a href="ltmdlhemi.html">Late Model Hemi</a>
                               <a href="dmimp4cyl.html">Domestic and Import 4 Cylinder</a>
                               <a href=powersport.html">Power Sports</a>
                          </div>
                      </li>
                </ul>

Still don't know why my script wasn't getting called....

Edited by SolidState, 03 February 2012 - 12:07 PM.


#3
chili5

chili5

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 7,247 posts
  • Programming Language:Java, C#, PHP
  • Learning:C, C++, C#, PHP, Transact-SQL, Assembly, Scheme
You have an error here:

curmenitem = document.getElementById();

Try changing that to this:

curmenitem = document.getElementById("men1");





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users