Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I'm using this js without problem except that if a browser has disabled js part of the menu doesn't show. can anyone help me fill in the missing code? would really appreciate it.
<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> -
It looks like you're using CSS classes to show and hide the items, which is good. To account for javascript being disabled, all items need to have the "show" class on startup. Then, write a javascript function to set the default state for menu items.
-
thanks Varland for trying to help but I really need a jill and john explanation as js confuses me completely. (please don't tell me to go learn js as I am getting to the point of tearing my hair out trying to find a menu that show/hides as per client request which doesn't bounce about and generally behave badly in ie6.) this is the html if it helps. :-)
<a href="#" class="menulink">link</a>
<a href="#nogo" class="menulink" onclick="showHide('submenu')">link</a>
<div id="submenu" class="show">
<a href="#" class="submenulink">link</a>
</div>
<a href="#" class="menulink">link</a> -
Can you show us the css? Or a link to the page? That would help in figuring out where the problem is.
-
Hi Jernigani, sure thing.
.menulink {
background:none;
border-bottom:1px solid #fff;
color:#fff;
display:block;
margin:0;
padding:6px 0;
text-decoration: none;
text-indent:10px;
}
.submenulink {
background:#555;
border-bottom:1px solid #fff;
color: #fff;
display: block;
list-style-type:none;
margin:0;
padding:4px 0;
text-indent:10px;
text-decoration:none;
}
* html .submenulink {padding:3px 0;}
.hide{
display:none;
}
.show{
display:block;
}
a#current {background:#CA9402; color:#fff;}
a#subcurrent {background:#D8B152; color:#fff;} -
um, I might have figured out problem. Not sure though since I am not able to see all of your code.
.menulink {
background:none;
border-bottom:1px solid #fff;
color:#fff;
display:block;
margin:0;
padding:6px 0;
text-decoration: none;
text-indent:10px;
}
This will make your text blend in with your background. (If you don't have any background colors set, it will look like there is nothing there)
You might try naming the links different names. Like link1 link2 link2a link3. That way you know which link shows up and which doesn't. Also you might try giving the class .menulink a colored background other than white and see if you links show up.
I hope this helps. -
aha, I totally confused you. the left column that holds the menu has a background image that's why I set the css backgrounds to transparent. My problem is js. The menu is a hide show one (only 5 links or so are hidden) and that is the part that doesn't show when js is disabled in a browser.
-
Well you might try to set the link class to default to the open state. Than with js set onload to initialize those links to be to the closed state.
That would work. If i'm understanding you now. :D -
yes that would probably work. but how I would accomplish that is beyond me. :-)
-
just call the function in the body tag
<body onload="functionHere()">
and in that function set the class to your off state.
And by default have the links have a class that sets them to display.
Does that make sense? -
it does but I seem to be quite thick about it.
I have set <body onload="showHide()">
changed the class from hide to show with no result. I tried different combinations e.g.
if(menu_status[theid] != 'hide') {
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
but without success.
1 to 11 of 11