Click here to Skip to main content
14,836,552 members
Please Sign up or sign in to vote.
2.50/5 (2 votes)
See more:
Hi all,

I've side bar menu which have created through following code. But I want to show, UpArrow on right side of the image when it's showing sub items and want to show DownArrow at same position when user Clicked on below menu or upper menu,Please reply with ex. I used the following code:
XML
<head  runat="server">
<title>Untitled Page</title>
<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();
var currentOpenItemName="";
function showHide(theid)
{
if(currentOpenItemName!="" && theid!=currentOpenItemName) showHide
(currentOpenItemName);
if (document.getElementById)
{
var switch_id = document.getElementById(theid);
if(menu_status[theid] != 'show')
{
switch_id.className = 'show';
menu_status[theid] = 'show';
currentOpenItemName = theid;
}
else
{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
currentOpenItemName = "";
}
}
}
//-->
</script>
<style type="text/css">
.menu1
{
background-color:Olive;
margin-left:25px;
padding-left:20px;
padding-top:2px;
padding-bottom: 2px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
width: 67px;
border: thin solid #FF0000
}
.submenu
{
background-color:Blue;
margin-left:25px;
display: block;
height: 19px;
padding-left:20px;
padding-top: 2px;
color:White;
width: 67px;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<form id="form1"  runat="server">
<div>
<a class="menu1" önclick="showHide('mymenu1')">Menu 1</a>
<div id="mymenu1" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
<a class="menu1" önclick="showHide('mymenu2')">Menu 2 </a>
<div id="mymenu2" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
<a class="menu1" önclick="showHide('mymenu3')">Menu 3 </a>
<div id="mymenu3" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
<a class="menu1" önclick="showHide('mymenu4')">Menu 4 </a>
<div id="mymenu4" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
<a class="menu1" önclick="showHide('mymenu5')">Menu 5 </a>
<div id="mymenu5" class="hide">
<a href="default.aspx" class="submenu">Link One here</a>
<a href="default.aspx" class="submenu">Link Two here</a>
<a href="default.aspx" class="submenu">Link Three here</a>
<a href="default.aspx" class="submenu">Link Four here</a>
</div>
</div>
</form>
</body>
</html>
Posted
Updated 30-Apr-11 6:19am
v2

1 solution

A quick solution is adding two new css classes

C#
.menuArrowUp {
  padding-left: +16px;
  background-repeat: no-repeat;
  background-image: url("images/ArrowUp.png");
}
.menuArrowDown {
  padding-left: +16px;
  background-repeat: no-repeat;
  background-image: url("images/ArrowDown.png");
}


Then in the event handler, pass in the anchor element clicked

C#



And just change the anchor's class when you toggle the class of the menu, like so,

C#
function showHide(theid, a) {
  if(currentOpenItemName!="" && theid!=currentOpenItemName) showHide(currentOpenItemName);
  if (document.getElementById)
  {
    var switch_id = document.getElementById(theid);
    if(menu_status[theid] != 'show') {
      switch_id.className = 'show';
      menu_status[theid] = 'show';
      currentOpenItemName = theid;
      a.className = 'menu1 menuArrowDown';
    } else {
      switch_id.className = 'hide';
      menu_status[theid] = 'hide';
      currentOpenItemName = "";
      a.className = 'menu1 menuArrowUp';
    }
  }
}


Not the cleanest but it gets the job.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900