js:-

if (document.getElementById && document.getElementsByTagName){			
document.write("<link href=\"css/toggle.css\" type=\"text/css\" rel=\"stylesheet\" />")
}
function TJK_doToggleDL(x){
    var zDD=document.getElementById('admin_toggle').getElementsByTagName('dd');
    var zDT=document.getElementById('admin_toggle').getElementsByTagName('dt'); 
    zDD[x].className=(zDD[x].className=='hideDD')?'showDD':'hideDD';
    zDT[x].className=(zDT[x].className=='DTplus')?'DTminus':'DTplus'; 
}
function TJK_ToggleDLopen(){//we open all of them
    var zDD=document.getElementById('admin_toggle').getElementsByTagName('dd');
    var zDT=document.getElementById('admin_toggle').getElementsByTagName('dt'); 
    for(var i=0;i<zDT.length;i++){
	    zDD[i].className='showDD';
	    zDT[i].className='DTminus';
    }
	return false;
}
function TJK_ToggleDLclose(){//we close all of them 
    var zDD=document.getElementById('admin_toggle').getElementsByTagName('dd');
    var zDT=document.getElementById('admin_toggle').getElementsByTagName('dt'); 
    for(var i=0;i<zDT.length;i++){
	   zDD[i].className='hideDD';
 	   zDT[i].className='DTplus';
    }
	return false;
}
function TJK_ToggleDL(){
    if (document.getElementById && document.getElementsByTagName){ 
	    var zDT=document.getElementById('admin_toggle').getElementsByTagName('dt');
	    var zDD=document.getElementById('admin_toggle').getElementsByTagName('dd');
	    var ToggleON = document.getElementById('TJK_ToggleON');
	    var ToggleOFF = document.getElementById('TJK_ToggleOFF'); 
		    if (ToggleON && ToggleOFF){
				ToggleON.onclick = TJK_ToggleDLopen;
				ToggleON.title = "Show all answers";
				ToggleON.href = "#";
			   	ToggleOFF.onclick = TJK_ToggleDLclose; 
 			   	ToggleOFF.title = "Hide all answers";
				ToggleOFF.href = "#";
			}
	    for(var i=0;i<zDT.length;i++){
    		var zContent = zDT[i].innerHTML;
		    var zHref = "<a href='#' onclick=\"TJK_doToggleDL("+i+");return false\" title='Show/hide the answer'>";
		    zDT[i].innerHTML = zHref + zContent + "</a>";
		    zDD[i].className='hideDD';
		    zDT[i].className='DTplus';
	    }
    }
}















nav

css:-



.adminnav {
width:173px;
padding:0px;
         }
		 
	 


.adminnavtitle {
		align:center;
        width: 173px;
        margin: 0px;
        }

.adminnavtitle ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
	
.adminnavtitle li a {
        height: 32px;
		width:100%;
		font-size:12px; 
		font-weight:bold;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        }

.adminnavtitle li a:link, .adminnavtitle li a:visited {
        color: #FFF;
        display: block;
        background:  url('http://www.bidalink.co.uk/admin/images/adminmenuplus.gif');
        padding-left:10px; padding-right:0; padding-top:8px; padding-bottom:0
        }

.adminnavtitle li a:hover, .adminnavtitle li #current  {
        color: #FFF;
		font-size:12px; 
		font-weight:bold;
        background:  url('http://www.bidalink.co.uk/admin/images/adminmenuplus.gif') 0 -32px;
        padding-left:10px; padding-right:0; padding-top:8px; padding-bottom:0
        }
		

		
		

		
img {
    border: none;
}

		
#adminmenu {
		align:center;
        width: 173px;
        margin: 0px;
        }

#adminmenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
	
#adminmenu li a {
        height: 32px;
		width:100%;
		font-size:12px; 
		font-weight:bold;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        }

#adminmenu li a:link, #adminmenu li a:visited {
        color: #FFF;
        display: block;
        background:  url('http://www.bidalink.co.uk/admin/images/adminmenu.gif');
        padding-left:10px; padding-right:0; padding-top:8px; padding-bottom:0
        }

#adminmenu li a:hover, #adminmenu li #current  {
        color: #FFF;
		font-size:12px; 
		font-weight:bold;
        background:  url('http://www.bidalink.co.uk/admin/images/adminmenu.gif') 0 -32px;
        padding-left:10px; padding-right:0; padding-top:8px; padding-bottom:0
        }
		
		
		



main nav code:-








<div class="adminnav">

<dl id="admin_toggle">

          
 <div id="adminmenu">
    <ul>

<li><a href="" onclick="javascript:llamarasincrono('page/main.php?define=true', 'contenidos');return false">Home</a></li>
<li><a href="" onclick="javascript:llamarasincrono('page/add.php?define=true', 'contenidos');return false">Add</a></li>
<li><a href="" onclick="toggle_form();return false">Id Search</a></li>

    </ul>

 
 <div id="id-search-form-container">
<div>              
<form id="searchid" name="searchid">
<input type="text" size="3" id="id" name="id" value="Id.." onkeyup="dosearchid();" onkeypress="return chknum(event)" />&nbsp;
<select size="1" name="options" id="select" onchange="dosearchid();">
<option selected>....</option>
<option value="page/delete.php?define=true&id=">Delete</option>
<option value="page/edit.php?define=true&id=">Edit</option>
</select>
<div id="edurl"></div>
</form>
&nbsp;&nbsp;<span class="tiggle-form-cross"><a onclick="toggle_form();" onmousedown="javascript:document.searchid.reset();"><img src="images/close2.gif" /></a></span>
</div></div>

    <script language="javascript"> 
      the_form = document.getElementById('id-search-form-container')
      the_form.style.display = 'none'
   
function toggle_form() { 

         
        if(the_form.style.display == 'none') {
          the_form.style.display = 'block'
        }
        else {
          the_form.style.display = 'none'
        }
      }
    </script>
 </div> 
 
 <br />
 <span class="adminnavtitle">
 <ul>
 <li><dt><a href="" class="DTplus" id="current" onclick="TJK_doToggleDL(0);return false">Settings</a></dt></li>
 </ul>
 </span>

 <dd>
 <div id="adminmenu">

    <ul>
<li><a href="" onclick="javascript:llamarasincrono('page/msettings.php?define=true', 'contenidos');return false">Main</a></li>
<li><a href="" onclick="javascript:llamarasincrono('page/asettings.php?define=true', 'contenidos');return false">Admin</a></li>
<li><a href="" onclick="javascript:llamarasincrono('page/ssettings.php?define=true', 'contenidos');return false">Search</a></li>


    </ul>

 </div> 
 </dd>
 <br />
 
 
 <span class="adminnavtitle">
 <ul>
 <li><dt><a href="" class="DTplus" id="current" onclick="TJK_doToggleDL(1);return false">Layout Options</a></dt></li>
 </ul>
 </span>
<dd>

 <div id="adminmenu">

    <ul>

<li><a href="" onclick="javascript:llamarasincrono('page/edit-link-index.php', 'contenidos');return false">Links</a></li>
<li><a href="" onclick="javascript:llamarasincrono('page/edit-layout.php', 'contenidos');return false">Edit</a></li>
<li><a href="" onclick="javascript:llamarasincrono('page/edit-other.php?define=true', 'contenidos');return false">Other</a></li>


    </ul>
 </div>  

</dd>

 <br />
 
 <dl id="admin_toggle">
 <span class="adminnavtitle">
 <ul>
 <li><dt><a href="" class="DTplus" id="current" onclick="TJK_doToggleDL(2);return false">Stats</a></dt></li>
 </ul>
 </span>

 <dd>
 <div id="adminmenu">

    <ul>

<li><a href="" onclick="javascript:llamarasincrono('statistics/analysis/summary.php', 'contenidos');return false">Summary</a></li>
<li><a href="" onclick="javascript:llamarasincrono('statistics/analysis/daily.php', 'contenidos');return false">Daily</a></li>
<li><a href="" onclick="javascript:llamarasincrono('statistics/analysis/monthly.php', 'contenidos');return false">Monthly</a></li>

<li><a href="" onclick="javascript:llamarasincrono('statistics/analysis/yearly.php', 'contenidos');return false">Yearly</a></li>

<li><a href="" onclick="javascript:llamarasincrono('statistics/analysis/referers.php', 'contenidos');return false">Referers</a></li>

    </ul>
 </div>   
 </dd>
 </dl>
<br />
 <div id="adminmenu">
    <ul>

<li><a href='logout.php'>Logout</a></li>


    </ul>
 </div>
 </div>














toggle css:-



/*  "Show All" + "Hide All" links */
#TJK_ToggleON, #TJK_ToggleOFF {border:1px solid #333;padding:0 5px;margin-right:5px}


/* zeroing out padding and margin */
#admin_toggle dd, #admin_toggle dt {margin:0;padding:0} 


/* margin for the DTs (shorthand) */
#admin_toggle dt {margin:7px 0}


/* image and left padding for DDs */
#admin_toggle dd {background:url('answer.gif') no-repeat;padding-left:0px}


/* styling all anchors in the DTs */
#admin_toggle dt a {background:0 50% no-repeat;padding-left:32px;color:#000;text-decoration:none}
#admin_toggle dt a:visited {color:#666}
#admin_toggle dt a:visited:hover,
#admin_toggle dt a:hover,
#admin_toggle dt a:active,
#admin_toggle dt a:focus {font-weight:bold}


/* the + and - gif in the anchors */
#admin_toggle .DTplus a {background-image:url('http://www.bidalink.co.uk/admin/images/adminmenuplus.gif')}
#admin_toggle .DTminus a {background-image:url('http://www.bidalink.co.uk/admin/images/adminmenuminus.gif')}
/**********************************/
/**********************************/


#admin_toggle .showDD {position:relative;top:0}
#admin_toggle dd, .hideDD{top:-9999px;position:absolute}
#TJK_ToggleON, #TJK_ToggleOFF {display:inline;cursor:pointer;
cursor:hand}

/*\*//*/
#admin_toggle .showDD {display:block}
#admin_toggle dd,.hideDD {top:0;position:relative;display:none}
/**/