jquery-Superfish.js插件 – 原意筆記本

Superfish樣式在IE 6支持懸停(hover屬性），增加的默認類為 .sf-menu，你也可以改變類名。
標移動的延時功能。為了更方便解決鼠標存在問題的朋友，默認延時為800毫秒
子菜單以動畫顯示。顯示是是淡入淡出效果。淡入淡出的效果（如速度）也是可以自己設定的。默認為正常（normal）
菜單和子菜單可設定為顯示或不顯示
支持code插件，Superfish自動查看是否含有hoverIntent插件，在有hoverIntent插件的情況下執行hoverIntent而忽視淡入淡出效果。如果基於某種原因在你使用superfish時不想使用hoverIntent，將disableHI設置為 true
顯示是否含有子菜單，可動過菜單添加一張小圖片，你也可用通過改變 autoArrows值來設定是否自動彈出子菜單
陰影效果，僅支持最新瀏覽器。在IE6下沒效果
可突出顯示當前所在頁

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>superfish_menu_test</title>
<!-- link to the CSS files for this menu type -->
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.9/css/superfish.css">

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<!-- link to the JavaScript files (hoverIntent is optional) -->
<!-- if you use hoverIntent, use the updated r7 version (see FAQ) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.9/js/superfish.min.js"></script>

<!-- initialise Superfish -->
</head>

<body>
<ul id="sample-menu-1" class="test-sf sf-menu sf-js-enabled sf-arrows">
	<li class="current"> 
		<a href="#a" class="sf-with-ul"> 菜單項 </a>
		<ul>
			<li> <a href="#aa">菜單項</a> </li>
			<li class="current"> <a href="#ab" class="sf-with-ul"> 菜單項 </a>
				<ul>
					<li class="current"><a href="#"> 菜單項 </a></li>
					<li><a href="#aba"> 菜單項 </a></li>
					<li><a href="#abb"> 菜單項 </a></li>
					<li><a href="#abc"> 菜單項 </a></li>
					<li><a href="#abd"> 菜單項 </a></li>
				</ul>
			</li>
			<li> 
				<a href="#" class="sf-with-ul"> 菜單項 </a>
				<ul>
					<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="#" class="sf-with-ul"> 菜單項 </a>
				<ul>
					<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>
		</ul>
	</li>
	<li> <a href="#"> 菜單項 </a> </li>
	<li class=""> <a href="#" class="sf-with-ul"> 菜單項 </a>
		<ul>
			<li class=""> <a href="#" class="sf-with-ul"> 菜單項 </a>
				<ul>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
				</ul>
			</li>
			<li class=""> <a href="#" class="sf-with-ul"> 菜單項 </a>
				<ul>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
				</ul>
			</li>
			<li class=""> <a href="#" class="sf-with-ul"> 菜單項 </a>
				<ul>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
				</ul>
			</li>
			<li class=""> <a href="#" class="sf-with-ul"> 菜單項 </a>
				<ul>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
				</ul>
			</li>
			<li class=""> <a href="#" class="sf-with-ul"> 菜單項 </a>
				<ul>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
					<li class=""><a href="#"> 菜單項 </a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li class=""> <a href="#"> 菜單項 </a> </li>
</ul>
</body>
</html>

100

101

102

103

104

105

106

107

<!doctype html>

<html>

<head>

<title>superfish_menu_test</title>

</head>

<body>

<ul>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

jQuery('ul.sf-menu').superfish({
    hoverClass:   'sfHover',          
    // 當鼠標移動到菜單上的樣式
    pathClass:     'overideThisToUse', 
    // the class you have applied to list items that lead to the current page
    // 已應用類列出導致當前頁面項目
    pathLevels:    1,                  
    // the number of levels of submenus that remain open or are restored using pathClass 
    // 使用路徑類保持打開或恢復的子菜單的級別數
    delay:         800,                
    // 當鼠標移出子菜單後能繼續顯示的毫秒數
    animation:     {opacity:'show'},   
    //  一個等同於 jQuery,s .animate() 方法的第一個參數的對象。 用於動畫子菜單打開    
    speed:         'normal',           
    // 動畫速度. 相當於 jQuery的$ .animate() 方法的第二個參數
    autoArrows:    true,               
    // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance 
    // 禁用生成箭頭標記
    dropShadows:   true,               
    // 菜單是否有陰影效果，默認 ture 有陰影
    disableHI:     false,              
    // set to true to disable hoverIntent detection
    // 設置為true可禁用hoverIntent檢測
    onInit:        function(){},       
    // Superfish 初始化完成後的回調函數 'this'  代表包含的ul標籤
    onBeforeShow:  function(){},       
    // 開始展開動畫之前的回調函數 'this' 代表將要開始被展開的 ul 標籤
    onShow:        function(){},       
    // 一旦展開動畫完成時的回調函數  'this' 代表被展開的 ul 標籤
    onHide:        function(){}        
    // 當子菜單關閉時的回調函數  'this' 代表剛剛被關閉的ul標籤
});

jQuery('ul.sf-menu').superfish({

hoverClass: 'sfHover',

// 當鼠標移動到菜單上的樣式

pathClass: 'overideThisToUse',

// the class you have applied to list items that lead to the current page

// 已應用類列出導致當前頁面項目

pathLevels: 1,

// the number of levels of submenus that remain open or are restored using pathClass

// 使用路徑類保持打開或恢復的子菜單的級別數

delay: 800,

// 當鼠標移出子菜單後能繼續顯示的毫秒數

animation: {opacity:'show'},

// 一個等同於 jQuery,s .animate() 方法的第一個參數的對象。用於動畫子菜單打開

speed: 'normal',

// 動畫速度. 相當於 jQuery的$ .animate() 方法的第二個參數

autoArrows: true,

// if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance

// 禁用生成箭頭標記

dropShadows: true,

// 菜單是否有陰影效果，默認 ture 有陰影

disableHI: false,

// set to true to disable hoverIntent detection

// 設置為true可禁用hoverIntent檢測

onInit: function(){},

// Superfish 初始化完成後的回調函數 'this' 代表包含的ul標籤

onBeforeShow: function(){},

// 開始展開動畫之前的回調函數 'this' 代表將要開始被展開的 ul 標籤

onShow: function(){},

// 一旦展開動畫完成時的回調函數 'this' 代表被展開的 ul 標籤

onHide: function(){}

// 當子菜單關閉時的回調函數 'this' 代表剛剛被關閉的ul標籤

});

	// 預設函式用於修改整個 plugin
	$.fn.superfish.defaults = {
		hoverClass:    'test-sfHover', 
		disableHI: true, 		
	};
        
	// 指定元素與區塊寫法
	jQuery(document).ready(function(){
		jQuery('ul.sf-menu').superfish();
	});

// 預設函式用於修改整個 plugin

$.fn.superfish.defaults = {

hoverClass: 'test-sfHover',

disableHI: true,

};

// 指定元素與區塊寫法

jQuery(document).ready(function(){

jQuery('ul.sf-menu').superfish();

});

See the Pen superfish_menu_test by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

資料源：

標籤雲