当page.html位于另一个文件夹中时，幻灯片菜单停止工作

Question

So I have this side menu which expands once clicked. It works fine in my index.html page and all the other pages that are in the root folder.

But if I open a page which is inside a folder - for example ../blog/page.html Then the side menu does not work, you can click it but it does not slide out. The page uses the same CSS and JS sheets.

What am I missing?

Code samples bellow.

HTML:

<!-- Menu -->
                <section id="menu">

                    <!-- Search -->
                        <section>
                            <form class="search" method="get" action="#">
                                <input type="text" name="query" placeholder="Search" />
                            </form>
                        </section>

                    <!-- Links -->
                        <section>
                            <ul class="links">
                                <li>
                                    <a href="#">
                                        <h3>Lorem ipsum</h3>
                                        <p>Feugiat tempus veroeros dolor</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>Dolor sit amet</h3>
                                        <p>Sed vitae justo condimentum</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>Feugiat veroeros</h3>
                                        <p>Phasellus sed ultricies mi congue</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>Etiam sed consequat</h3>
                                        <p>Porta lectus amet ultricies</p>
                                    </a>
                                </li>
                            </ul>
                        </section>

                    <!-- Actions -->
                        <section>
                            <ul class="actions vertical">
                                <li><a href="#" class="button big fit">Log In</a></li>
                            </ul>
                        </section>

                </section>

JS:

        // Menu.
        $menu
            .appendTo($body)
            .panel({
                delay: 500,
                hideOnClick: true,
                hideOnSwipe: true,
                resetScroll: true,
                resetForms: true,
                side: 'right',
                target: $body,
                visibleClass: 'is-menu-visible'
            });

    // Search (header).
        var $search = $('#search'),
            $search_input = $search.find('input');

        $body
            .on('click', '[href="#search"]', function(event) {

                event.preventDefault();

                // Not visible?
                    if (!$search.hasClass('visible')) {

                        // Reset form.
                            $search[0].reset();

                        // Show.
                            $search.addClass('visible');

                        // Focus input.
                            $search_input.focus();

                    }

            });

        $search_input
            .on('keydown', function(event) {

                if (event.keyCode == 27)
                    $search_input.blur();

            })
            .on('blur', function() {
                window.setTimeout(function() {
                    $search.removeClass('visible');
                }, 100);
            });

CSS:

                        #header .main ul li > a:before {
                        display: block;
                        height: inherit;
                        left: 0;
                        line-height: inherit;
                        position: absolute;
                        text-align: center;
                        text-indent: 0;
                        top: 0;
                        width: inherit;
                    }

Answer 1

Can you post how the javascript files and css are loaded to the page? Maybe the path depends on the location of the html file.

Answer 2

As Alex notes, you need to set the right path within each html file. For example, within blog/page.html the path to your scripts would be: ***../**assets/js/whatever-your-script-is.js*

Make sure you do this for all script files (query, respond, skull, util, etc).