Question

我正在构建一个响应式网页，到目前为止我已经开始运行了一些功能。但是我似乎无法做到一个方面我想使用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>

Answer 1

试用此库：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');
});

您可能需要或可能不需要弄乱菜单的位置 - 这取决于您当前如何定位它。如果您不确定，请尝试使用和不使用定位更改。

希望有所帮助。如果你有任何意义并没有好运，请告诉我！

我的jquery响应式网页有问题

1 个答案: