Javascript Menu Help (again...)?

Discussion in 'Coding Help' started by ButtermilkJack, Apr 21, 2006.

  1. ButtermilkJack

    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!
     
  2. louie

    louie New Member

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

    ButtermilkJack New Member

    Sorry :eek: 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
     
  4. louie

    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>
    
     
  5. ButtermilkJack

    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.
     
  6. louie

    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.
     
  7. ButtermilkJack

    ButtermilkJack New Member

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

    Thanks!
     
  8. louie

    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.
     
  9. ButtermilkJack

    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!
     
  10. louie

    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.
     
  11. ph3n0m

    ph3n0m New Member

    heh, the menu has already been fixed (yay me)
     
  12. ButtermilkJack

    ButtermilkJack New Member

    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.
     
  13. louie

    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;
     
  14. ph3n0m

    ph3n0m New Member

    I should point out that buttermilkjack is developing on a Mac
     
  15. ButtermilkJack

    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 :)
     
  16. ButtermilkJack

    ButtermilkJack New Member

    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. :)
     
  17. louie

    louie New Member

    it looks ok on both IE and firefox
     
  18. ButtermilkJack

    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...
     
  19. louie

    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.
     

Share This Page