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 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    need help with my menu fuction

    I have a problem that i dont know how i can make it do what i want so i was wondering if some here could help make me someting in javascript that can what i want it to do let explain what i need help with first

    i have two groups of icon



    when on hover over it it turns red (using two images) and when clicked it closes my menu
    like this



    the other set of icons is for opeing the menu bar



    when hover it turns red and when clicked it opens out my menu
    like this



    the best well to describe what i what it do is, when you are in control panel in microsoft xp and you can open and close the boxes on the left hand side of the control panel, i would like it to be like that

    now i don't know how to put my icons and make the image change when hover over?

    i don't know how to make my menu selection close or open when clicked?

    but i do know how to make the menu hide a display using java script

    so can anyone help me ?
    Last edited by mattz; 09-16-2005 at 02:27 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, i dont know if you realize how hard that is to do.

    The opening and closing of the menu is simple, it's making it appear to scroll open and scroll closed that makes it a little more difficult.

    Basically what you will need is a function to toggle the menu display.

    For this example we will call that function toggleMenu()

    when you call this function you will want to pass in one thing. the ID of the sub menu you wish to display.

    so say you have the following setup:

    <div id='Menu_Header'><img src="myMenuHeaderClosed.gif"></div>
    <div id='Menu_container1'>
    <table><tr><td height='x' width='x' background="myMenuContainerBacking.gif">
    <span id='menuItem1'>Menu Item</span><br />
    <span id='menuItem2'>Menu Item</span><br />
    <span id='menuItem3'>Menu Item</span><br />
    <span id='menuItem4'>Menu Item</span><br />
    </td></tr></table>
    </div>

    Note, you will have to formatt the html to look like you want it too, but the basic concept is the same.

    you will need a header for the sub menu. and a container to store all of the links in.

    The javascript function is rather simple from this point.

    function toggleMenu(id){
    var e = document.getElementById(id);
    e.style.display = e.style.display == 'block' ? 'none' : 'block';
    }

    then you will need to work this function into the html, also setting the container display to 'none' so it will not be visible when the user enters the site.

    <div id='Menu_Header' onClick='toggleMenu("Menu_container1")'><img src="myMenuHeaderClosed.gif"></div>
    <div id='Menu_container1' style='display: none;'>
    <table><tr><td height='x' width='x' background="myMenuContainerBacking.gif">
    <span id='menuItem1'>Menu Item</span><br />
    <span id='menuItem2'>Menu Item</span><br />
    <span id='menuItem3'>Menu Item</span><br />
    <span id='menuItem4'>Menu Item</span><br />
    </td></tr></table>
    </div>
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<


  •  

    Posting Permissions

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