javascript - 我正在尝试让我的导航菜单向左滑动并用它插入正文

Question

我是 jQuery 的新手，我正在尝试编写一个脚本，将我的导航菜单从屏幕的右侧向左推出，并用它插入主体的其余部分。

我一直在关注本教程:http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

我不太确定我在做什么，或者我应该在 javascript 中使用哪些 CSS 类，因为所有不同的菜单选项/示例都将代码混合在一起，如果你'在编码方面不是特别有经验。

我确切地知道我想要代码做什么，但是我无法将它应用到我自己的 Wordpress 主题中 – 谁能给我指出我做错了什么？

到目前为止，我有以下 CSS:

@media only screen
and (min-width : 0px)
and (max-width : 1080px) {

    body {
        overflow-x: hidden;
        left: 0;
    }

    body-push {left: -240px;}

    img.standard.logo {
        height: 38px;
        width: 342px;
    }

    /* RESPONSIVE NAVIGATION MENU */

    img.menu.button {
        position:relative;
        display:block;
        width:25px;
        height:25px;
        background-size: 100%;
    }

    nav.header-nav {
        right:-240px;
        z-index:10;
        position:fixed;
        top:0;
        width:250px;
        height:100%;
        float:right;
        margin:0;
        padding:0;

        background-color:#1D1D1F;
        list-style:none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
    }

    nav.header-nav nav.header-nav-open {
        right:0px;
    }
}

我采用/改编了以下 javascript:

img.menu.button.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'body-push' );
    classie.toggle( menuRight, 'nav.header-nav-open' );
    disableOther( 'showRightPush' );
};

我的网站标题:

<header class="header">
    <!-- LOGOS -->
    <a href="#">
        <img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
        <img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
    <!-- LOGOS -->
    <img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
    <!-- HEADER NAVIGATION MENU -->
    <nav class="header-nav">
        <div class="menu-header-menu-container">
            <ul id="menu-header-menu" class="menu">
                <li id="menu-item-463">
                    <a href="#">WORK</a>
                    <ul class="sub-menu">
                        <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                        <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                        <li id="menu-item-478"><a href="#">MACRO</a></li>
                        <li id="menu-item-477"><a href="#">CITIES</a></li>
                        <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                        <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
                    </ul>
                </li>
                <li id="menu-item-10"><a href="#">ABOUT</a></li>
                <li id="menu-item-464"><a href="#">SHOP</a></li>
                <li id="menu-item-923">
                    <a href="#">SOCIAL</a>
                    <ul class="sub-menu">
                        <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                        <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                        <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
                    </ul>
                </li>
                <li id="menu-item-14"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </nav>
</header>

Answer 1

您的 JavaScript 有错误代码。 img将是 undefined而且JavaScript函数的写法也不对。

1. 添加id属性到你的菜单img

   <img id="menuLeft" class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">

2. 为菜单创建一个 JavaScript 对象

   var menuLeft = document.getElementById( 'menuLeft' );

3. 访问对象 menuLeft触发滑动效果

   menuLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'body-push' );
classie.toggle( menuRight, 'nav.header-nav-open' );
disableOther( 'showRightPush' );
};

更新

由于它是第三方插件，您需要为滑动菜单包含 css ( http://tympanus.net/Blueprints/SlidePushMenus/css/default.css ) 和 js ( http://tympanus.net/Blueprints/SlidePushMenus/js/classie.js ) 文件。