現在、完全なサイト ナビゲーション プラグインを使用しています。私は彼らのデモ index.html を使用しており、それに応じて css を編集します。Smooth Expandable Menu である別の jquery プラグインを統合したいと考えています。両方のプラグインをまとめて調整したい。私もドリームウィーバーを使っています
フル サイト ナビゲーション 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();
});
});
これはどこに置くべきですか？
ありがとう