Question

哟。我向你们提出一些问题。

这是我的测试代码：

*{
   border:1px solid #333;
  width:100%;
  max-width: 1240px;
  margin: 0  auto;

}

.menu{
  width:60%;
   border:1px solid #444;
   float:left;
   text-align:center
}
.menu ul{
    display:flex;
  justify-content: center;
  flex-flow: row; 
float:left;
}
.topnav{
  width:50px;
  float:left;
}
.topnav:hover,.topnav:focus{
  transition: 0.6s linear;
  width: 100px;
  float:left;
}


.something{
  border:1px solid #000;
  width: 50px;
  float:right;
}
.topnav-something{
     display: block;
    width: auto;
    float:right;
    margin-right:20%;
    
}

<div class="content">


<div class= "menu">
<ul>
<li>ONE</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>

<div>

<div class="topnav-something">

<div class="topnav">
<input type="text" placeholder="Search..">
</div>
<div class="something">
SOME TEXT
</div>

</div>
</div>

如何在此页面上收到移动菜单效果？（搜索悬停） http://kindsgut.de/

为什么当我点击这个输入时他会减少？

有人知道如何修复它吗？我不知道我做错了什么。

度过美好的一天！

Answer 1

您需要将输入设置为0的宽度，然后根据您要触发的内容（文本或容器）定义悬停时的宽度。您还可以将过渡应用于容器，并应用于幻灯片效果的输入。

<div class="content">
    <div class="menu">
        <ul>
            <li>ONE</li>
            <li>Second</li>
            <li>Third</li>
       </ul>
    </div>
<div>

<div class="topnav-something">
    <div class="topnav">
        <input class="search-field" type="text" placeholder="Search..">
    </div>
    <div class="something">
        SOME TEXT
    </div>
</div>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.menu {
    width: 60%;
    float: left;
    text-align: right;
    outline: 1px solid red; 
}

.menu ul {
    display: flex;
    justify-content: right;
    flex-flow: row nowrap;
    /* float: left; */
}

.menu li {
    display: inline; 
    padding: 10px; 
}

.topnav-something {
    /* display: block; */
    padding: 10px; 
    width: 40%;
    float: right;
    /* margin-right: 20%; */
    transition: width 0.5s;
    outline: 1px solid blue; 
}

.search-field {
    width: 0; 
    transition: all 0.5s;
}

.topnav-something:hover input, 
.topnav-something:focus input {
    width: 140px; 
}

.topnav {
    display: inline-block;
}

/* .topnav {
    width: 50px;
    float: left;
} */
/* .topnav:hover,
.topnav:focus {
    transition: 0.6s linear;
    width: 100px;
    float: left;
} */

.something {
    display: inline-block;
    /* border: 1px solid #000; */
    /* width: 50px; */
    /* float: right; */
}

我在这里为您创建了一个演示：https://codepen.io/blueocto/pen/zWoNZj

Answer 2

首先，您只在悬停事件上设置转换，这就是当您将鼠标移动动画时没有转换的原因。因此，您需要在默认状态下设置转换，而不是在元素的悬停状态。

其次，您应该在包含some text和input的外部div上添加悬停事件。所以在.topnav-something

的情况下

另外，将width:0添加到输入（.topnav）作为初始值。因此，它可以从0过渡到100px。

所以最后你的代码看起来像这样

（我从margin-right:20%移除了topnav-something，因此它适合代码段的小屏幕）

* {
  border: 1px solid #333;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.menu {
  width: 60%;
  border: 1px solid #444;
  float: left;
  text-align: center
}

.menu ul {
  display: flex;
  justify-content: center;
  flex-flow: row;
  float: left;
}



.something {
  border: 1px solid #000;
  width: 50px;
  float: right;
}

.topnav-something {
  display: block;
  width: auto;
  float: right;
  margin-right: 0%;
}
.topnav {
  width: 0px; /*added*/
  float: left;
  transition: 0.6s linear; /*added*/
}
/*added*/
.topnav-something:hover .topnav {
  width: 100px;
}

<div class="content">


  <div class="menu">
    <ul>
      <li>ONE</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
  </div>

  <div>

    <div class="topnav-something">

      <div class="topnav">
        <input type="text" placeholder="Search..">
      </div>
      <div class="something">
        SOME TEXT
      </div>

    </div>
  </div>

CSS中的菜单移动效果

2 个答案: