mmcoder: JavaScript-Accordion-Menu

Monday, September 17, 2012

JavaScript-Accordion-Menu

ဒီလုိပုံစံမ်ဳိးကုိ Javascript နဲ႔ ေရးခ်င္သူမ်ားအတြက္ ေအာက္မွာ Source code ယူလုိက္ပါ။

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Javasript Tree Menu</title><script language="javascript">   var last_id=null;  function toggle(id){   var e=document.getElementById(id);   e.style.display=e.style.display=='' ? 'none' : '';   if(last_id==null){    last_id=document.getElementById('php');   }   if(last_id!=e)       last_id.style.display='none';   last_id=e;  }  </script><style>ul.menu{  margin:0px;  padding:0px; } ul.menu li{  list-style:none;  background-color:#F93;  margin-top:1px; } ul.menu li a{  font-family:verdana;  font-size:12px;  font-weight:bold;  color:#fff;  text-decoration:none; } ul.links{  margin:0px;  padding:0px; } ul.links li{  background-color:#f1f1f1;  padding-left:20px;  margin:0px; } ul.links li a{  color:#333;  font-weight:normal; } ul.links li a:hover{  color:#333;  text-decoration:underline; } </style></head> <body><h2>Three main IT group</h2> <div style="border:2px solid #666; width:220px;"> <ul class="menu">        <li><a href="javascript:toggle('php')">  Networking</a></li>        <ul id="php" class="links">            <li><a href="#">A+</a></li>            <li><a href="#">N+</a></li>            <li><a href="#">Cisco</a></li>   <li><a href="#">CEH</a></li>        </ul>     <li><a href="javascript:toggle('vb6')">  Programming</a></li>        <ul id="vb6" class="links" style="display:none;">            <li><a href="#">batch </a></li>            <li><a href="#">python</a></li>            <li><a href="#">VB</a></li>            <li><a href="#">C#</a></li>   <li><a href="#">Java</a></li>   <li><a href="#">C++</a></li>   <li><a href="#">C</a></li>        </ul>  <li><a href="javascript:toggle('vbnet')">  Webdeveloper</a></li>         <ul id="vbnet" class="links" style="display:none;">                <li><a href="#">Html</a></li>                <li><a href="#">Javascript</a></li>                <li><a href="#">CSS</a></li>    <li><a href="#">Flash</a></li>    <li><a href="#">ajax</a></li>    <li><a href="#">Jquery</a></li>    <li><a href="#">Perl</a></li>    <li><a href="#">Java</a></li>    <li><a href="#">PHP</a></li>   </ul>   </ul>                 </div></body></html>

mmcoder

Monday, September 17, 2012

JavaScript-Accordion-Menu

No comments:

Post a Comment