javascript - 使用滑出菜单推送 html 内容

Question

嘿，我正在尝试使滑出菜单在单击菜单图标时推送 html 内容。网站页面是.. sitepagediv 菜单是..

<div class="slideout-menu">
	<h3>Last Week<a href="#" class="slideout-menu-toggle">&times;</a></h3>
	<ul>
		<li><center><img border="0px"draggable="false" align="middle" src="img/fbump.png" alt="dundaah_logo" width="220" height="220"></center></li>
		<li><a href="http://dundaah.com/docs/mon.html">Dundaah</a></li>
		<li><a href="http://pics.dundaah.com/docs/mon.html">Pics</a></li>
		<li><a href="http://vidz.dundaah.com/docs/mon.html">Videos</a></li>
		<li><a href="http://music.dundaah.com/docs/mon.html">Music</a></li>
	</ul>
</div>

它由以下 js 代码激活..

$(document).ready(function () {
    $('.slideout-menu-toggle').on('click', function(event){
    	event.preventDefault();
    	// create menu variables
    	var slideoutMenu = $('.slideout-menu');
    	var slideoutMenuWidth = $('.slideout-menu').width();
    	
    	// toggle open class
    	slideoutMenu.toggleClass("open");
    	
    	// slide menu
    	if (slideoutMenu.hasClass("open")) {
	    	slideoutMenu.animate({
		    	left: "0px"
	    	});	
    	} else {
	    	slideoutMenu.animate({
		    	left: -slideoutMenuWidth
	    	}, 250);	
    	}
    });
});

我读到我可以用 css 做到这一点，但我已经尝试过但它不起作用......

.slideout-menu {
		position: fixed;
		top: 0;
		left: -250px;
		width: 250px;
		height: 100%;
		background: #333;
		z-index: 100;
		
	}
	.slideout-menu h3 {
		position: relative;
		padding: 20px 10px;
		color: #fff;
		font-size: 1.2em;
		font-weight: 400;
		border-bottom: 4px solid #222;
	}
	.slideout-menu .slideout-menu-toggle {
		position: absolute;
		top: 12px;
		right: 10px;
		display: inline-block;
		padding: 6px 9px 5px;
		font-family: Arial, sans-serif;
		font-weight: bold;
		line-height: 1;
		background: #222;
		color: #999;
		text-decoration: none;
		vertical-align: top;
	}
	.slideout-menu .slideout-menu-toggle:hover {
		color: #fff;
	}
	.slideout-menu ul {
		list-style: none;
		font-weight: 300;
		border-top: 1px solid #151515;
		border-bottom: 1px solid #454545;
	}
	.slideout-menu ul li {
		border-top: 1px solid #454545;
		border-bottom: 1px solid #151515;
	}
	.slideout-menu ul li a {
		position: relative;
		display: block;
		padding: 10px;
		color: #999;
		text-decoration: none;
	}
	.slideout-menu ul li a:hover {
		background: #000;
		color: #fff;
	}
	.slideout-menu ul li a i {
		position: absolute;
		top: 15px;
		right: 10px;
		opacity: .5;
	}

我做错了什么？谢谢。

Answer 1

尝试这样的事情:

$(document).ready(function () {
    $('.slideout-menu-toggle').on('click', function(event){
        event.preventDefault();
        // create menu variables
        var slideoutMenu = $('.slideout-menu');
        var slideoutMenuWidth = $('.slideout-menu').width();

        // toggle open class
        slideoutMenu.toggleClass("open");

        // slide menu
        if (slideoutMenu.hasClass("open")) {
            slideoutMenu.animate({
                left: "0px"
            }); 
        } else {
            slideoutMenu.animate({
                left: -slideoutMenuWidth
            }, 250);    
        }

        if (slideoutMenu.hasClass("open")) {
            $('body').animate({
                'margin-left': slideoutMenuWidth
            }); 
        } else {
            $('body').animate({
                'margin-left': "0px"
            }, 250);    
        }
    });
});