...

View Full Version : expandable menu help



kimboslice
12-07-2009, 02:51 PM
hi, i got a expandable menu that is working. i wonder if there is any way to make the links show as html and css if the user has disabled javascript

i

my code including javascript and css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


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

<style type="text/css">
.menu1{
margin-left:25px;
padding-left:20px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
width: 200px;
background-color: #03C;
border: thin solid #FFF;
}


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


</head>




<body>


<a 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 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 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 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 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>



</body>
</html>

bcvbvbv
12-07-2009, 02:54 PM
<a 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>
_________________________
Devis comparatif mutuelle sante | (http://comparatifmutuelle.org/)Comparateur mutuelles sante | (http://comparatifmutuelle.org/)Comparer comparatif mutuel (http://comparatifmutuelle.org/)

kimboslice
12-07-2009, 02:55 PM
I dont know what that was supposed to tell me?

gusblake
12-07-2009, 02:56 PM
You could set them to be visible by default, then hide them as appropriate with JS as soon as the page loads.

That's the only way I can think of doing it..

kimboslice
12-07-2009, 02:57 PM
note that i want all menus and submenus visible as html and css if
javascript is disabled
i would appreciate some step by step instructions if possible

gusblake
12-07-2009, 03:06 PM
Set all the class names of the divs to "show" in the HTML. Then apply a function like this:



var divs=document.getElementsByTagName("div");
var menudivs=[];

for(i=0;i<divs.length;i++) {
if(divs.className.indexOf("mymenu")!=-1) menudivs.push(divs[i]);
}

//menudivs is now an array of all the menu divs.

//hide them:

function hideDivs() {
for(i=0;i<menudivs.length;i++) {
menudivs[i].className="hide";
}
}

window.addEventListener("load",hideDivs,false);

//or in case you want to support IE for some reason:

window.attachEvent("onload",hideDivs);

kimboslice
12-07-2009, 03:26 PM
thanks gus but i cant get that code to work, if i set all divs to show the submenus
will be visible all the time and im not getting them to expand.

gusblake
12-07-2009, 03:43 PM
There are some errors in it:


for(i=0;i<divs.length;i++) {
if(divs.className.indexOf("mymenu")!=-1) menudivs.push(divs[i]);
}


Should be


for(i=0;i<divs.length;i++) {
if(divs[i].id.indexOf("mymenu")!=-1) menudivs.push(divs[i]);
}


Also, put it after the menu so it doesn't try to reference the menu elements before they exist.

This is the code I have working:



...

[menu divs]

<script type="text/javascript">
menu_status = new Array();

function showHide(theid){
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';
}
}

var divs=document.getElementsByTagName('div');
var menudivs=[];

for(i=0;i<divs.length;i++) {
if(divs[i].id.indexOf('mymenu')!=-1) menudivs.push(divs[i]);
}


function hideDivs() {
for(i=0;i<menudivs.length;i++) {
menudivs[i].className='hide';
menu_status[menudivs[i]]='hide';
}
}

window.addEventListener('load',hideDivs,false);
//window.attachEvent('onload',hideDivs) - add this within an "if IE" statement
</script>

</body>
</html>

kimboslice
12-07-2009, 03:52 PM
thanks, here is the full code but cant get it to work .
i changed all submenus to show and put the script after the menu

it dont work, all submenus shows and it dont expand at all

note that i want all submenus to be hidden if javascript enabled

any suggestions?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>





<style type="text/css">
.menu1{
margin-left:25px;
padding-left:20px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
width: 200px;
background-color: #03C;
border: thin solid #FFF;
}


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


</head>




<body>


<a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
<div id="mymenu1" class="show">
<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 class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
<div id="mymenu2" class="show">
<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 class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
<div id="mymenu3" class="show">
<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 class="menu1" onclick="showHide('mymenu4')">Menu 4 </a>
<div id="mymenu4" class="show">
<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 class="menu1" onclick="showHide('mymenu5')">Menu 5 </a>
<div id="mymenu5" class="show">
<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>


<script language="JavaScript" type="text/JavaScript">
var divs=document.getElementsByTagName("div");
var menudivs=[];

for(i=0;i<divs.length;i++) {
if(divs[i].className.indexOf("mymenu")!=-1) menudivs.push(divs[i]);
}

//menudivs is now an array of all the menu divs.

//hide them:

function hideDivs() {
for(i=0;i<menudivs.length;i++) {
menudivs[i].className="hide";
}
}

window.addEventListener("load",hideDivs,false);
//-->

</script>



</body>
</html>

kimboslice
12-07-2009, 03:54 PM
aa now it works, thanks alot gus you the man for real homie

gusblake
12-07-2009, 03:54 PM
You're welcome

kimboslice
12-07-2009, 03:57 PM
one more question is there any way to make it work with both firefox and ie?

gusblake
12-07-2009, 05:11 PM
It works for me in IE8 - did you uncomment the attachEvent line (and take out the note I put there)?

kimboslice
12-07-2009, 05:44 PM
it dont work for me , just checing how do you write the if statement?
also this code dont work if i put it in a external js file is there any way around it?

Thanks again

gusblake
12-08-2009, 12:04 AM
The code has to be executed after the HTML - if you are linking to the external file in the head section it will try to reference elements that don't 'exist' yet. The solution would be to put the code inside a function, and call the function in the body onLoad.

I'm afraid I can't help you as regards IE, but the problem might be in this list: http://www.howtocreate.co.uk/wrongWithIE/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum