dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Trying to get this menu to work in firefox

  1. #1
    Join Date
    Jan 2008
    Posts
    1

    Trying to get this menu to work in firefox

    View the original page and demonstration here:
    http://javascript.internet.com/navig...ory-menus.html

    If it won't work in firefox is there a similar menu with completely different code I could use?

    <!-- FIVE STEPS TO INSTALL CATEGORY MENUS:

    1. Save the FRAMESET code and modify it for your page
    2. Create a new document and save it as category-menus.html
    3. Copy the coding into the HEAD of category-menus.html
    4. Add the last code into the BODY of category-menus.html
    5. Be sure to save the arrow images to your web server -->

    <!-- STEP ONE: Save this FRAMESET code and modify it for your page -->

    <frameset cols="175,*">
    <frame src="category-menus.html" name="left">
    <frame src="home-page.html" name="right">
    </frameset>
    </html>

    <!-- STEP TWO: Create a new document, save it as category-menus.html -->

    <!-- STEP THREE: Paste this code into the HEAD of category-menus.html -->

    <HEAD>

    <style type="text/css">
    a
    {text-decoration: none;}

    .title
    {position: absolute;
    width: 100px;
    height: 20px;
    left: 10px;
    z-index: 10;
    font-family: verdana, helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;}

    .submenu
    {position: absolute;
    left: 25px;
    width: 120px;
    border: 1px solid black;
    background-color: yellow;
    layer-background-color: yellow;
    font-family: verdana, helvetica, sans-serif;
    font-size: 10px;
    visibility: hidden;}
    </style>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original: Fredrik Fridsten (fredrik.fridsten@home.se) -->
    <!-- Web Site: http://hem.passagen.se/dred -->

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin

    // ADDITIONAL NOTES
    // The input variables to the toggle function are the number of the submenu to open/close,
    // starting with 0, and the number of pixels to move the objects below.
    // For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.

    var nom = 4; // Number of menus
    var usePictures = 1; // use pictures? 1 = yes, 0 = no

    var ttls = new Array(); // An array for the title objects
    var subs = new Array(); // An array for the submenu objects
    var lastn;
    var lastmove;

    if (document.layers) {
    visible = 'show';
    hidden = 'hide';
    }
    else
    if (document.all) {
    visible = 'visible';
    hidden = 'hidden';
    }
    for (var i = 1; i <= nom; i++) {
    ttls[i] = ('title' + i);
    subs[i] = ('submenu' +i);
    }
    function picopen(n) {
    title = ('title' + n);
    pic = ('pic' + n);
    if (document.layers) {
    document.layers[title].document.images[pic].src = "opened.gif";
    }
    else if (document.all) {
    document.all(pic).src = "opened.gif";
    }
    }
    function picclose(n) {
    title = ('title' + n);
    pic = ('pic' + n);
    if (document.layers) {
    document.layers[title].document.images[pic].src = "closed.gif";
    }
    else if (document.all) {
    document.all(pic).src = "closed.gif";
    }
    }
    lastn = (nom + 1);
    lastmove = 0;
    function lasttoggle(n,move) {
    if (n <= nom) {
    menu = ('submenu' + n);
    if (document.layers) {
    submenu = document.layers[menu];
    }
    else if (document.all) {
    submenu = document.all(menu).style;
    }
    if (submenu.visibility == visible) {
    submenu.visibility = hidden;
    picclose(n); // Remove this if you don't use pictures
    for (var i = (n+1); i <= nom; i++) {
    if (document.layers) {
    document.layers[ttls[i]].top -= move;
    document.layers[subs[i]].top -= move;
    }
    else if (document.all) {
    document.all(ttls[i]).style.pixelTop -= move;
    document.all(subs[i]).style.pixelTop -= move;
    }
    }
    }
    }
    }
    function toggle(n,move) {
    menu = ('submenu' + n);
    if (document.layers) {
    submenu = document.layers[menu];
    }
    else if (document.all) {
    submenu = document.all(menu).style;
    }
    if (submenu.visibility == visible) {
    submenu.visibility = hidden;
    if (usePictures) picclose(n);
    for (var i = (n+1); i <= nom; i++) {
    if (document.layers) {
    document.layers[ttls[i]].top -= move;
    document.layers[subs[i]].top -= move;
    }
    else if (document.all) {
    document.all(ttls[i]).style.pixelTop -= move;
    document.all(subs[i]).style.pixelTop -= move;
    }
    }
    }
    else {
    submenu.visibility = visible;
    if (usePictures) picopen(n);
    if (lastn != n) {
    lasttoggle(lastn,lastmove);
    }
    for (var i = (n+1); i <= nom; i++) {
    if (document.layers) {
    document.layers[ttls[i]].top += move;
    document.layers[subs[i]].top += move;
    }
    if (document.all) {
    document.all(ttls[i]).style.pixelTop += move;
    document.all(subs[i]).style.pixelTop += move;
    }
    }
    }
    lastn = n;
    lastmove = move;
    }
    // End -->
    </script>
    </HEAD>

    <!-- STEP FOUR: Copy this code into the BODY of category-menus.html -->

    <BODY>

    <div class="title" id="title1" style="top: 0px">
    <a href="#" onclick="javascript: toggle(1,30); return false"><img name="pic1" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 1</a>
    </div>

    <div class="submenu" id="submenu1" style="top: 20px">
    <a href="page01.html" target="right">Item # 1</a><br>
    <a href="page02.html" target="right">Item # 2</a>
    </div>

    <div class="title" id="title2" style="top: 20px">
    <a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 2</a>
    </div>

    <div class="submenu" id="submenu2" style="top: 40px">
    <a href="page03.html" target="right">Item # 3</a><br>
    <a href="page04.html" target="right">Item # 4</a><br>
    <a href="page05.html" target="right">Item # 5</a><br>
    <a href="page06.html" target="right">Item # 6</a>
    </div>

    <div class="title" id="title3" style="top: 40px">
    <a href="#" onclick="javascript: toggle(3,45); return false"><img name="pic3" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 3</a>
    </div>

    <div class="submenu" id="submenu3" style="top: 60px">
    <a href="page07.html" target="right">Item # 7</a><br>
    <a href="page08.html" target="right">Item # 8</a><br>
    <a href="page09.html" target="right">Item # 9</a>
    </div>

    <div class="title" id="title4" style="top: 60px">
    <a href="#" onclick="javascript: toggle(4,60); return false"><img name="pic4" src="http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 4</a>
    </div>

    <div class="submenu" id="submenu4" style="top: 80px">
    <a href="page10.html" target="right">Item # 10</a><br>
    <a href="page11.html" target="right">Item # 11</a><br>
    <a href="page12.html" target="right">Item # 12</a><br>
    <a href="page13.html" target="right">Item # 13</a>
    </div>

    <!-- STEP FIVE: Be sure to save the arrow images to your site -->

    <!-- http://javascript.internet.com/img/c...nus/opened.gif -->

    <!-- http://javascript.internet.com/img/c...nus/closed.gif -->

    <p><center>
    <font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>

    <!-- Script Size: 4.78 KB -->
    Thanks for checkin it out.

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    That script must be quite old.

    Maybe this one would suit you.

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Wow... must be old. And, it doesn't work in Fx..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles