Menu move effect in CSS - css

Question

Yo.
I have some question to you guys.
Here is my test code:
*{
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>
How can I receive move-menu effect like on this page?(search hover)
http://kindsgut.de/
And why when I clicked on this input he decreases?
Somebody know how to fix it?
I dont know what I doing wrong.
Have a nice day!

Answer 1

First, you set the transition only on the hovered event, that's why when you mouseout the animation has no transition. So you need to set the transition on the default state not on the hover state of the element.
Second, you should add the hover event on the outer div that contains both the some text and the input . So in your case on the .topnav-something
Also, add width:0 to your input (.topnav) as a initial value. So it can transition from 0 to 100px.
So in the end your code will look like this
( i removed the margin-right:20% from topnav-something so it will fit the small screen of the snippet )
* {
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>

Answer 2

You'd need to set your input to a width of 0 , then depending what you want to trigger it (text, or the container) you define the width on hover.
You can also apply a transition to the container, and to the input for the slide effect.
<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; */
}
I've created a demo for you here: https://codepen.io/blueocto/pen/zWoNZj
#Mihal If my answer did help solve your issue, I'd really appreciate the upvote, thank you.