我的jquery响应式网页有问题
我的jquery响应式网页有问题
提问于 2015-07-11 09:15:05
我正在建立一个响应式的网页，到目前为止，我已经让它的一些功能。然而，有一个方面我似乎做不到，我想使用jquery将页面左侧的垂直菜单向左移动-280px (离开页面)，这样页面的整个内容都会显示出来。这应该只在单击子菜单链接时发生，并在单击页面顶部的链接时返回它。我希望我已经清楚地描述了这一点。我该如何着手编写这样的脚本呢？
HTML
<nav class="pushmenu-left">
<div id="caption"><h1>Mobile</h1></div>
<ul>
<li><a href="#tab-1">Home</a></li>
<li><a href="#tab-2">Support</a></li>
<li class="active"><a href="#tab-3">Web Design</a>
<ul>
<li><a href="#tab-4">HTML</a></li>
<li><a href="#tab-5">CSS</a></li>
<li><a href="#tab-6">JavaScript</a></li>
</ul>
</li>
<li><a href="#tab-7">Content Management</a>
<ul>
<li><a href="#tab-8">Joomla</a></li>
<li><a href="#tab-9">Drupal</a></li>
<li><a href="#tab-10">WordPress</a></li>
<li><a href="#tab-11">Concrete 5</a></li>
</ul>
</li>
<li><a href="#tab-12">Contact</a>
<ul>
<li><a href="#tab-13">General Inquiries</a></li>
<li><a href="#tab-14">Ask A Question</a></li>
</ul>
</li>
<li><a href="#tab-15">About</a></li>
</ul>回答 1
Stack Overflow用户
发布于 2015-07-11 09:26:36
试试这个库：http://www.berriart.com/sidr/
或者，如果您不需要任何动画并希望手动构建它，可以尝试如下所示：
$("#id-of-submenu-link-that-hides-menu").on('click',function() {
var menu = $('#id-of-menu-to-hide');
menu.css('position','absolute');//if you have it positioned some other way
menu.css('margin-left','-280px');
});
$("#id-of-link-to-show-menu").on('click',function() {
var menu = $('#id-of-menu-to-hide');
menu.css('position','inherit');//or whatever it originally was
menu.css('margin-left','0');
});你可能需要也可能不需要弄乱菜单的位置--这取决于你当前的位置。如果你不确定的话，可以试着改变位置和不改变位置。
希望这能有所帮助。如果你有任何不明白的地方，请让我知道，祝你好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31352476
复制相关文章
相似问题
腾讯云开发者
