Question

我目前正在使用完整的网站导航插件。我正在使用他们的demo 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

我知道我必须像这样包装Plugin ..

$(function() {
    $('#fsn').on('fsn-ready', function(e) {
        // This will be execute once FSN will be ready.
        $('#smooth-expand-menu').startsmooth-expand-menu();
    });
});

这应放在哪里？

由于

将jQuery插件与现有插件集成

0 个答案: