Javascript Menu Help (again...)?

Status
Not open for further replies.

ButtermilkJack

New Member
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 :confused: Bear with me, I am a javascript novice!

Thanks!
 

louie

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

louie

New Member
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" "[URL="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/URL]">
<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

New Member
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

New Member
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.
 

louie

New Member
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

New Member
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

New Member
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.
 

ButtermilkJack

New Member
ph3n0m said:
heh, the menu has already been fixed (yay me)
Yep! Thanks for that. It's working perfect but it's now sitting in the middle of the layout in IE7 and Firefox. It seems IE6 and IE7 are treating it differently. Because I removed the negative margin in the css, I now have to find a way to bring it back to the edge. Something that's compatible to all browsers.
 

louie

New Member
you don't need to use negative values in you css.

just create a new css file from scratch.

Code:
<div id="main" style="width:800px;">
<div id="top">top text
<br />
</div>
<div id="left" style="float:left;width:20%;">links<br />links</div>
<div id="content" style="float:left; width:78%;">some text</div>
<div id="bottom" style="clear:both;">footer text</div>
</div>

Just found your problem in the stylesheet.

replace the main1 style with this:

#main1 { background-image: url('../images/bg_main1.gif'); background-position: top left;background-repeat: repeat-y;height: 300px;margin: 0px;text-align: left; }

why do you need a fix height?
also why did you put the padding there?
padding: 10px 35px 10px 200px;
 

ButtermilkJack

New Member
Hey louie, thanks for that. I had the padding there because I needed the 'nav1' floating div to sit inside the 'main1' flush with the Name and Tagline above. If I remove the padding completely the div sits right out over the background shadow. Obviously 200px was way too much, so I adjusted it to just 25px left and right and put a 25px margin-right on the div itself.

All seems ok now! Can you check IE6 for me. I downloaded IE7 and I can't get a copy of IE6 to run anymore.

Cheers :)
 

ButtermilkJack

New Member
ph3n0m said:
I should point out that buttermilkjack is developing on a Mac
I'm actually developing on both believe it or not. I have a Mac I use for the design because my PC LCD laptop screen is not great. I'm cross-checking in both as I develop to be sure. :)
 

ButtermilkJack

New Member
Yep, cheers louie. All looks good on the Mac too (well, except for IE 5.2 but I doubt anyone uses that anymore!).

Although it wouldn't take too much to throw in a link to a seperate stylesheet for that browser...
 

louie

New Member
I don't have a computer running that browser so I can not really do anything.

As you said I doubt anybody using it.
 
Status
Not open for further replies.
Top