Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Expandable Menu

  1. #1
    New Coder
    Join Date
    Jan 2003
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expandable Menu

    I am trying to build an expandable menu with images. I have the first menu item working, but cannot figure out how to get the others working. I am using div and span tags. You can view the extremely not finished page at:

    http://www.allsteeloffice.com/evolution/prod_sys.html

    The first menu item is systems and it works fine, but seating and others need to also be expandable. If anyone can help, I would greatly appreciate it, I am trying to learn Javascript.

  • #2
    New Coder
    Join Date
    Jan 2003
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am posting the code that I am using to make it easier to see what I am trying to accomplish. Any help or push in the right direction would be greatly appreciated.

    Code:
    <script language="JavaScript">
    <!--
    //By George Chiang (www.javascriptkit.com) JavaScript site.
    img1=new Image()
    img1.src="nav_systems1_on.gif"
    img2=new Image()
    img2.src="nav_systems1_off.gif"
    img3=new Image()
    img3.src="nav_seating1_on.gif"
    img4=new Image()
    img4.src="nav_seating1_off.gif"
    ns6_index=0

    function change(e){

    if(!document.all&&!document.getElementById)
    return

    if (!document.all&&document.getElementById)
    ns6_index=1

    var source=document.getElementById&&!document.all? e.target:event.srcElement
    if (source.className=="folding"){
    var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all
    if (source2[2+ns6_index].style.display=="none"){
    source2[0].src="nav_systems1_off.gif"
    source2[2+ns6_index].style.display=''
    }
    else{
    source2[0].src="nav_systems1_on.gif"
    source2[2+ns6_index].style.display="none"
    }
    }
    }
    document.onclick=change
    //-->
    </script>
    </head>

    <body bgcolor="#FFFFFF" text="#000000">

    <div><img src="nav_systems1_on.gif" class="folding"><a href="dfddf"></a>
    <span class="look2" style="display:none"><br>
    </span>
    </div>

    <div><img src="nav_seating1_on.gif" class="folding"><a href="dfddf"></a>
    <span class="look2" style="display:none"><br>
    </span>
    </div>

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do you know where that is - like, a working demo so we can see what should be happening ..?

    Or you could try beetle's expanding menu, if that's what it is - http://www.codingforums.com/showthre...threadid=11380
    Last edited by brothercake; 07-13-2003 at 03:09 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    New Coder
    Join Date
    Jan 2003
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply brothercake. I am actually using a script from:
    http://www.javascriptkit.com/script/cut51.shtml and trying to modify it to work with all images. All of the expanding/contracting scripts I can find, only use images to show if it is expanded/contracted and then text for the link. I need to create the menu out of images for consistency, if you go to http://www.allsteeloffice.com/evolution/prod_sys.html the first link called systems is working the way that I need the rest of them to. In the code it only allows to name 2 images and I need to be able to use multiple images. Sorry I can't be more help, but I am just learning javascript.

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi garrettb...

    Lots to look at here; that's a pretty funky script imo but, so be it. This might help, it's a modification that'll collapse unused menu levels (nice touch) and take care of the image swap, so long as you maintain your image file-naming convention:
    Code:
    ................
    img4.src="nav_seating1_on.gif"
    ns6_index=0
    
    restore.image = null;
    restore.span = null;
    
    function restore() {
    if (restore.image) restore.image.src=restore.image.src.replace(/_on/, '_off');
    if (restore.span) restore.span.style.display="none"
    }
    
    function change(e){
    
    if(!document.all&&!document.getElementById)
    return
    
    if (!document.all&&document.getElementById)
    ns6_index=1;
    
    var source=document.getElementById&&!document.all? e.target:event.srcElement
    if (source.className=="folding"){
    var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all;
    
    if (source2[2+ns6_index].style.display=="none"){
    restore();
    restore.image = source2[0];
    restore.span = source2[2+ns6_index];
    source2[0].src=source2[0].src.replace(/_off/, '_on');
    source2[2+ns6_index].style.display=''
    }
    else{
    source2[0].src=source2[0].src.replace(/_on/, '_off');
    source2[2+ns6_index].style.display="none"
    }
    }
    }
    document.onclick=change
    //-->
    ................
    Delete all lines with 'restore' in them to cancel the automatic collapse. You're going to need to lay this out more carefully, as undisplayed elements shove other content out of the way when displayed, unprofessional looking. This:

    <div style="width:170px;"><img src="nav_systems1_off.gif" class="folding" bo..........

    ...in the menu HTML should illustrate the wisdom of explicitly sizing your layout, particularly when dealing with 'hard' content like images. hth


  •  

    Posting Permissions

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