Question

我需要帮助制作一个向右滑动的垂直导航栏，以显示更多内容。我的目标是类似于蓝色条：http://www.teehanlax.com/labs/。单击侧面导航栏时导航栏向外滑动（向右），单击x按钮时向后滑动（向左）。

我的代码是：

<!--Am I implementing the jQuery right?-->
<!DOCTYPE HTML> <html> <head> <title>Nishad</title> 
<link rel="stylesheet" href="style.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script> 

$(function() { $('#nav').click(function() 
{ var leftMargin = ($(this).css('margin-left') === '0px') ? '-150px' : '0px'; $(this).animate({ 'margin-left' : leftMargin }, 500); 
}); 
});  
</head> <body> <div id="wrapper">
<div id="nav"></div> 
<div id="content"></div> 
</div> </body> </html>

Answer 1

如果您检查元素，则可以看到该网站正在使用导航margin-left的负值。当您点击+时，他们会将margin-left设置为0px。

您可以通过附加点击事件处理程序来获得点击效果。滑动效果可以使用jQuery的animate()完成。以下是我刚才提到的一个例子。

<强> HTML

<div id="wrapper">
    <div id="nav"></div><div id="content"></div>
</div>

<强> CSS

#wrapper {
    white-space: nowrap;
}
#nav, #content {
    height: 500px;
    display: inline-block;
}
#nav {
    width: 200px;
    margin-left: -150px;
    cursor: pointer;
    background: lightgreen;
}
#content {
    width: 500px;
    background: lightblue;
}

<强>的jQuery

$(function() {
    $('#nav').click(function() {
        var leftMargin = ($(this).css('margin-left') === '0px') ? '-150px' : '0px';
        $(this).animate({ 'margin-left' : leftMargin }, 500);
    });
});

<强> jsFiddle Demo

滑动侧导航栏

1 个答案: