HTML - 创建占据主页面一部分的左侧菜单

时间:2014-07-24 22:19:35

标签: jquery html css asp.net

我正在使用带有HTML,C#,CSS,Jquery,JQuery Mobile的ASP.NET MVC 4创建一个网站......

这是我的主页:

enter image description here

这是我未来的菜单:

enter image description here

我希望当我点击主页上的左上方按钮时,菜单会滑到页面右侧,因此,我们只会看到主页的一部分。例如,页面的70%用于菜单,其余用于页面。在下面,这是我想要的结果示例:

enter image description here

菜单是div标签还是视图?如何将菜单滑到右边?

谢谢

1 个答案:

答案 0 :(得分:0)

这可能会有所帮助=>的 DEMO

$('#menu, #content').height($(window).height());
var opened=false;
$('#visit').click(function(){
    if(!opened){
        $('#menu').animate({marginLeft:'0px'},500);
        $('#content').animate({marginLeft:$('#menu').width()+'px'},500);
        opened=true;
    }
    else{
        $('#content').animate({marginLeft:'0px'},500);
        $('#menu').animate({marginLeft:'-'+$('#menu').width()+'px'},500);
        opened=false;
    }
});