Question

嘿我在单击菜单图标时尝试制作滑出菜单按html内容。网站页面是.. sitepage div菜单是..

＆＃13;

<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>

＆＃13;

由以下js代码激活..

＆＃13;

$(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);	
    	}
    });
});

＆＃13;

我读到我可以用css做到这一点但是我已经尝试过它不能正常工作......

＆＃13;

.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;
	}

＆＃13;

我在做错了什么？感谢。

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);    
        }
    });
});

Answer 2

我认为＆＃34;左：-250＆＃34;你需要添加＆＃34; px＆＃34;

.slideout-menu {
    position:fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background: #333;
    z-index: 100;
}

检查一下 http://jsfiddle.net/pbqb964k/2/

用幻灯片菜单推送html内容

2 个答案: