Javascript Menu Help (again...)?

ButtermilkJack · #1 (**permalink**) 21-04-2006, 12:04 PM

Hey, I've found a perfect menu for what I want... well, almost

The tutorial is here.

I've set-up the menu as instructed and have it working fine. But if I try to implement the new javascript mentioned by 'isobar' in Comment #7 at the end of the page (which I need to do), I run into problems.

Can anyone tell me how much of the 'old' javascript do I replace? Is it all of it, or only part of it?

The problem I have is the submenus no longer open at all

Bear with me, I am a javascript novice!

Thanks!

louie · #2 (**permalink**) 21-04-2006, 12:11 PM

Showing the code you have might help us to help you.

ButtermilkJack · #3 (**permalink**) 21-04-2006, 12:46 PM

Quote:

Originally Posted by louie

Showing the code you have might help us to help you.

Sorry

should've posted a link but it's the same as the code in the guys comment. I just copied and pasted out, and changed the onclick call as suggested.

Link to my page here

louie · #4 (**permalink**) 21-04-2006, 01:09 PM

I can not even see you menu.
It looks like you have something wrong in the stylesheet.

this code works:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.menu1{
background-image:url(images/menudiv1bg.gif);
margin-left:25px;
padding-left:20px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}
.submenu{
background-image: url(images/submenu.gif);
display: block;
height: 19px;
margin-left: 38px;
padding-top: 2px;
padding-left: 7px;
color: #333333;
}
.hide{
display: none;
}
 
.show{
display: block;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array(); 
function showHide(theid){
    if (document.getElementById) {
    var switch_id = document.getElementById(theid);
        if(menu_status[theid] != 'show') {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
        }else{
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
        }
    }
}
//-->
</script>
 
</head>
<body>
<div style="width:145px;">
<a href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div id="mymenu1" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div id="mymenu2" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a href="#" class="menu1" onclick="showHide('mymenu4')">Menu 4 </a>
    <div id="mymenu4" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a href="#" class="menu1" onclick="showHide('mymenu5')">Menu 5 </a>
    <div id="mymenu5" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
</div>
</body>
</html>

ButtermilkJack · #5 (**permalink**) 21-04-2006, 01:48 PM

Thanks for having a look at that! I've got the menu working as per the tutorial (and your code) but the problem happens when I try to replace the javascript with the javascript mentioned in the guys comment at the bottom of the page (in order to close un-clicked submenus).

Can you have a look at my link again and tell me if you can see the menu now. I've replace the original javascript so it should be back to the original working menu.

I need some way of closing the open submenu when another (closed) link is clicked.

louie · #6 (**permalink**) 21-04-2006, 01:57 PM

i tried that myself and it wasn't working so I gave up on it.

I can see you page in Firefox but not in IE.
As I said there is something wrong with the css you have.

to achieve all that ( auto hide ) you need more javascript then what's there.

You will be better off using some onmouseover menu the onclick.

ButtermilkJack · #7 (**permalink**) 21-04-2006, 02:27 PM

Cheers, I'll have a look into it again over the weekend and see if I can come up with something else.

Thanks!

louie · #8 (**permalink**) 21-04-2006, 08:34 PM

As said to you, something nice and more reliable is using a dhtml menu.
To achive all that the code itself needs to be a lot more complicated.

ButtermilkJack · #9 (**permalink**) 22-04-2006, 12:03 AM

Hey, just to update you, I posted over on boards too and had some success from a guy who modifed the code for me.

All seems to be working fine now in all browsers!

louie · #10 (**permalink**) 22-04-2006, 07:48 AM

yes it does work the way you want, in firefox but i still cann't see it in IE.

you need to fix you css style somewhere.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Javascript/CSS menu help?	ButtermilkJack	Coding Help	4	16-04-2006 05:59 PM

Javascript Menu Help (again...)?

Javascript Menu Help (again...)?

Similar Threads