我目前正在使用完整的站点导航插件。我正在使用他们的演示 index.html 并将相应地编辑 css。我想集成另一个 jquery 插件，它是 Smooth Expandable Menu。我想协调地调整两个插件。我也在使用 Dreamweaver
全站导航 index.html
<!DOCTYPE html>
<!---- FSN PLUGIN ---->
<script data-main="../../fsn/plugin" src="../../fsn/require-jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/resetter.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<!------------------------ FSN WRAP --------------------->
<div id="fsn" style="visibility: hidden">
<!--------------------- FSN BAR ---------------------->
<header>
<div class="bar-body">
<div class="menu">
<nav data-menu="section:all;level:1"></nav>
<div class="clear"></div>
</div>
</div>
</header>
<!-------------------- SECTION 1 --------------------->
<section data-title="Section one">
<!---- PAGE 1 ---->
<article data-title="Page one" data-link="p11" data-background="#1b75a3">
<div class="content-left">
<h1>Title 1</h1>
<div class="image">
<img src="media/logo.png" width="252" height="208" alt="Fullscreen site navigation" />
</div>
</div>
<div class="content-right">
<p>Section 1 - Page 1</p>
</div>
</article>
<!---- PAGE 2 ---->
<article data-title="Page two" data-link="p12" data-background="#b81a12">
<div class="content-left">
<h1>Title 2</h1>
<div class="image">
<img src="media/logo.png" width="252" height="208" alt="Fullscreen site navigation" />
</div>
</div>
<div class="content-right">
<p>Section 1 - Page 2</p>
</div>
</article>
<!---- PAGE 3 ---->
<article data-title="Page three" data-link="p13" data-background="#197883">
<div class="content-left">
<h1>Title 3</h1>
<div class="image">
<img src="media/logo.png" width="252" height="208" alt="Fullscreen site navigation" />
</div>
</div>
<div class="content-right">
<p>Section 1 - Page 3</p>
</div>
</article>
</section>
<!-------------------- SECTION 2 --------------------->
<section data-title="Section two">
<!---- PAGE 1 ---->
<article data-title="Page one" data-link="p21" data-background="#db6816">
<div class="content-left">
<h1>Title 3</h1>
<div class="image">
<img src="media/logo.png" width="252" height="208" alt="Fullscreen site navigation" />
</div>
</div>
<div class="content-right">
<p>Section 2 - Page 1</p>
</div>
</article>
<!---- PAGE 2 ---->
<article data-title="Page two" data-link="p22" data-background="#7f33cc">
<div class="content-left">
<h1>Title 3</h1>
<div class="image">
<img src="media/logo.png" width="252" height="208" alt="Fullscreen site navigation" />
</div>
</div>
<div class="content-right">
<p>Section 2 - Page 2</p>
</div>
</article>
</section>
<!-------------------- FSN FOOTER -------------------->
<footer>
<div class="footer-body">
<p>Content footer</p>
</div>
</footer>
</div>
平滑可扩展菜单 index.html
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>jQuery Smooth Expandable Menu by pezflash</title>
<meta name="description" content="jQuery Plugin for building expandable menus"/>
<meta name="keywords" content="jQuery, Smooth Expandable Menu, menu, jQuery menu"/>
<meta name="robots" content="index, follow"/>
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-expand-menu.js"></script>
<!-- CUSTOM SCRIPT CALL -->
<script type="text/javascript">
// Using "jQuery" to protect against conflicts with other libraries like MooTools
jQuery(document).ready(function() {
jQuery.smoothMenu({
globalWidth: 200, /* WIDTH VALUE (IN PIXELS) */
lineHeight: 17, /* ITEM VERTICAL SPACE VALUE (IN PIXELS) */
animationSpeed: 500, /* SLIDE ANIMATION SPEED (IN MILLISECONDS) */
dividerSize: 1, /* LINE DIVIDER VALUE (IN PIXELS) */
dividerStyle: 'dashed', /* LINE DIVIDER STYLE ('solid', 'dashed', 'dotted', 'none', ...) */
dividerColor: '#999', /* LINE DIVIDER COLOR (HEXADECIMAL) */
dividerOnLastItem: 'true', /* IF LAST ITEM HAS BOTTOM BORDER */
menuFontSize: 12, /* MENU FONT SIZE (IN PIXELS) */
menuFontWeight: 700, /* MENU FONT WEIGHT (NORMALLY 300, 400, 700...) */
menuColor: '#777', /* MENU COLOR (HEXADECIMAL) */
menuHoverColor: '#000', /* MENU HOVER COLOR (HEXADECIMAL) */
submenuFontSize: 11, /* SUBMENU FONT SIZE (IN PIXELS) */
submenuFontWeight: 400, /* SUBMENU FONT WEIGHT (NORMALLY 300, 400, 700...) */
submenuColor: '#999', /* SUBMENU COLOR (HEXADECIMAL) */
submenuHoverColor: '#000', /* SUBMENU HOVER COLOR (HEXADECIMAL) */
submenuIndent: 8, /* SUBMENU FONT SIZE (IN PIXELS) */
activeItemColor: '#000' /* ACTIVE ITEMS COLOR (HEXADECIMAL) */
});
/* TIP: THE ABOVE EXAMPLE SETTINGS OVERWRITE ALL THE DEFAULT ONES INSIDE THE PLUGIN.
IF YOU ARE OK WITH MOST OF THE DEFAULT SETTINGS YOU CAN EVEN START THE MENU WITH SIMPLE CALLS:
jQuery.smoothMenu(); --> SIMPLE PLAIN PLUGIN CALL
jQuery.smoothMenu({ globalWidth: 150 }); --> SAMPLE CHANGING JUST THE WIDTH
jQuery.smoothMenu({ globalWidth: 150, dividerSize: 0 }); --> SAMPLE CHANGING WIDTH AND NO DIVIDERS
*/
});
</script>
</head>
<!-- BODY -->
<body>
<!-- SMOOTH MENU DIV -->
<div id="smooth-menu">
<ul>
<li>
<a href="#">ENVATO</a>
<ul class="second-level">
<li>
<a href="#">CORPORATE BROCHURE</a>
</li>
<li>
<a href="#">WEB DESIGN</a>
</li>
</ul>
</li>
<li>
<a href="#">TUTS+ MARKETPLACE</a>
</li>
<li>
<a href="#" class="active-item">FREELANCESWITCH</a>
<ul class="second-level">
<li>
<a href="#">ART DIRECTION</a>
</li>
<li>
<a href="#">CORPORATE STUFF 2011</a>
</li>
<li>
<a href="#" class="active-item">CORPORATE STUFF 2012</a>
</li>
<li>
<a href="#">TYPOGRAPHY</a>
</li>
<li>
<a href="#">BRAND DIRECTION & CONSULTING</a>
</li>
</ul>
</li>
<li>
<a href="#">ROCKABLE PRESS</a>
</li>
<li>
<a href="#">CREATTICA</a>
<ul class="second-level">
<li>
<a href="#">PROJECT WEBSITE</a>
</li>
</ul>
</li>
<li>
<a href="#">ANDROID.APPSTORM</a>
<ul class="second-level">
<li>
<a href="#">ART DIRECTION</a>
</li>
<li>
<a href="#">CONCEPT & ILLUSTRATION</a>
</li>
</ul>
</li>
<li>
<a href="#">CODECANYON</a>
<ul class="second-level">
<li>
<a href="#">MARKETPLACE RESTYLING</a>
</li>
</ul>
</li>
<li>
<a href="#">THEMEFOREST</a>
<ul class="second-level">
<li>
<a href="#">CORPORATE IDENTITY</a>
</li>
<li>
<a href="#">TYPOGRAPHY</a>
</li>
<li>
<a href="#">BRAND DIRECTION & CONSULTING</a>
</li>
</ul>
</li>
<li>
<a href="#">FREELANCE JOBS</a>
<ul class="second-level">
<li>
<a href="#">WEBSITE REDESIGN</a>
</li>
<li>
<a href="#">EDITORIAL PRINTS</a>
</li>
</ul>
</li>
<li>
<a href="#">APPTUTS+</a>
<ul class="second-level">
<li>
<a href="#">STATIONERY AND COLLATERAL</a>
</li>
<li>
<a href="#">POSTERS [DRAFTS]</a>
</li>
<li>
<a href="#">EVENT MANAGEMENT</a>
</li>
<li>
<a href="#">BRAND LOGO & CONCEPT</a>
</li>
<li>
<a href="#">WEBSITE</a>
</li>
</ul>
</li>
<li>
<a href="#">TUTS+ PREMIUM</a>
<ul class="second-level">
<li>
<a href="#">POSTERS & BROCHURES</a>
</li>
<li>
<a href="#">GRAPHIC CONSULTING</a>
</li>
</ul>
</li>
<li class="last-item">
<a href="#">PHOTODUNE</a>
<ul class="second-level">
<li>
<a href="#">STATIONERY AND COLLATERAL</a>
</li>
</ul>
</li>
</div> <!-- END SMOOTH MENU DIV -->
</body>
我知道我必须像这样包装插件..
$(function() {
$('#fsn').on('fsn-ready', function(e) {
// This will be execute once FSN will be ready.
$('#smooth-expand-menu').startsmooth-expand-menu();
});
});
这个应该放在哪里？
谢谢