Link to home
Create AccountLog in
Avatar of ziggles
ziggles

asked on

Javascript Menu Bar.

Hi, I am trying to find a menu abit like this one:  http://www.dynamicdrive.com/dynamicindex1/slashdot.htm to add to my website.  I cant seem to understand how to insert this menu into my website.  Can any1 help me?
Avatar of digitalseraphim
digitalseraphim

Hey ziggles,

First step is creating the html that will represent your menu.  The entire menu will be enclosed in a div, with the attribute "sdmenu" and we will use the id "my_menu" and also give it the style "float:left" as in the example that comes in the zip file you should have downloaded from that site.

Here is what we have so far:

<div style="float: left" id="my_menu" class="sdmenu">
</div>

next we will create the "submenus" as divs with a span as the first line in the div:

now we have:

<div style="float: left" id="my_menu" class="sdmenu">
    <div>
        <span> sub1 </span>
    </div>
    <div>
        <span> sub2 </span>
    </div>
    <div>
        <span> sub3 </span>
    </div>
</div>

Next the actual menu items.  These are just href anchors within the div, under the span:

<div style="float: left" id="my_menu" class="sdmenu">
    <div>
        <span> sub1 </span>
        <a href="foo.htm">item11</a>
        <a href="foo.htm">item12</a>
        <a href="foo.htm">item13</a>
    </div>
    <div>
        <span> sub2 </span>
        <a href="foo.htm">item21</a>
        <a href="foo.htm">item22</a>
        <a href="foo.htm">item23</a>
    </div>
    <div>
        <span> sub3 </span>
        <a href="foo.htm">item31</a>
        <a href="foo.htm">item32</a>
        <a href="foo.htm">item33</a>
    </div>
</div>

Now we are finished with that portion.  next we will move on to setup of the menu.

we need to add the stylesheet and javascript include that came in the zip file, make sure they are accessible on your server (or locally if that is how you are doing it) and put the following lines in the <head> section of your page:

      <link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
      <script type="text/javascript" src="sdmenu/sdmenu.js"></script>

Make sure that the paths are correct for your setup.

next we need to create the javascript object that will control the menu:
this code goes below the above code, also in the <head> section.

      <script type="text/javascript">
      // <![CDATA[
      var myMenu;
      window.onload = function() {
            myMenu = new SDMenu("my_menu");
            myMenu.init();
      };
      // ]]>
      </script>

the variable myMenu can be called whatever you want, just be sure to change it in all 3 lines above.  Also, the string passed to the SDMenu constructor ("my_menu" in new SDMenu("my_menu")) is the id of the div we created above.  

This should be all that is needed to create your menu.  There are ways to customize it:

from the index.html file in the zip (the first 4 must be before the init() call above):

myMenu.speed = 3;                     // Menu sliding speed (1 - 5 recomended)
myMenu.remember = true;               // Store menu states (expanded or collapsed) in cookie and restore later
myMenu.oneSmOnly = false;             // One expanded submenu at a time
myMenu.markCurrent = true;            // Mark current link / page (link.href == location.href)

myMenu.init();

// Additional methods...
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);      // Expand a submenu
myMenu.collapseMenu(firstSubmenu);    // Collapse a menu
myMenu.toggleMenu(firstSubmenu);      // Expand if collapsed and collapse if expanded

myMenu.expandAll();                   // Expand all submenus
myMenu.collapseAll();                 // Collapse all submenus
ASKER CERTIFIED SOLUTION
Avatar of mvan01
mvan01
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Oops!  Crossed posts.  I didn't see digitalseraphim's answer when I posted.

Peace and joy.  mvan
Avatar of ziggles

ASKER

I dont quite get both your suggestions.  I have created a page using frontpage and tried to insert both you fifferent codings but when I click on display view it doesnt look much like a menu.  Im guessing im not doing something right.  

mvan01 - I copied your coding from site and inserted it to an empty page.  Not quite sure what ive got todo next though. ( am new to javascript etc.... ).

digitalseraphin - Wasnt quite sure where to put the first 3 parts of your coding. ( again im rather new to coding ).

cheers - ziggles.
for both samples (my step by step and mvan01's full file) you need to have the contents of the sdmenu.zip file (except for the index.html) extracted into the same directory as your html file, you will have a file/directory structure that looks like this:

somedir/yourfile.html
somedir/sdmenu/bottom.gif
somedir/sdmenu/collapsed.gif
somedir/sdmenu/expanded.gif
somedir/sdmenu/linkarrow.gif
somedir/sdmenu/sdmenu.css
somedir/sdmenu/sdmenu.js
somedir/sdmenu/title.gif
somedir/sdmenu/toptitle.gif

If you have this, and it is still not working, let us know exactly what you are seeing.

-ds
Avatar of ziggles

ASKER

Hi digitalseraphin,  I have done what you said and its working but when I click preview it comes up with an error message saying: An error has occurred in the script on this page.  Its asking me if I want to continue running the script?  Any ideas whats wrong.

Heres coding of page:

<html>
<head>
<title>Slashdot's Menu</title>
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css">
<script type="text/javascript" src="sdmenu/sdmenu.js">
   /***********************************************
   * Slashdot Menu script- By DimX
   * Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
   * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
   ***********************************************/
</script>
<script type="text/javascript">
var myMenu;
window.onload = function() {
   myMenu = new SDMenu("my_menu");
   myMenu.init();
};
</script>
</head>
<body>
   <div style="float: left" id="my_menu" class="sdmenu">
      <div>
         <span>Online Tools</span>
         <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
         <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
         <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
         <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
         <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
         <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
      </div>
      <div>
         <span>Support Us</span>
         <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
         <a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>
         <a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
      </div>
      <div class="collapsed">
         <span>Partners</span>
         <a href="http://www.javascriptkit.com">JavaScript Kit</a>
         <a href="http://www.cssdrive.com">CSS Drive</a>
         <a href="http://www.codingforums.com">CodingForums</a>
         <a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
      </div>
      <div>
         <span>Test Current</span>
         <a href="?foo=bar">Current or not</a>
         <a href="./">Current or not</a>
         <a href="index.html">Current or not</a>
         <a href="index.html?query">Current or not</a>
      </div>
    </div>

  </body>
</html>

Many Thanx - ziggles.
Avatar of ziggles

ASKER

Ive got two errors, Its saying:

First Error:

Char:  4
Line:  17
Error:  SDMenu Undefined
Code:  0

Second Error:

Char: 1
Line:  2
Error: Invalid Character
Code: 0

Can you help, many thankx - ziggles.
<script type="text/javascript" src="sdmenu/sdmenu.js">
   /***********************************************
   * Slashdot Menu script- By DimX
   * Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
   * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
   ***********************************************/
</script>

You have givn both a "src=" attribute and javascript within the same script block. It sure confuses me; I can't imagine what the browser thinks.
@Badtoz,

"both a "src=" attribute and javascript within the same script block"

This was copied directly from the dynamicdrive example.

The browser first imports the .js, and then appends the code written in-line.  No confusion here.

Recall that most of the time, when importing a source file, the command looks like this:
<script type="text/javascript" src="sdmenu/sdmenu.js"></script>

You need to start and end the script block even if you're only using the command to import a script file.

Peace and joy.  mvan
Hi ziggles,

Just to be sure it can work, replace these two lines:
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css">
<script type="text/javascript" src="sdmenu/sdmenu.js">

with these two:
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/dynamicindex1/sdmenu/sdmenu.css">
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex1/sdmenu/sdmenu.js">

This is for testing purposes only.  You should not depend on links to source file on another site long term, because they could get deleted, moved, modified, etc.  It also generates unnecessary traffic on their site and thus uses their bandwidth with no benefit to them.

With that said, I've used the code I entered above with these two mods, and it works fine from my harddrive.  Now, once that test works, follow digitalseraphim's advice above (correctly downloading and unzipping the source files locally into the correct file structure) and then replace the lines with the originals, to point to the local source files.  It should all work out ok.  Let us know...

Peace and joy.  mvan
Avatar of ziggles

ASKER

When I upload it, it doesnt display as it should.  www.garybray.co.uk/test.htm

Any ideas as to why?  Thanks, Gary.