jquery - 滑动菜单问题

Question

我正在制作类似桌面移动菜单的菜单。但是当我点击切换菜单时，搜索框会滑动。我该如何解决这个问题？我希望当我单击切换时，只有菜单会打开，搜索将在同一个地方。

http://jsfiddle.net/5aru60qz/1/

这是我的代码:

<div class="row menu_top">
    <ul class="mini-submenu">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="list-group">
        <span href="#" class="list-group-item">Firstname
            <span class="pull-right" id="slide-submenu">
                <i class="fa fa-times"></i>
            </span>
        </span>

        <a href="product.html" class="list-group-item">
            <i class="fa fa-briefcase"></i><span>My Product & Service</span>
        </a>
        <a href="myprofile.html" class="list-group-item">
            <i class="fa fa-user"></i><span>My Profile</span>
        </a>
        <a href="myorders.html" class="list-group-item">
            <i class="fa fa-cubes"></i><span>My Work Order</span>
        </a>
        <a href="notification.html" class="list-group-item">
            <i class="fa fa-bell"></i><span>My Notification</span>
        </a>
        <a href="rating.html" class="list-group-item">
            <i class="fa fa-star"></i><span>My Rating</span>
        </a>
    </div>
</div>
<form>
    <input type="search" placeholder="Search">
</form>

请给我任何解决方案的建议。

Answer 1

使用绝对定位并使用 z-index 为搜索框和菜单设置明确的深度。

给菜单一个背景颜色，并确保它在折叠时覆盖搜索框。

给你一个想法:

div.list-group
{
    background-color:#FFF;
    z-index:300;
    position:absolute;
    right:10px;
    top:20px;
    height:43px;
}

在这里完成演示:

http://jsfiddle.net/5aru60qz/6/