水平N级菜单(js)

利用JQuery写的一个水平菜单,

Demo:

The CSS/ JavaScript:

<link rel="stylesheet" type="text/css" href="droplinetabs.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="droplinemenu.js" type="text/javascript"></script>
<script type="text/javascript">
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("droplinetabs1")
</script>

 The HTML:

<div id="droplinetabs1" class="droplinetabs">
<ul>
<li><href="http://www.dynamicdrive.com/"><span>Home</span></a></li>
<li><href="http://www.dynamicdrive.com/style/"><span>CSS Examples</span></a>
  
<ul>
  
<li><href="#">Activities 1</a></li>
  
<li><href="#">Activities 2</a></li>
  
<li><href="#">Activities 3</a>
      
<ul>
      
<li><href="#">Water Sports 1</a></li>
      
<li><href="#">Water Sports 1</a></li>
      
<li><href="#">Water Sports 1</a></li>
      
<li><href="#">Water Sports 1</a></li>
      
</ul>
    
</li>
  
<li><href="#">Activities 4</a></li>
  
</ul>
</li>
<li><href="http://tools.dynamicdrive.com"><span>Tools</span></a></li>
<li><href="http://www.javascriptkit.com/"><span>JavaScript</span></a>
  
<ul>
  
<li><href="#">Traveling 1</a></li>
  
<li><href="#">Traveling 2</a></li>
  
<li><href="#">Traveling 3</a></li>
  
<li><href="#">Traveling 4</a>
      
<ul>
      
<li><href="#">Africa 1</a></li>
      
<li><href="#">Africa 2</a></li>
      
<li><href="#">Africa 3</a></li>
      
<li><href="#">Africa 4</a>
          
<ul>
          
<li><href="#">Kenya 1</a></li>
          
<li><href="#">Kenya 2</a></li>
          
<li><href="#">Kenya 3</a></li>
          
<li><href="#">Kenya 4</a></li>
          
<li><href="#">Kenya 5</a></li>
          
</ul>
        
</li>
      
</ul>
    
</li>
  
<li><href="#">Traveling 5</a></li>
  
</ul>
</li>
<li><href="http://www.cssdrive.com"><span>Gallery</span></a></li>
</ul>
</div>

 下载地址

/Files/csscode/menu001.rar

 

posted @ 2010-12-21 11:05  purecss  阅读(274)  评论(0)    收藏  举报