JavaScript: Slide Down Menu [Resolved]

**RobDog888** · Jan 18th, 2004, 12:21 AM

I am having problems getting this demo code to work. Anyone able to get it to work for them?
Slide Down Menu

**The Hobo** · Jan 18th, 2004, 12:26 AM

Works for me.

**RobDog888** · Jan 18th, 2004, 06:07 PM

I want to use the demo code on a webpage and the menu
doesn't even display. I even got the sliding_menu.js file off the
server and put it on my server and still nothing. What is wrong?

Hobo, you created a new page from the demo?

**The Hobo** · Jan 18th, 2004, 10:01 PM

Yup. Here's my code (I changed it a bit):

Code:

<html>
<head>
    <title>js menu example</title>
    <script type="text/javascript">
        function goToURL() { 
            history.go(-1); 
        }

        var Link = new Array();
        Link[0] = "0|Home";
        Link[1] = "1|Home|http://www.javascriptsource.com|";
        Link[2] = "1|More Scripts|http://www.javascript.com|";
        Link[3] = "1|Contact|http://www.javascriptsource.com/contact-us.html|";
        Link[4] = "1|Traffic|http://www.thecounter.com|";
        Link[5] = "0|Access";
        Link[6] = "1|Login|Login.asp|";
        Link[7] = "1|Logout|Logout.asp|"
        Link[8] = "0|Scripts";
        Link[9] = "1|Asp|http://www.javascriptsource.com|";
        Link[10] = "1|JavaScript|http://www.javascriptsource.com|";
        Link[11] = "0|Links";
        Link[12] = "1|JavaScript sites|http://www.javascripts.com|blank";
    </script>
    <style type="text/css">
        .menu {
           position:relative;
           background-color:gold;
           border:1px solid darkblue;
           width:150;
           font-size:11px;
           font-family:verdana;
           font:bold;
           position:absolute;
           cursor:se-resize;
        }

        .item_panel {
            width:150;
            border-left:1px solid darkblue;
            border-right:1px solid darkblue;
            clip:rect(0,150,0,0);
            position:absolute;
        }

        .item_panel a{
           text-decoration:none;
           color:black;
           cursor:hand;
        }

        .item {
           background-color:lightyellow;
           width:148;
           font-size:10px;
           font-family:verdana;
        }
  </style>
  <script language="JavaScript" src="sliding_menu.js"></script>
</head>
<body>
    <div style="text-align: center;">
        <table style="margin-left: auto; margin-right: auto; width: 150px;">
            <tr>
                <td style="width: 100%;">
                    <script type="text/javascript">
                        startup(4);
                    </script>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Tested it in IE6, Mozilla 1.4, and Opera 7.11 and it worked fine in all. You do need the sliding_menu.js file, however vbForums wont allow the upload of .js files, so you'll have to snag it off that site: http://javascript.internet.com/navig...liding_menu.js

Let me know if you need anymore help.

**RobDog888** · Jan 19th, 2004, 10:54 AM

Ah now I see what you did to get it to work. Their directions is to
paste it into the <BODY> tag when I should of known better that
it should not be in there. I had downloaded the Sliding_menu.js
from their site before. So if you were able to get it to work I knew
it was something in the htm page.

Thank you very much!

**The Hobo** · Jan 19th, 2004, 11:24 AM

Originally posted by RobDog888
Ah now I see what you did to get it to work. Their directions is to
paste it into the <BODY> tag when I should of known better that
it should not be in there. I had downloaded the Sliding_menu.js
from their site before. So if you were able to get it to work I knew
it was something in the htm page.

Thank you very much!

That website is very bad in instructing how to set this up. Unless I missed it, do they even tell you that you need sliding_menu.js?

**RobDog888** · Jan 19th, 2004, 02:54 PM

Yea, I saw the src reference to the sliding_menu.js file too.

Another question, how can I modify the pointer to be a regular
mousepointer when over the menu categories?
something like this...

Code:

<style type="text/css">
    .menu {
       position:relative;
       background-color:#999999;
       border:1px solid #333333;
       width:160;
       font-size:11px;
       font-family:verdana;
       font:bold;
       position:absolute;
       cursor:arrow;
    }

    .item_panel {
        width:150;
        border-left:1px solid #333333;
        border-right:1px solid #333333;
        clip:rect(0,160,0,0);
        position:absolute;
    }

    .item_panel a{
       text-decoration:none;
       color:#000000;
       cursor:hand;
    }

    .item {
       background-color:#E3E3E3;
       width:158;
       font-size:10px;
       font-family:verdana;
    }
</style>

but this just gives the mousepointer the I bar pointer. I want the mouse pointer arrow.
What are the options and correct constants for mouse pointers?

Thanks again.

**The Hobo** · Jan 19th, 2004, 03:30 PM

If you want the i-beam thing, then you want cursor: text;.

Here is a list of what's available: http://www.w3.org/TR/CSS2/ui.html#cursor-props

**The Hobo** · Jan 19th, 2004, 03:59 PM

By the way, I don't think the following function is even used, so you can probably remove it:

Code:

function goToURL() { 
    history.go(-1); 
}

**RobDog888** · Jan 19th, 2004, 04:19 PM

Yes, I already did that. Thanks.

Thanks for the link too! Good reference. I haven't done any html
or javascript in about two years. Its all starting to come back -
slowly.

Yet another question...
I want to add the onMouseover event for the menu headers.
When I write it in I get errors.

Code:

Truncated for the thread
function write_menu()
{
  smc = 0; // count the position of the self_menu
  document.write("<div style='position:absolute'>");
  mn = 0;
  mni = 1;
  start = -1;
  
  for(i=0;i<Link.length;i++)
  {
   la = Link[i].split("|");

   if (la[0] == "0")
   {
    if(start == 0) 
     {
      document.write("</div>");
      h =  csmc * iheight;
      tmn = mn; //-h
      self_menu[smc] = new Array(tmn,h,0,-2);
      smc++;
      mn--;
     }
     csmc = 0;
    document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")' onMouseover='window.status='Test'; return true;'>&nbsp;"+ la[1] + "</div>");
    self_menu[smc] = new Array(mn,height,0,mni);
    smc++;
    mni++;
    mn+=height;
    start = 1;
   }
   else
   {
    if(start == 1) 
     {
      if(N)mn+=2;
       document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
       start = 0;
     }
    
    document.write("<a href='"+la[2]+"'");
    if (la[3] != "") document.write(" target='" + la[3] + "' ");
    document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
    if (N) document.write(";width:150");
    document.write("' onmouseover='color(this.id); window.status='Test Item'; return true;' onmouseout='uncolor(this.id)'>&nbsp;&nbsp;"+ la[1] + "</div></a>");
    csmc++;
   }
  }

I have tried with single quotes and without.
I hate Mondays.

**The Hobo** · Jan 19th, 2004, 04:24 PM

Code:

window.status='Test Item'; return true;'

You have an extra single quote on the end. Remove that and it should work (at least it did for me).

**The Hobo** · Jan 19th, 2004, 04:29 PM

Nope, nevermind. You're putting single quotes inside single quotes. Try something like this:

Code:

document.write("' onmouseover=\"color(this.id); window.status='Test Item'; return true;\" onmouseout='uncolor(this.id)'>  "+ la[1] + "</div></a>");

**RobDog888** · Jan 19th, 2004, 04:32 PM

Like this.

Code:

document.write("' onmouseover=\"color(this.id); window.status='Test Item'; return true;\" onmouseout='uncolor(this.id)'>  "+ la[1] + "</div></a>");

Worked!
So I can follow the same syntax for the onMouseout.

The \ is a replacement for the single quote?

Thanks again!

**The Hobo** · Jan 19th, 2004, 04:35 PM

Whenever you want to put a certain kind of quote within the same kind of quote, you have to escape it.

Code:

myVar = "Jill said, \"Damnit, go away!\"";

Otherwise it'll think that the myVar = "Jill said," and then think the "Damnit, go away!" part is code.

I don't know if that makes sense or not...or if you already know that, just ignore me.

**RobDog888** · Jan 19th, 2004, 04:43 PM

That makes sense to me. Thanks.

Ok. Now how to get the menu item caption to display according
to the menu item mouseovered?

Code:

document.write("' onmouseover=\"color(this.id); window.status='Test Item 1'; return true;\" onmouseout=\"uncolor(this.id); window.status=''; return true;\">  "+ la[1] + "</div></a>");

So the code needs to be able to display the window status of
something like "Go to Test Item 1 page" and change when
mouseovered to Test Item 2 to equal "Go to Test Item 2 page"

**RobDog888** · Jan 19th, 2004, 04:55 PM

Got it!

Code:

document.write("' onmouseover=\"color(this.id); window.status='"+la[1]+"'; return true;\" onmouseout=\"uncolor(this.id); window.status=''; return true;\">  "+ la[1] + "</div></a>");

Thank you very much for all your help and time Hobo.

**The Hobo** · Jan 19th, 2004, 06:20 PM

No problemo.

**CornedBee** · Jan 19th, 2004, 06:39 PM

What happens if the browser has JavaScript disabled?

**The Hobo** · Jan 19th, 2004, 06:42 PM

Originally posted by CornedBee
What happens if the browser has JavaScript disabled?

You get nothing.

**RobDog888** · Jan 19th, 2004, 09:58 PM

Is there a way to determine if JavaScript is disabled? What are
the odds that it may be disabled?

Are the odds high enough that this can't be used on a production site?

**CornedBee** · Jan 20th, 2004, 04:27 AM

There's of course no JavaScript way to find out if JavaScript is disabled.

There's no server-side way either.

This is why I don't like all-JavaScript menus.

I'm currently working on a page with a drop-down menu. It looks very cool when JavaScript is enabled, and it still works (in Mozilla and Opera) if it is disabled, if not as cool. There's no way in IE to make a dropdown without JavaScript.

The page currently isn't displayed properly in IE, and the script doesn't work there either, but in Mozilla it looks fine. It's a rewrite of someone else's page.
http://stud3.tuwien.ac.at/~e0226430/justin/justin.html
Only two of the menus are actually menus, and only one menu item is clickable.
But the thing is, disable JavaScript and it still works. And a text-only browser gets simple nested unordered lists. It doesn't get much better than that.

You can use the <noscript> element though, its contents are displayed by JavaScript-aware browsers only if JavaScript is disabled.

**RobDog888** · Jan 20th, 2004, 11:19 AM

My main concern is that the majority of the visiters will have
javascript enabled. If they are using IE then the odd should be
high that they will have it enabled. Of course, there will be no
way to determine using javascript, if javascript is enabled. Is
there another method to detect this? If it can be determined it is
disabled, then it should be redirected to another non-javascript
compatible page.

**The Hobo** · Jan 20th, 2004, 11:56 AM

What you can do is have a non-javascript page load as default. But at the top of that page have something like:

Code:

<head>
    <script type="text/javascript">
        // redirect to javascript-enabled page
    </script>
</head>

That way the non-javascript page loads by default, and if javascript is enabled, it takes them to the javascript page.

**RobDog888** · Jan 20th, 2004, 12:02 PM

Thanks Hobo. Perhaps a quick page that will determine which
way to go. How about if the page is javascript enabled it gets
redirected immediatly. If not, after a 1 second timeout the page
redirects to the non-javascript page?

If this sounds good then how to do it, if not how to do something else?

Thanks for your continued help.

**The Hobo** · Jan 20th, 2004, 12:33 PM

Originally posted by RobDog888
Thanks Hobo. Perhaps a quick page that will determine which
way to go. How about if the page is javascript enabled it gets
redirected immediatly. If not, after a 1 second timeout the page
redirects to the non-javascript page?

If this sounds good then how to do it, if not how to do something else?

Thanks for your continued help.

Sure, if you can redirect without javascript. Meta tag, probably. I think my method is better, though.

But whatever works.

**The Hobo** · Jan 20th, 2004, 12:37 PM

This is what I'm talking about:

Code:

<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.location.href = 'http://www.aol.com/';
    </script>
</head>
<body>
    <!-- your non-javascript page starts here...
         if javascript is enabled, it will automatically redirect
         to your javascript page. If javascript is not enabled, it
         will ignore the javascript and continue showing this page
    -->
</body>
</html>

**CornedBee** · Jan 20th, 2004, 12:43 PM

But keep in mind that this kind of redirect breaks the back button.

**The Hobo** · Jan 20th, 2004, 12:46 PM

Originally posted by CornedBee
But keep in mind that this kind of redirect breaks the back button.

True. I hit pages all the time with that going on.

**RobDog888** · Jan 20th, 2004, 01:24 PM

Me too, but on this type of page you really don't want someone
who is javascript enabled to go back to the detection page. The
refered page will be the home page for javascript enabled
browsers.

**CornedBee** · Jan 20th, 2004, 01:49 PM

I don't mean going back to the detection page.

If someone links to you, they will probably link to your front page (= detection page). This page forwards them to yet another page.

Now I want to get back to the original site, so I hit back. Which takes me one step back to the detection page, which promptly forwards me again. Which is definitly NOT what I want.

In any case, your page should NEVER depend on JavaScript, and redirecting is a poor solution IMHO. Much better are scripts that are executed on load and transform the existing simple structure into a complex menu. For example, you could collapse all <ul> tags with the class set to "menu" or something. Then give them mouseovers so that they expand.

Take a look at the page I showed with Mozilla. The script gives the menu a nice effect. If you disable scripting, the menu works thanks to CSS. If you somehow disable all styles, you get a plain list.

Or take a look at my main page,
http://stud3.tuwien.ac.at/~e0226430/
. There's no JavaScript at all. Again, the thing doesn't work in IE. But in Mozilla, you can choose View->Use Style->Basic Page Style to disable all CSS. The result is a simple unstyled page, but it is still fully navigateable.

**RobDog888** · Jan 20th, 2004, 02:02 PM

Ok I see your code is using the <ul> tags to create a menu, but
thats all I can see since I am using IE. I don't want to install
Netscape or Mozilla. I have too much installed already.

I think maybe just going with a table structure menu for the non-
javascript browsers (without animation) may be the way to go.

I will create a function to rediredt on load instead. Will this mean
that the back link will still be left intact?

Code:

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function DetectMe() {
            window.location.href = 'http://www.aol.com/';
        }
    </script>
</head>
<body onLoad="DetectMe();">
</body>
</html>

**CornedBee** · Jan 20th, 2004, 05:44 PM

Table structures are never for non-JavaScript browsers

Gotta get help from CSS-D for that damned page.

**RobDog888** · Jan 20th, 2004, 05:47 PM

Why not just create a basic 1x? table with images for menuitems.
href them to the corresponding page. No JS or anything. just a
table to align the images.

Thread: JavaScript: Slide Down Menu [Resolved]

Thread Tools

Display

JavaScript: Slide Down Menu [Resolved]

Posting Permissions