CODEWITHSUNDEEP
htmlcsssearch
WordCent
WordCent

Reputation: 727

.search:focus I want the expanding search Box to overlap menu part not Push them w/o Jquery or Javascript

I have a simple search box, which is also a bit animated →

<input class="search" type="search" placeholder="Search">

I have made the expanding search box through a Focus effect →

.search:focus {
    width: 225px;
    outline: none;
}

I also a tried a property →

`Position: absolute`,

but still it didn't gave the effect what I wanted.

What I wanted? when I click on search box it should expand like it is expanding now, but it should overlap the menu. Currently it is pushing away the menu item.

The best way to visualize what i want is to check the search box of stackoverflow.com I want the same expanding effect → Expanding + Overlapping over the menu not pushing.

The working Live code for browser troubleshooting can be found here.

Upvotes: 0

Views: 1987

Answers (2)

Rahul
Rahul

Reputation: 842

I think wrapping the search element inside a list-item would be slightly better practice in the direction to achieve the effect.

Even though you got the quick solution to your question, still I have a small workaround for you here that I wrote in the meanwhile. It's not a big deal, just bit more better in terms of structure, with more solid markup.

What I did below:

  • Wrapped the search input box inside an li to maintain the flow of the list
  • Called it search-wrap, gave it a width (equal to our search-box), made it relatively-positioned so that it may carry our absolutely-positioned search box
  • Absolutely-positioned the search box
  • Added some styles for our search-box on :focus

Have a see.

.header-menu ul li {
  display: inline-block;
  vertical-align: middle;
}

.search-wrap {
  width: 175px;
  position: relative;
  height: 27px;
  vertical-align: middle;
  display: inline-block;
}

.search {
  border: 1px solid #ccc;
  padding: 5px 7px;
  margin-left: 15px;
  width: 175px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  position: absolute;
  right: 0;
  top: 0;
}

.search:focus {
  width: 225px;
}
<nav class="header-menu">
  <ul>
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>

    <li class="search-wrap">
      <input class="search" type="search" placeholder="Search"></li>
  </ul>
</nav>

One more thing you might want to consider to improve with this particular section is that (always) consider using form input elements inside a form.

That's it. Hope it added to some value. Cheers!

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

Try this css,

.header-menu > ul {
    position: relative;
    padding-right: 190px;
}
.search {
    border: 1px solid #CCCCCC;
    padding: 5px 7px;
    /*margin-left: 15px;*/
    width: 175px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    /*float: right;*/
    position: absolute;
    right: 0;
}

Example of positioning element

html,body,.relative_div{
  padding:0;
  margin:0;
  height:100%;
}

.relative_div {
  position: relative;
  height: 100%;
}

.relative_div>div {
  position: absolute;
  background: #888;
  color:#fff;
  padding:10px;
}

.left-top {
  left: 0;
  top: 0;
}

.left-bottom {
  left: 0;
  bottom: 0;
}

.right-top {
  right: 0;
  top: 0;
}

.right-bottom {
  right: 0;
  bottom: 0;
}
<div class=relative_div>
  <div class=left-top>left-top</div>
  <div class=left-bottom>left-bottom</div>
  <div class=right-top>right-top</div>
  <div class=right-bottom>right-bottom</div>
</div>

Upvotes: 0

Related Questions