...

View Full Version : need help with my menu fuction



mattz
09-16-2005, 02:10 PM
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

http://img.photobucket.com/albums/v54/mattzpotter/icon1.jpg

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

http://img.photobucket.com/albums/v54/mattzpotter/menuclosedup.jpg

the other set of icons is for opeing the menu bar

http://img.photobucket.com/albums/v54/mattzpotter/icon2.jpg

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

http://img.photobucket.com/albums/v54/mattzpotter/menu1.jpg

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 ?

rlemon
09-16-2005, 03:45 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum