豎向摺疊手風琴導航選單[JS+div+css]

阿新 • • 發佈：2019-01-21

<!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: ` &

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

豎向摺疊手風琴導航選單[JS+div+css]

相關推薦