DIV CSS 佈局教程網

設為首頁加入收藏

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 可刷新的Div+CSS+JS制作的樹型菜單

可刷新的Div+CSS+JS制作的樹型菜單

編輯：CSS進階教程

Div+CSS+JS組和能夠實現很多好看的特殊的效果，這裡推薦一款可刷新的下拉菜單源代碼：

<style type="text/css">#PARENT{ width:300px; padding-left:20px;}</style><div id="PARENT"><ul id="nav"><li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的網站</a> <ul id="ChildMenu1" class="collapsed"> <li><a href="http://homepage.yesky.com" target="_blank">網頁陶吧</a></li> <li><a href="#">管理</a></li> <li><a href="http://homepage.yesky.com" target="_blank">網頁陶吧</a></li> <li><a href="#">管理</a></li> <li><a href="http://homepage.yesky.com" target="_blank">網頁陶吧</a></li> <li><a href="#">管理</a></li> </ul></li><li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帳務</a> <ul id="ChildMenu2" class="collapsed"> <a href="http://homepage.yesky.com" target="_blank">支付</a></li> <li><a href="#">管理</a></li> <li><a href="#">網上支付</a></li> <li><a href="#">登記匯款</a></li> <li><a href="#">在線招領</a></li> <li><a href="#">歷史帳務</a></li> </ul></li><li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">網站管理</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="#">登錄</a></li> <a href="http://homepage.yesky.com" target="_blank">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul></li><li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">網站管理</a> <ul id="ChildMenu4" class="collapsed"> <li><a href="#">登錄</a></li> <a href="http://homepage.yesky.com" target="_blank">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul></li></ul></div><script type=text/javascript><!--var LastLeftID = "";function menuFix() { var obj = document.getElementById("nav").getElementsByTagName("li");  for (var i=0; i<obj.length; i++) {  obj[i].onmouseover=function() {   this.className+=(this.className.length>0? " ": "") + "sfhover";  }  obj[i].onMouseDown=function() {   this.className+=(this.className.length>0? " ": "") + "sfhover";  }  obj[i].onMouseUp=function() {   this.className+=(this.className.length>0? " ": "") + "sfhover";  }  obj[i].onmouseout=function() {   this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), "");  } }}function DoMenu(emid){ var obj = document.getElementById(emid);  obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="")&&(emid!=LastLeftID)) //關閉上一個Menu {  document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid;}function GetMenuID(){ var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#");  if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) {  _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else {  _paramStr = ""; }  if (_paramStr.length > 0) {  var _paramArr = _paramStr.split("&");  if (_paramArr.length>0)  {   var _paramKeyVal = _paramArr[0].split("=");   if (_paramKeyVal.length>0)   {    Me</p><b>12下一頁 </b>

上一頁:網頁特效之讓css使網頁圖片半透明
下一頁:特殊效果的文字應用運用css濾鏡集錦

CSS進階教程

CSS網頁制作教程:z-index屬性的使用方法和層級樹: CSS 中的 z-index 屬性用於設置節點的堆疊順序, 擁有更高堆疊順序的節點將顯示在堆疊順序較
學習WEB標准心得:網頁重構的思路: 網頁制作poluoluo文章簡介：自己琢磨的一種CSS重構方法. 最近終於有心
CSS網頁設計技巧十則: WEBJX.COM：不要說你看不懂，只是你不願意看。：）　　I thought

相關文章

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

常見頁面元素遮住菜單解決方法初學者簡單學習CSS網頁布局 CSS學習之CSS網頁制作的10個技巧 css sprites把很多小圖集成在一張圖片上動態的樣式表lesscss:簡單學習lesscss語法 CSS3網頁制作教程:Action:hovert DIV+CSS技術入門用CSS實現網頁圖片的預加載 CSS布局需要掌握的8個你技巧幫助你學習CSS3的不錯的7個CSS3代碼生成工具

熱門推薦

調整CSS的方式給滾動條換色跨浏覽器的CSS3產生器:CSS3 please Div+Css視頻教程 CSS設置的背景圖片在IE7中點擊消失 CSS2打印屬性讓打印HTML文檔不出問題用CSS屬性選擇器控制鏈接樣式遵循web標准網頁前端得3類優化網頁制作：幾種所見所得的WEB在線編輯器 CSS3接合Javascript制作圖片拖動效果

大家都在看

在html文件裡include文件內容的方法小結 jquery使用animate方法實現控制元素移動 JS批量修改PS中圖層名稱的方法跟我學習javascript的call(),apply(),bind()與回調網頁制作中的水平居中和垂直居中解決方案 JavaScript彈出新窗口並控制窗口移動到指定位置的使用方法網頁頁面中真實的宇宙效果演示[網頁特效] document.write()及其輸出內容的樣式、位置控制

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|

Copyright © DIV+CSS佈局教程網 All Rights Reserved