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

您必须绝对定位或搜索字段或菜单（或两者）：

 input[type=search] {
     /*your stuff*/
     position : absolute;
 }

请参阅：http://jsfiddle.net/5aru60qz/4/

Answer 2

当你使用float：right; ，您需要将搜索和菜单放在每个容器中：

菜单：

<div style="height: 70px;">
    <div class="row menu_top">

..和搜索：

<div style="height: 50px;">
    <form>

我给他们增加了一些高度，所以他们不会互相干扰。

在这里小提琴：JSFIDDLE

Answer 3

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

为菜单指定背景颜色，并确保在折叠时覆盖搜索框。

给你一个想法：

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

在这里完成演示：

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

滑动菜单问题

3 个答案: