Webmaster Forum / HTML, CSS, Scripts / CSS / December 2008

Hi.

I am having problems with gettting the below code to behave how I want
it to behave.
It is a "Flicker-Style" navigation menu. When you click on the arrow
(I haven't provided
the arrow graphics, if you try it, you can substitute any image for
arrow.png) for the
right-hand menu, the left-hand menu disappears. When you click on the
right-hand
menu, the sub-menu appears on the left-hand side.

It doesn't look like the javascript is replacing the menu and I have
checked to see if
I somehow am not naming a menu correctly but these things check out.

Would some kind soul mind giving the below code a go and helping me
with the problem?

Thanks.

<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif; font-size:15px;
background:#FFFFFF;}
#container{margin:0 auto; width:600px;margin-top:30px;}
a:link, a:visited{color:#0066CC; text-decoration:none;}
a:hover{text-decoration:underline;}
ul, li{margin:0; border:0; list-style:none; padding:0;}
ul{border-bottom:dotted 1px #DEDEDE;}
ul{height:21px;}
li{display:inline;}
.menu span{border:solid 1px #EFEFEF; padding:4px 2px 4px 6px; border-
bottom:none; margin-right:10px; line-height:18px;}
.menu span a{font-weight:bold;}
.menu span:hover{border:solid 1px #DEDEDE; border-right:1px solid
#999999; border-bottom:none;}
.arrow{margin-left:4px; cursor:pointer; }
.sub_menu{display:none; position:relative; border:solid 1px #DEDEDE;
border-top:none; border-right:solid 1px #999999; border-bottom:solid
1px #999999; padding:10px; top:2px; width:120px; background:#FFFFFF;}
.sub_menu a:link, .sub_menu a:visited, .sub_menu a:hover
{display:block; font-size:11px; padding:4px;}
.item_line{border-top:solid 1px #DEDEDE;}
</style>

<script type="text/javascript">
function showMenu(id_menu){
var my_menu = document.getElementById(id_menu);
if(my_menu.style.display=="none" || my_menu.style.display==""){
my_menu.style.display="block";
} else {
my_menu.style.display="none";
}
}
</script>
<div id="container">
<ul>
<li class="menu" id="Profile">
<span>
   <a href="index.html">Profile</a><img src="arrow.png"
name="arrow_profile" width="18" height="15" align="top" class="arrow"
onClick="javascript:showMenu('id_menu_profile')"
onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage
(0)" onmouseout="javascript:swapImage(2)" />
</span>
<div class="sub_menu" id="id_menu_profile">
       <a href="index.html">Modify Profile</a>
       <a href="index.html">Contact List</a>
       <a href="index.html">Add photo</a>
       <a href="index.html" class="item_line">Invite your Friends</a>
       <a href="index.html">Invite History</a>
       <a href="index.html">Guest Pass History</a>
</div>
</li>
<li class="menu" id="Something">
<span>
   <a href="index.html">Something</a><img src="arrow.png"
name="arrow_profile" width="18" height="15" align="top" class="arrow"
onClick="javascript:showMenu('id_menu_something')"
onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage
(0)" onmouseout="javascript:swapImage(2)">
</span>
<div class="sub_menu" id="id_menu_something">
       <a href="index.html">Modify Something</a>
       <a href="index.html">Contact List</a>
       <a href="index.html">Add photo</a>
       <a href="index.html" class="item_line">Invite your Friends</a>
       <a href="index.html">Invite History</a>
       <a href="index.html">Guest Pass History</a>
</div>
</li>
</ul>
</div>