無障礙A＋的tab鍵操控

方法一 (Superfish.js)

方法二

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>無障礙A+的tab鍵操控-demo-1</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<style>
		body {
				margin: 10px;
		}
		
		.navbar,
		.navbar .navbar-sub {
				list-style: none;
				margin: 0;
				padding: 0;
		}
		
		.navbar > .navbar-item {
				float: left;
		}
		
		.navbar > .navbar-item:last-child {
				margin-right: 0;
		}
		
		.navbar > .navbar-item.active > .navbar-sub {
				display: block;
		}
		
		.navbar > .navbar-item a {
				text-decoration: none;
		}
		
		.navbar > .navbar-item > a {
				background-color: #999;
				padding: 10px 20px;
				color: #696969;
				display: block;
		}
		
		.navbar > .navbar-item > a:hover,
		.navbar > .navbar-item > a:focus,
		.navbar > .navbar-item.active > a {
				background-color: #ccc;
		}
		
		.navbar .navbar-sub {
				display: none;
		}
		
		.navbar .navbar-sub > .navbar-sub-item > a {
				color: #ccc;
				display: block;
				padding: 5px 10px;
				text-align: center;
				background-color: #696969;
		}
		
		.navbar .navbar-item.active .navbar-sub-item > a:hover,
		.navbar .navbar-item.active .navbar-sub-item > a:focus {
				background-color: #999;
		}
	</style>
</head>
<body>
  
  <ul class="navbar">
    <li class="navbar-item">
        <a href="javascript:;">Parent Link-1</a>
        
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    
    <li class="navbar-item">
        <a href="javascript:;">Parent Link-2</a>
        
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    
    <li class="navbar-item">
        <a href="javascript:;">Parent Link-3</a>
        
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    
    <li class="navbar-item">
        <a href="javascript:;">Parent Link-4</a>
        
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
</ul>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!DOCTYPE html>

<html>

<head>

<title>無障礙A+的tab鍵操控-demo-1</title>

<style>

body {

margin: 10px;

}

.navbar,

.navbar .navbar-sub {

list-style: none;

margin: 0;

padding: 0;

}

.navbar > .navbar-item {

float: left;

}

.navbar > .navbar-item:last-child {

margin-right: 0;

}

.navbar > .navbar-item.active > .navbar-sub {

display: block;

}

.navbar > .navbar-item a {

text-decoration: none;

}

.navbar > .navbar-item > a {

background-color: #999;

padding: 10px 20px;

color: #696969;

display: block;

}

.navbar > .navbar-item > a:hover,

.navbar > .navbar-item > a:focus,

.navbar > .navbar-item.active > a {

background-color: #ccc;

}

.navbar .navbar-sub {

display: none;

}

.navbar .navbar-sub > .navbar-sub-item > a {

color: #ccc;

display: block;

padding: 5px 10px;

text-align: center;

background-color: #696969;

}

.navbar .navbar-item.active .navbar-sub-item > a:hover,

.navbar .navbar-item.active .navbar-sub-item > a:focus {

background-color: #999;

}

</style>

</head>

<body>

<a href="javascript:;">Parent Link-1</a>

</li>

</li>

<a href="#url_redirect">Three</a>

</li>

</ul>

</li>

<a href="javascript:;">Parent Link-2</a>

</li>

</li>

<a href="#url_redirect">Three</a>

</li>

</ul>

</li>

<a href="javascript:;">Parent Link-3</a>

</li>

</li>

<a href="#url_redirect">Three</a>

</li>

</ul>

</li>

<a href="javascript:;">Parent Link-4</a>

</li>

</li>

<a href="#url_redirect">Three</a>

</li>

</ul>

</li>

</ul>

</body>

</html>

$(function(){
	$('.navbar').on('mouseenter focusin', '.navbar-item > a',function (e) {
		$(this).parent('.navbar-item').addClass('active').siblings('.navbar-item').removeClass('active')
	});	
});

$(function(){

$('.navbar').on('mouseenter focusin', '.navbar-item > a',function (e) {

$(this).parent('.navbar-item').addClass('active').siblings('.navbar-item').removeClass('active')

});

See the Pen 無障礙A+的tab鍵操控-demo-1 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

利用事件 .on('', '',function (e) { });
function (e) 是指 event，其中包含滑鼠事件的各種信息，如：滑鼠move時的坐標等… event 對象，包含一些屬性信息，如此處的 e.pageX，e.pageY 等。
.parent()
jquery比較parent-parents-closest差別
.siblings()
jQuery 遍历 – siblings() 方法
DOM 元素集合的 jQuery 對象，.siblings() 方法允許我們在 DOM 樹中搜索這些元素的同胞元素，並用匹配元素構造一個新的 jQuery 對象。

發現的問題：
測試後可使用 Tab 鍵直接跳位下個選單，在別層的可以直接跳過。
使用 Tab 鍵 + Shift 鍵後退選無法跳到上層子選單內，直接跳往上層的第一個項次

方法三

自動加入 attribute (屬性) tabindex 與自動編號，使 <a> 標籤可以配合編號自動跳，但只合用於二層，無法超過三層。

$(function() {
	
	/*mav 次選單滑入彈出方式與 Class 方式效果*/
	$(".dropdown-toggle").focus(function() {
		$(".navbar-nav").find(".dropdown-menu").hide();
		if ($(this).siblings(".dropdown-menu") != undefined) {
			$(this).siblings(".dropdown-menu").show();
		}
	});	
	
	$(".dropdown").hover(
		function() {
			$(".navbar-nav").find(".dropdown-menu").hide();
			$(this).find(".dropdown-menu").show();
			$(this).toggleClass('open');   
		}, 
		function() {
			$(this).find(".dropdown-menu").hide();
			$(this).toggleClass('open');   
	});	
	/*/mav 次選單滑入彈出方式與 Class 方式效果*/

	/*nav > a 元素標簽動態加入 attribute (屬性) "tabindex"*/
	var n = 1;
	$("#topMenu").find("a,input").each(function() {
		if ($(this).attr("tabindex") == undefined) {
			$(this).attr("tabindex", n);
			n++;
		}
	});
	$("#nav-links").find("a").each(function() {
		$(this).attr("tabindex", n);
		n++;
	});
	// 找到nav選單最後一個a標籤，在 focus 結尾使用 .blur事件失焦後關閉選單
	$("#nav-links .dropdown:last .dropdown-menu").find("li:last a").blur(function() {
		$(".dropdown-menu").hide();
	});
	/*/nav > a 元素標簽動態加入 attribute (屬性) "tabindex"*/
	
});

$(function() {

/*mav 次選單滑入彈出方式與 Class 方式效果*/

$(".dropdown-toggle").focus(function() {

$(".navbar-nav").find(".dropdown-menu").hide();

if ($(this).siblings(".dropdown-menu") != undefined) {

$(this).siblings(".dropdown-menu").show();

}

});

$(".dropdown").hover(

function() {

$(".navbar-nav").find(".dropdown-menu").hide();

$(this).find(".dropdown-menu").show();

$(this).toggleClass('open');

function() {

$(this).find(".dropdown-menu").hide();

$(this).toggleClass('open');

});

/*/mav 次選單滑入彈出方式與 Class 方式效果*/

/*nav > a 元素標簽動態加入 attribute (屬性) "tabindex"*/

var n = 1;

$("#topMenu").find("a,input").each(function() {

if ($(this).attr("tabindex") == undefined) {

$(this).attr("tabindex", n);

n++;

}

});

$("#nav-links").find("a").each(function() {

$(this).attr("tabindex", n);

n++;

});

// 找到nav選單最後一個a標籤，在 focus 結尾使用 .blur事件失焦後關閉選單

$("#nav-links .dropdown:last .dropdown-menu").find("li:last a").blur(function() {

$(".dropdown-menu").hide();

});

/*/nav > a 元素標簽動態加入 attribute (屬性) "tabindex"*/

});

方法四

此方法也可以直接使用jQuery中的focus力方式直接跳選次選單子層(第三四前以上)，但是還是不推薦，因為 jQuery 版本只能到 jquery-1.6.2 那，對於較新版本的 jQuery 會沒有作用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jDropMenu-jQuery 多級下拉菜單插件</title>
<style type="text/css">
#top-navigation {
	margin: 10px auto 600px;
	width: 960px;
	height: 36px;
}
.menu {
	margin: 0;
}
.menu-item {
	position: relative;
	z-index: 2;
	float: left;
	margin-left: 3px;
	font-size: 14px;
	width: 115px;
	line-height: 36px;
	list-style-type: none;
	text-align: center;
	display: inline;
}
.menu .has-sub-menu {
	border-top: 3px solid #369;
	line-height: 33px;
}
.sub-menu .has-sub-menu {
	border-top: none;
	line-height: 36px;
	border-right: 3px solid #369;
	width: 112px;
}
.menu-item a:link, .menu-item a:visited, .menu-item a:hover {
	font-weight: bold;
	display: block;
	width: 100%;
	background-color: #3B3939;
	color: #fff;
	overflow: hidden;
}
.menu-item a:hover {
	color: #009FBC;
	background-color: #FFF;
	text-decoration: none;
}
.menu-item .sub-menu {
	display: none;
	position: absolute;
	z-index: 3;
	top: 33px;
	left: 0;
	margin: 0;
	box-shadow: 0 3px 10px #333;
	width: 115px;
}
.sub-menu li {
	margin-left: 0;
}
.sub-menu .sub-menu {
	top: 0;
	left: 115px;
	z-index: 4;
}
</style>
</head>
<body>
<div class="header">
	<h1>jDropMenu - jQuery 多級下拉菜單插件</h1>
</div>
<div id="top-navigation">
	<ul class="menu" id="menu-top-navigation">
		<li class="menu-item"> <a href="#">Home</a> </li>
		<li class="menu-item has-sub-menu"> <a href="#">Frontend</a>
			<ul class="sub-menu">
				<li class="menu-item"> <a href="#">XHTML</a> </li>
				<li class="menu-item"> <a href="#">CSS</a> </li>
				<li class="menu-item"> <a href="#">HTML5</a> </li>
				<li class="menu-item"> <a href="#">CSS 3</a> </li>
				<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>
					<ul class="sub-menu">
						<li class="menu-item"> <a href="#">jQuery</a> </li>
						<li class="menu-item has-sub-menu"> <a href="#">YUI</a>
							<ul class="sub-menu">
								<li class="menu-item"> <a href="#">jQuery</a> </li>
								<li class="menu-item"> <a href="#">YUI</a> </li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="menu-item has-sub-menu"> <a href="#">DOM</a>
					<ul class="sub-menu">
						<li class="menu-item"> <a href="#">jQuery</a> </li>
						<li class="menu-item"> <a href="#">YUI</a> </li>
					</ul>
				</li>
				<li class="menu-item"> <a href="#">Ajax</a> </li>
				<li class="menu-item has-sub-menu"> <a href="#">JSON</a>
					<ul class="sub-menu">
						<li class="menu-item"> <a href="#">XHTML</a> </li>
						<li class="menu-item"> <a href="#">CSS</a> </li>
						<li class="menu-item has-sub-menu"> <a href="#">HTML5</a>
							<ul class="sub-menu">
								<li class="menu-item"> <a href="#">XHTML</a> </li>
								<li class="menu-item"> <a href="#">CSS</a> </li>
								<li class="menu-item"> <a href="#">HTML5</a> </li>
								<li class="menu-item"> <a href="#">CSS 3</a> </li>
								<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>
									<ul class="sub-menu">
										<li class="menu-item"> <a href="#">jQuery</a> </li>
										<li class="menu-item has-sub-menu"> <a href="#">YUI</a>
											<ul class="sub-menu">
												<li class="menu-item"> <a href="#">jQuery</a> </li>
												<li class="menu-item"> <a href="#">YUI</a> </li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="menu-item has-sub-menu"> <a href="#">DOM</a>
									<ul class="sub-menu">
										<li class="menu-item"> <a href="#">jQuery</a> </li>
										<li class="menu-item"> <a href="#">YUI</a> </li>
									</ul>
								</li>
								<li class="menu-item"> <a href="#">Ajax</a> </li>
								<li class="menu-item"> <a href="#">JSON</a> </li>
							</ul>
						</li>
						<li class="menu-item"> <a href="#">CSS 3</a> </li>
						<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>
							<ul class="sub-menu">
								<li class="menu-item"> <a href="#">jQuery</a> </li>
								<li class="menu-item has-sub-menu"> <a href="#">YUI</a>
									<ul class="sub-menu">
										<li class="menu-item"> <a href="#">jQuery</a> </li>
										<li class="menu-item"> <a href="#">YUI</a> </li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu-item has-sub-menu"> <a href="#">DOM</a>
							<ul class="sub-menu">
								<li class="menu-item"> <a href="#">jQuery</a> </li>
								<li class="menu-item"> <a href="#">YUI</a> </li>
							</ul>
						</li>
						<li class="menu-item"> <a href="#">Ajax</a> </li>
						<li class="menu-item"> <a href="#">JSON</a> </li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="menu-item"> <a href="#">PHP</a> </li>
		<li class="menu-item has-sub-menu"> <a href="#">WordPress</a>
			<ul class="sub-menu">
				<li class="menu-item"> <a href="#">WP Themes</a> </li>
				<li class="menu-item"> <a href="#">WP Plugins</a> </li>
			</ul>
		</li>
		<li class="menu-item"> <a href="#">SEO</a> </li>
		<li class="menu-item has-sub-menu"> <a href="#">Video</a>
			<ul class="sub-menu">
				<li class="menu-item"> <a href="#">jQuery</a> </li>
				<li class="menu-item has-sub-menu"> <a href="#">YUI</a>
					<ul class="sub-menu">
						<li class="menu-item"> <a href="#">jQuery</a> </li>
						<li class="menu-item has-sub-menu"> <a href="#">YUI</a>
							<ul class="sub-menu">
								<li class="menu-item"> <a href="#">jQuery</a> </li>
								<li class="menu-item has-sub-menu"> <a href="#">YUI</a>
									<ul class="sub-menu">
										<li class="menu-item"> <a href="#">jQuery</a> </li>
										<li class="menu-item"> <a href="#">YUI</a> </li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="menu-item has-sub-menu"> <a href="#">Downloads</a>
			<ul class="sub-menu">
				<li class="menu-item"> <a href="#">XHTML</a> </li>
				<li class="menu-item"> <a href="#">CSS</a> </li>
				<li class="menu-item"> <a href="#">HTML5</a> </li>
				<li class="menu-item"> <a href="#">CSS 3</a> </li>
				<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>
					<ul class="sub-menu">
						<li class="menu-item"> <a href="#">jQuery</a> </li>
						<li class="menu-item has-sub-menu"> <a href="#">YUI</a>
							<ul class="sub-menu">
								<li class="menu-item"> <a href="#">jQuery</a> </li>
								<li class="menu-item"> <a href="#">YUI</a> </li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="menu-item has-sub-menu"> <a href="#">DOM</a>
					<ul class="sub-menu">
						<li class="menu-item"> <a href="#">jQuery</a> </li>
						<li class="menu-item"> <a href="#">YUI</a> </li>
					</ul>
				</li>
				<li class="menu-item"> <a href="#">Ajax</a> </li>
				<li class="menu-item has-sub-menu"> <a href="#">JSON</a>
					<ul class="sub-menu">
						<li class="menu-item"> <a href="#">XHTML</a> </li>
						<li class="menu-item"> <a href="#">CSS</a> </li>
						<li class="menu-item has-sub-menu"> <a href="#">HTML5</a>
							<ul class="sub-menu">
								<li class="menu-item"> <a href="#">XHTML</a> </li>
								<li class="menu-item"> <a href="#">CSS</a> </li>
								<li class="menu-item"> <a href="#">HTML5</a> </li>
								<li class="menu-item"> <a href="#">CSS 3</a> </li>
								<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>
									<ul class="sub-menu">
										<li class="menu-item"> <a href="#">jQuery</a> </li>
										<li class="menu-item has-sub-menu"> <a href="#">YUI</a>
											<ul class="sub-menu">
												<li class="menu-item"> <a href="#">jQuery</a> </li>
												<li class="menu-item"> <a href="#">YUI</a> </li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="menu-item has-sub-menu"> <a href="#">DOM</a>
									<ul class="sub-menu">
										<li class="menu-item"> <a href="#">jQuery</a> </li>
										<li class="menu-item"> <a href="#">YUI</a> </li>
									</ul>
								</li>
								<li class="menu-item"> <a href="#">Ajax</a> </li>
								<li class="menu-item"> <a href="#">JSON</a> </li>
							</ul>
						</li>
						<li class="menu-item"> <a href="#">CSS 3</a> </li>
						<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>
							<ul class="sub-menu">
								<li class="menu-item"> <a href="#">jQuery</a> </li>
								<li class="menu-item has-sub-menu"> <a href="#">YUI</a>
									<ul class="sub-menu">
										<li class="menu-item"> <a href="#">jQuery</a> </li>
										<li class="menu-item"> <a href="#">YUI</a> </li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu-item has-sub-menu"> <a href="#">DOM</a>
							<ul class="sub-menu">
								<li class="menu-item"> <a href="#">jQuery</a> </li>
								<li class="menu-item"> <a href="#">YUI</a> </li>
							</ul>
						</li>
						<li class="menu-item"> <a href="#">Ajax</a> </li>
						<li class="menu-item"> <a href="#">JSON</a> </li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="menu-item"> <a href="#">About Us</a> </li>
	</ul>
</div>
<!--<script type="text/javascript" src="jquery-1.6.2.min.js"></script> -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<!--<script>
$(function(){
	alert("jquery is runing")
});
</script>-->
<script type="text/javascript">
 (function($){
 $.fn.extend({
 dropMenu: function(menuItem, subMenuItem){
 var root = $(this), // 首先找到菜單（的根節點） 
 CLS_HAS_MENU = 'has-sub-menu', 
 isIE = $.browser.msie, // 是否為 IE 瀏覽器
 version = $.browser.version; // 瀏覽器的版本
 // 沒有找到菜單則退出
 // root.find(':first') 都是得到 document.getElementById('top-navigation')
 if (!root[0]) {
 return false;
 }
 // 默認的菜單標籤為 li 標籤（選擇器）
 if (!menuItem) {
 menuItem = 'li';
 }
 // 默認的子菜單標籤為 ul 標籤（選擇器）
 if (!subMenuItem) {
 subMenuItem = 'ul';
 }
 // $(root).find(menuItem) 找到導航菜單下所有的 li 節點
 // 通過 each() 遍歷添加相應的處理事件 mouseover,mouseout 和 tab 操作的支持
 $(root).find(menuItem).each(function(i, li){
 var curMenu = $(li),
 // 找到 li 下的第一個 a 標籤，添加 tab 鍵的支持時需要用到的
 curLink = curMenu.is('a') ? curMenu : $(curMenu.find('a:first')), 
 // 找到當前 li 標籤下的子菜單
 subMenus = $(subMenuItem, curMenu), 
 // 判斷是否有子菜單節點
 hasMenu = subMenus.length >= 1, 
 // 當前 li 標籤下的子菜單
 curSubMenu = null,
 // 當前子菜單的最後一項（a 標籤） 
 curSubMenuLastItem = null, 
 // 顯示子菜單
 show = function(){
 // show sub menu 發現 IE6 中使用 show() 方無法顯示二級以下的子菜單
 // 所以很無賴的 hack 了一下
 if (!isIE || (isIE && version > 6)) {
  curSubMenu.show(200);
 }
 else {
  curSubMenu.css('display', 'block');
 }
 }, 
 // 隱藏子菜單
 hide = function(){
 // hide sub menu
 if (!isIE || (isIE && version > 6)) {
  curSubMenu.hide(150);
 }
 else {
  curSubMenu.css('display', 'none');
 }
 };
 // 只在有子菜單的時候才做相應的處理
 if (hasMenu) {
 // 無賴 WordPress 的輸出沒有 .has-sub-menu
 // 只要自己手動加上了
 curMenu.addClass(CLS_HAS_MENU);
 // 找到當前 li 對應的子菜單，而不是把更次級的子菜單都找到
 // 不習慣用 subMenus.get(0)
 curSubMenu = $(subMenus[0]);
 // 當前子菜單的最後一項（a 標籤） 
  curSubMenuLastItem = curSubMenu.find('a:last');
 // mouse event
 curMenu.hover(show, hide);
 // key(tab key) event
 // 獲得焦點是在當前 li 下的第一個A標籤上處理
 curLink.focus(show);
 // 失去焦點則需要是tab讓子菜單的最後一個菜單項都走過了，才關閉子菜單
 curSubMenuLastItem.blur(hide);
 }
 });
 }
 });
 $('#top-navigation').dropMenu();
})(jQuery); 
 </script> 
<script type="text/javascript">
 (function(){
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-4473199-1']);
 _gaq.push(['_trackPageview']);
 (function(){
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ga, s);
 })();
 })();
 </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

<!DOCTYPE html>

<html>

<head>

<title>jDropMenu-jQuery 多級下拉菜單插件</title>

#top-navigation {

margin: 10px auto 600px;

width: 960px;

height: 36px;

}

.menu {

margin: 0;

}

.menu-item {

position: relative;

z-index: 2;

float: left;

margin-left: 3px;

font-size: 14px;

width: 115px;

line-height: 36px;

list-style-type: none;

text-align: center;

display: inline;

}

.menu .has-sub-menu {

border-top: 3px solid #369;

line-height: 33px;

}

.sub-menu .has-sub-menu {

border-top: none;

line-height: 36px;

border-right: 3px solid #369;

width: 112px;

}

.menu-item a:link, .menu-item a:visited, .menu-item a:hover {

font-weight: bold;

display: block;

width: 100%;

background-color: #3B3939;

color: #fff;

overflow: hidden;

}

.menu-item a:hover {

color: #009FBC;

background-color: #FFF;

text-decoration: none;

}

.menu-item .sub-menu {

display: none;

position: absolute;

z-index: 3;

top: 33px;

left: 0;

margin: 0;

box-shadow: 0 3px 10px #333;

width: 115px;

}

.sub-menu li {

margin-left: 0;

}

.sub-menu .sub-menu {

top: 0;

left: 115px;

z-index: 4;

}

</style>

</head>

<body>

<h1>jDropMenu - jQuery 多級下拉菜單插件</h1>

</div>

<li class="menu-item has-sub-menu"> <a href="#">Frontend</a>

<li class="menu-item"> <a href="#">XHTML</a> </li>

<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>

<li class="menu-item"> <a href="#">jQuery</a> </li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

<li class="menu-item"> <a href="#">XHTML</a> </li>

<li class="menu-item"> <a href="#">XHTML</a> </li>

<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>

<li class="menu-item"> <a href="#">jQuery</a> </li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>

<li class="menu-item"> <a href="#">jQuery</a> </li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li class="menu-item has-sub-menu"> <a href="#">WordPress</a>

<li class="menu-item"> <a href="#">WP Themes</a> </li>

<li class="menu-item"> <a href="#">WP Plugins</a> </li>

</ul>

</li>

<li class="menu-item has-sub-menu"> <a href="#">Video</a>

<li class="menu-item"> <a href="#">jQuery</a> </li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li class="menu-item has-sub-menu"> <a href="#">Downloads</a>

<li class="menu-item"> <a href="#">XHTML</a> </li>

<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>

<li class="menu-item"> <a href="#">jQuery</a> </li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

<li class="menu-item"> <a href="#">XHTML</a> </li>

<li class="menu-item"> <a href="#">XHTML</a> </li>

<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>

<li class="menu-item"> <a href="#">jQuery</a> </li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

<li class="menu-item has-sub-menu"> <a href="#">JavaScript</a>

<li class="menu-item"> <a href="#">jQuery</a> </li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

<li class="menu-item"> <a href="#">jQuery</a> </li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li class="menu-item"> <a href="#">About Us</a> </li>

</ul>

</div>

<!--<script>

$(function(){

alert("jquery is runing")

});

</script>-->

(function($){

$.fn.extend({

dropMenu: function(menuItem, subMenuItem){

var root = $(this), // 首先找到菜單（的根節點）

CLS_HAS_MENU = 'has-sub-menu',

isIE = $.browser.msie, // 是否為 IE 瀏覽器

version = $.browser.version; // 瀏覽器的版本

// 沒有找到菜單則退出

// root.find(':first') 都是得到 document.getElementById('top-navigation')

if (!root[0]) {

return false;

}

// 默認的菜單標籤為 li 標籤（選擇器）

if (!menuItem) {

menuItem = 'li';

}

// 默認的子菜單標籤為 ul 標籤（選擇器）

if (!subMenuItem) {

subMenuItem = 'ul';

}

// $(root).find(menuItem) 找到導航菜單下所有的 li 節點

// 通過 each() 遍歷添加相應的處理事件 mouseover,mouseout 和 tab 操作的支持

$(root).find(menuItem).each(function(i, li){

var curMenu = $(li),

// 找到 li 下的第一個 a 標籤，添加 tab 鍵的支持時需要用到的

curLink = curMenu.is('a') ? curMenu : $(curMenu.find('a:first')),

// 找到當前 li 標籤下的子菜單

subMenus = $(subMenuItem, curMenu),

// 判斷是否有子菜單節點

hasMenu = subMenus.length >= 1,

// 當前 li 標籤下的子菜單

curSubMenu = null,

// 當前子菜單的最後一項（a 標籤）

curSubMenuLastItem = null,

// 顯示子菜單

show = function(){

// show sub menu 發現 IE6 中使用 show() 方無法顯示二級以下的子菜單

// 所以很無賴的 hack 了一下

if (!isIE || (isIE && version > 6)) {

curSubMenu.show(200);

}

else {

curSubMenu.css('display', 'block');

}

// 隱藏子菜單

hide = function(){

// hide sub menu

if (!isIE || (isIE && version > 6)) {

curSubMenu.hide(150);

}

else {

curSubMenu.css('display', 'none');

}

};

// 只在有子菜單的時候才做相應的處理

if (hasMenu) {

// 無賴 WordPress 的輸出沒有 .has-sub-menu

// 只要自己手動加上了

curMenu.addClass(CLS_HAS_MENU);

// 找到當前 li 對應的子菜單，而不是把更次級的子菜單都找到

// 不習慣用 subMenus.get(0)

curSubMenu = $(subMenus[0]);

// 當前子菜單的最後一項（a 標籤）

curSubMenuLastItem = curSubMenu.find('a:last');

// mouse event

curMenu.hover(show, hide);

// key(tab key) event

// 獲得焦點是在當前 li 下的第一個A標籤上處理

curLink.focus(show);

// 失去焦點則需要是tab讓子菜單的最後一個菜單項都走過了，才關閉子菜單

curSubMenuLastItem.blur(hide);

}

});

}

});

$('#top-navigation').dropMenu();

})(jQuery);

</script>

(function(){

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-4473199-1']);

_gaq.push(['_trackPageview']);

(function(){

var ga = document.createElement('script');

ga.type = 'text/javascript';

ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(ga, s);

})();

</script>

</body>

</html>

See the Pen jDropMenu-jQuery 多級下拉菜單插件 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

資料源：

使用Superfish套件的台灣無障礙網站：
無障礙使用網站-台南市新市區公所英文網站

其他：
[問題] 無障礙A+的tab鍵操控問題

標籤雲

文章段落

無障礙A＋的tab鍵操控

方法一 (Superfish.js)

方法二

方法三

方法四

標籤雲

#ezw_tco-2 .ez-toc-title{ font-size: 120%; ; ; } #ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active{ background-color: #ededed; } 文章段落

方法一 (Superfish.js)

方法二

方法三

方法四

文章段落