豎向摺疊手風琴導航選單[JS+div+css]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+div+css實現豎向摺疊手風琴導航選單外掛 - 程式碼筆記 www.198zone.com</title> </head> <body> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";} /* menuDiv */ .menuDiv{border:1px solid #CCCCCC;background:#FFFFFF;padding:1px;} .menuDiv h3{font-size:14px;font-weight:bold;color:#FFFFFF;padding:5px 5px 5px 15px;background:#006699;cursor:pointer;height:22px;line-height:22px;overflow:hidden;} .menuDiv ul li{color:#333333;background:#EEEEEE;padding:5px 5px 5px 15px;font-size:12px;margin:1px 0 0 0;height:16px;} .menuDiv ul li a{color:#333333;background:#F4F4F4;display:block;padding:5px 5px 5px 15px;font-size:12px;margin:-5px -5px -5px -15px;text-decoration:none;height:16px;} .menuDiv ul li a:hover{color:#FFFFFF;background:#006699;} </style> <div style="width:268px;margin:50px auto;"> <div class="menuDiv"> <h3>JS程式碼</h3> <ul> <li><a href="http://www.198zone.com/">導航選單</a></li> <li><a href="http://www.198zone.com/">焦點幻燈片</a></li> <li><a href="http://www.198zone.com/">網頁特效</a></li> <li><a href="http://www.198zone.com/">廣告程式碼</a></li> <li><a href="http://www.198zone.com/">jQuery</a></li> <li><a href="http://www.198zone.com/">jQuery彈出層</a></li> <li><a href="http://www.198zone.com/">QQ客服</a></li> </ul> </div> <div class="menuDiv"> <h3>欣賞借鑑</h3> <ul> <li><a href="http://www.198zone.com/">企業類網站</a></li> <li><a href="http://www.198zone.com/">行業類網站</a></li> <li><a href="http://www.198zone.com/">BLOG類網站</a></li> <li><a href="http://www.198zone.com/">門戶類網站</a></li> <li><a href="http://www.198zone.com/">商城類網站</a></li> </ul> </div> <div class="menuDiv"> <h3>建站技巧</h3> <ul> <li><a href="http://www.198zone.com/">企業類網站</a></li> <li><a href="http://www.198zone.com/">行業類網站</a></li> <li><a href="http://www.198zone.com/">BLOG類網站</a></li> <li><a href="http://www.198zone.com/">門戶類網站</a></li> <li><a href="http://www.198zone.com/">商城類網站</a></li> <li><a href="http://www.198zone.com/">企業類網站</a></li> <li><a href="http://www.198zone.com/">行業類網站</a></li> <li><a href="http://www.198zone.com/">BLOG類網站</a></li> <li><a href="http://www.198zone.com/">門戶類網站</a></li> <li><a href="http://www.198zone.com/">商城類網站</a></li> </ul> </div> <div class="menuDiv"> <h3>YY頻道設計</h3> <ul> <li><a href="http://www.198zone.com/">yy娛樂頻道設計</a></li> <li><a href="http://www.198zone.com/">yy情侶頻道設計圖</a></li> <li><a href="http://www.198zone.com/">yy遊戲頻道設計圖</a></li> <li><a href="http://www.198zone.com/">YY個性簽名</a></li> </ul> </div> </div> <script type="text/javascript"> function MenuSwitch(className){ this._elements = []; this._default = -1; this._className = className; this._previous = false; } MenuSwitch.prototype.setDefault = function(id){ this._default = Number(id); } MenuSwitch.prototype.setPrevious = function(flag){ this._previous = Boolean(flag); } MenuSwitch.prototype.collectElementbyClass = function(){ this._elements = []; var allelements = document.getElementsByTagName("div"); for(var i=0;i<allelements.length;i++){ var mItem = allelements[i]; if (typeof mItem.className == "string" && mItem.className == this._className){ var h3s = mItem.getElementsByTagName("h3"); var uls = mItem.getElementsByTagName("ul"); if(h3s.length == 1 && uls.length == 1){ h3s[0].style.cursor = "hand"; if(this._default == this._elements.length){ uls[0].style.display = "block"; }else{ uls[0].style.display = "none"; } this._elements[this._elements.length] = mItem; } } } } MenuSwitch.prototype.open = function(mElement){ var uls = mElement.getElementsByTagName("ul"); uls[0].style.display = "block"; } MenuSwitch.prototype.close = function(mElement){ var uls = mElement.getElementsByTagName("ul"); uls[0].style.display = "none"; } MenuSwitch.prototype.isOpen = function(mElement){ var uls = mElement.getElementsByTagName("ul"); return uls[0].style.display == "block"; } MenuSwitch.prototype.toggledisplay = function(header){ var mItem; if(window.addEventListener){ mItem = header.parentNode; }else{ mItem = header.parentElement; } if(this.isOpen(mItem)){ this.close(mItem); }else{ this.open(mItem); } if(!this._previous){ for(var i=0;i<this._elements.length;i++){ if(this._elements[i] != mItem){ var uls = this._elements[i].getElementsByTagName("ul"); uls[0].style.display = "none"; } } } } MenuSwitch.prototype.init = function(){ var instance = this; this.collectElementbyClass(); if(this._elements.length==0){ return; } for(var i=0;i<this._elements.length;i++){ var h3s = this._elements[i].getElementsByTagName("h3"); if(window.addEventListener){ h3s[0].addEventListener("click",function(){instance.toggledisplay(this);},false); }else{ h3s[0].onclick = function(){instance.toggledisplay(this);} } } } </script> <script language="javascript"> var mSwitch = new MenuSwitch("menuDiv"); mSwitch.setDefault(0); mSwitch.setPrevious(false); mSwitch.init(); </script> <!--以下無正文 轉載或者使用請註釋出自程式碼筆記 www.198zone.com--> <div style="width:960px;margin:10px auto; clear:both; text-align:center; "> <script src="http://www.198zone.com/statics/js/ad/96090.js" type="text/javascript"></script> </div> <div style="width:960px;margin:20px auto; clear:both; text-align:center; font-size:12px; line-height:25px; "> <a href="http://www.198zone.com" style="color:#333"><strong>程式碼筆記整理</strong></a> </strong> 轉載請自覺註明出處!注:此程式碼僅供學習交流,請勿用於商業用途。 <br> 關注更多程式碼筆記更新 請加入程式碼筆記交流群 : <strong>8019996</strong> <a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=f19215a1ef0ab2c1d1c163df664fa1bf875bb0f30042403192309b5e0a2c22de"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="程式碼筆記資源分享群①" title="程式碼筆記資源分享群①"></a> <a style="list-style:none" href="http://www.198zone.com/helpweb/2013045.html" target="_blank"><strong>( 檢視更多程式碼筆記QQ群 )</strong></a> <script src="http://www.198zone.com/statics/js/inc_share.js" type="text/javascript"></script> <script src="http://www.198zone.com/statics/js/inc_statistics.js" type="text/javascript"></script> <script src="http://www.198zone.com/statics/js/inc_monitor.js" type="text/javascript"></script> </div> <!--以上無正文 轉載或者使用請註釋出自代.碼.筆.記 www.198zone.com--> </body> </html>
後面根據這個demo進行javascript的學習。
相關推薦
豎向摺疊手風琴導航選單[JS+div+css]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm
JS之三級豎向展開/收縮導航選單
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.
CSS,JavaScript實現手風琴導航選單
開發十年,就只剩下這套架構體系了! >>>
支援響應式手機端的JS手風琴摺疊導航選單特效(調整)
這個是網上提供的效果,一開始覺得效果不錯,可以使用一下,但是真正用到專案上發現很多問題,於是自己進行了一些調整,這樣可以相容顯示在手機,且不會有溢位這些情況,先上改過的效果圖(item2和item4為展開狀態): 看到這覺得也就是改了字型居中和顏色配色,其實重點修改
HTML+CSS+JS 實現DIV豎向拖拽
最近寫專案遇到一個業務需求,需要實現div的豎向推拽排序。在參考了文章《Html+css實現拖拽導航條》後,自己做了一些修改,最終實現了div的豎向拖拽。程式碼如下:<!DOCTYPE HTML> <html> <head>
js實現當前導航選單高亮顯示
html: <div id="navi"> <ul> <li><a href="1.html">主頁</a></li> <li><a href="2.html">欄目1</a></l
簡單DIV垂直居中在可視區域、DIV垂直居中在可視區域、DIV垂直居中、導航選單以下可視區域垂直居中
簡單瞭解一下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DIV垂直居中在可視區域/有固定定位的導航選單以下
SlwUi(Super Lightweight UI)前端js外掛菜單系列(3)右鍵選單SlwCtxMenu,導航選單SlwMenu
今天介紹前端js外掛菜單系列(3)右鍵選單SlwCtxMenu,導航選單SlwMenu。 基於jQuery,瀏覽器相容(Browser Support) Internet Explore
vue中element UI導航選單(可摺疊式)(導航列表根據後臺資料渲染)
版本一:可摺疊式,資料前臺自定義 <template> <div id="index"> <el-aside width="152px" class="asideNav"> <el-menu :default-act
js實現左右滑動的導航選單,仿今日頭條頂部選單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
用Vue.js遞迴元件構建一個可摺疊的樹形選單
在Vue.js中一個遞迴元件呼叫的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> &
js簡單實用的垂直導航選單,滑鼠移動觸發
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
Bootstrap之側邊導航選單(可摺疊分組) 加了點選摺疊
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-
Android 橫向豎向的抽屜選單
導航抽屜顯示在螢幕的最左側,預設情況下是隱藏的,當用戶用手指從邊緣向另一個滑動的時候,會出現一個隱藏的面板,當點選面板外部或者向原來的方向滑動的時候,抽屜導航就會消失了! 好了,這個抽屜就是Drawe
十天學會web標準(DIV+CSS)系列(七)橫向導航選單
一、橫向列表選單 前邊學習過縱向導航選單,又學習了float屬性,那麼要實現橫向導航選單是不是很簡單了,只需要把li橫向排列就可實現了。把第四節的程式碼拿過來直接用,修改後的程式碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH
jquery實現側邊欄手風琴三級導航選單demo
jquery實現側邊欄手風琴三級導航選單 效果圖: 引入檔案,font-awesome為字型庫檔案: <link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-aweso
如何做分類導航欄選單js
js程式碼: $(function() { // 導航選單 var catelistsli = $(".fp-catelists").find("li"); // 選單顯示
Bootstrap之側邊導航選單(可摺疊分組)
效果圖: 原始碼: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ch
ExtJs實現手風琴格式選單展示(摺疊選單)
一、簡單的手風琴格式選單: Js程式碼: Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器元件", width:500, height:200, l
JS無限級導航/選單
這裡使用layui渲染的導航 實體類 dept.java private int id; //id private String dept_name; //部門名稱 private int pid; //上級部門id pr