[css / php / js] expanding menu

sami1337 · 10-20-2008

I am trying to build in a nice vertical expanding menu in the site i am building (see blog). I've googled on how to make my own, but i am clueless on how it works. I tried pasting some examples, but none of them actually did what they were supposed to do.

I found this very nice:
The JavaScript Source: Navigation : Expanding Menu
But for some reason the list doesn't hide and unhide. It's just a normal list.

And i found this tutorial that covers the above one:
How-to create a dynamic Expanding Menu in Company Website Builder - FAQ - GraFX Software Solutions
But i don't understand it..

Would be nice if someone could give me a hand with this.

**Tamlin** · 10-20-2008

Quote:

Originally Posted by sami1337

I found this very nice:
The JavaScript Source: Navigation : Expanding Menu
But for some reason the list doesn't hide and unhide. It's just a normal list.

What browser are you using? Do you have JavaScript disabled?

sami1337 · 10-20-2008

No i checked for that. The menu on those pages does work. And to be sure i am previewing in two browsers (IE and FF).

When i put that menu in my page i did get the exact same layout, but the links did not work. Other examples on google just gave me lists. Forgot to mention that.

**Tamlin** · 10-20-2008

I've just tried it and it seems to work fine. It's difficult to guess where your problem might lie without seeing your code, however. Any chance you can post it here?

MoodsR4Cattle · 10-20-2008

I've found that some scripts will only work if you change the header to transitional and not strict:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Also, could be a conflict if you have another Javascript on the same page.

sami1337 · 10-20-2008

Ok i just tried a different simplfied script. This works so much better, and nicer. It doesn't even blow up when javascript is turned off.

Here is the latest code:

Code:

<html><head>
<title>test</title>
<style type="text/css">
p.text { z-index: 1;
	position: inherit;
}
table.bg {
	position:relative;
	background-position:right bottom;
	background-repeat:no-repeat;
	top: 0px;
}
td.menu { height:11px }



</style>

<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
function hide(){
document.getElementById("myvar").style.display='none';
document.getElementById("myvar2").style.display='none';
}
</script>

</head>
<body onload="hide('myvar','myvar2');">
<table width="100%"  border="1" cellpadding="0" cellspacing="0" background="cornerimg.png" class="bg">
  <tr>
    <td width="20%" valign="top" class="menu" scope="col">
	<div><a onclick="switchMenu('myvar');" title="Switch the Menu">Home</a></div>
	<div id="myvar">
	<a href="#">Desinfectie</a> <br>
	<a href="#">Desinfectie</a>	</div>
    <div>
	  <a onclick="switchMenu('myvar2');" title="Switch the Menu">test</a></div>
    <div id="myvar2">
	<a href="#">Desinfectie</a><br>
	<a href="#">Desinfectie</a>
	</div>
    </td>
    <td width="80%" rowspan="10" scope="col">*insert Lorum ipsum here*</td>
  </tr>
</table>

Still a bit messy.

Note that i have no doctype at all right now, but that will come before it goes online. Can i add the doctype to header.php tho?
I found out that my workspace is workign against me. I am using USB webserver, which is an awesome tool by the way, to test my php pages. Most of the time it loads slow, and sometimes it just never stops loading. So i am suspecting that for failing half of the attempts i did. (it usually works like a charm though..just not here i guess).

It's broken right now, but just before it stopped working it showed me a working page. Could someone check if it works? I suppose you can make it a .html as i removed the php includes for editing.

**Tamlin** · 10-20-2008

Quote:

Originally Posted by sami1337

It's broken right now, but just before it stopped working it showed me a working page. Could someone check if it works? I suppose you can make it a .html as i removed the php includes for editing.

Just tried it and it seems to work OK in both Firefox and IE.

sami1337 · 10-21-2008

Thanks for the help so far.

Ran into a new problem with the last code. When i refresh the page it acts as if i have javascript disabled so the menu expands completely. This doesn't happen when i enter the url.

U'ziel · 10-22-2008

You really shouldn't be using tables for anything other than tabulated data even though you can get away with it with some doctypes it's messy and tables can be interpreted differently (especially spacings) in different browsers. You should be using the div and span elements. Here's an example. You'll have to do some tinkering though as I'm at work and I don't have time right now to do it for you.

Javascript:

Code:

function nav(id, img, element)
{

if (img == null){

}

if (document.getElementById){

if(document.getElementById(id).style.display == 'none'){
	document.getElementById(id).style.display = 'block';
	document.getElementsByName(img)[0].src = './gfx/network_'+element+'_click.jpg';

} else {
	document.getElementById(id).style.display = 'none';
	document.getElementsByName(img)[0].src = './gfx/network_'+element+'_out.jpg';

}
	return false;

}
}

You should always display "block" rather than "" or you will find this doesn't work in some browsers.

HTML:

Code:

<div id="iincn_nav3" class="tab_parent"><a href="#" onclick="nav('tab2', 'tab_2', 'womens'); return false"><img name="tab_2" src="./gfx/network_womens_out.jpg" alt="" border="0" /></a>
	<span id="tab2" class="iincn_tab_bg iincn_bgalign" style="display:none;">
	<!--Women's Content Here-->

	<span style="position:relative; left:3px;">
	Women's clothing coming soon. Keep Checking back! or better still - stick around and buy something for the man in your life!<br />
	</span>

	<img class="iincn_bgfooter" src="./gfx/iinnetwork_tab_footer.gif" alt="" border="0" />
	</span>
</div>

CSS:

Code:

/*Position the parent of the menu

#iincn_nav3 {
	position:absolute; top:0px; left:364px; z-index:3;
}

/*Position text in the spans
.iincn_tab_bg {
        font-family: Arial;
        font-size: 8pt;
        font-weight: normal;
        font-style: normal;
        color: #40403f;
        text-decoration: none;
	text-align:left;
	padding: 2px;
	background: transparent url(../gfx/iincnetwork_tab_bg.gif) repeat-y 0 0;
}

.iincn_bgalign {
	position:absolute; top:22px; left:0px; width:137px; z-index:3; 
}

Basically the CCS is whatever you want mines a bit messy but just use the css to position your hidden elements. You could have sub menu's coming off that as long as the called to the nav function and your positioning was correct.

Theres a functional example here: http://www.creationdc.com

sami1337 · 10-23-2008

wow great. I am just starting to see the potention of using divs. I've never used them before, but they are pretty flexible. I noticed they can work a bit like a table, but without being an actual table.

So spans makes the style aplied to the div not apply to the content of that span, and allowes it's own inline style, but no pre defined css style?

Is it possible to position divs next to eachother? I found it impossible to put two tables next to eachother without using absolute positioning.

And could you eleborate on the "return false"

Thanks in advance!

U'ziel · 10-24-2008

Exactly they take a bit more setup than banging out a table but its a much more professional way of doing things. You should always use divs as the parent element with spans inside if you try to use div's within divs it just ****s up.
The span does as you have said but you can define its style in the CSS as a class or an id just as you would any other element.

Return False
Basically this indicates whether you want the default action to run after the java script has executed. In this instance if you look at the code behind the image you click for the dropdown its just a regular link to "#" on the same page. I have used "return false" so the page doesn't attempt a reload in some browsers. Without the return false statement the browser would look to navigate to that page + # and cause the page to jump.
Say you were using a fancy drop down instead of a select for users to pick their nationality when registering on your website. If you clicked the dropdown without return false it would jump back to the top of the page.

Thats the best I can do right now had a loooong couple of days, thank god its the weekend!! if you have anymore questions or trouble with the code feel free to contact me: richduncan@gmail.com

sami1337 · 10-27-2008

Thanks, i don't fully understand the return false yet, but i understand what you said. I noticed myself that IE refreshes a '#' link, but ff does not.

I've put divs in divs! Better fix that! Uh oh..

Jolt · 10-27-2008

For the most part divs within divs are not a problem. It can be with U'ziel's code, but in general they aren't an issue. Spans should be used for items you do not want to be seen as block level objects. You can't set the width or height of a span generally speaking.

sami1337 · 10-27-2008

Hmm so in some cases you'd have to use a div inside a div, unles you can find a work around?

Jolt · 10-28-2008

In many cases you would place a div inside another div. It's exceptionally common and in fact, the staple of some layouts.

But as I posted, it may be a specific issue with U'ziel's code that has a problem with such formatting.