CODEWITHSUNDEEP
twitter-bootstrap-3menunavbar
user
user

Reputation: 631

search button to open search box in bootstrap navbar

I want to add search box to my navbar but not as the traditional way as appears in the picture , I want to add a search icon button in the navbar only and when user click on it the search box appears under the search icon .

How can i do this any one can help me please ?

enter image description here

<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
  </div>
  <div class="collapse navbar-collapse" >
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Contact US</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Who we are <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">About</a></li>
      <li><a href="#"> Mession</a></li>
      <li><a href="#">  Vision</a></li>
      <li class="divider"></li>      
      <li><a href="#">Goals</a></li>
    </ul>
  </li>
  <li><a href="#">Publications</a></li>
  <li><a href="#">Media</a></li>
  <li><a href="#">Partners</a></li>
</ul>

Upvotes: 0

Views: 6330

Answers (2)

Most24
Most24

Reputation: 16

You can try these snippets.

Solutuion with CSS Only:

.hide
{
  opacity: 0;
  max-height: 0;
}

#trigger {
  position: absolute;
  left: -999em;
}

#container input[type="checkbox"]:checked + div
{
  max-height: 99em;
  opacity: 1;
  height: auto;
  overflow: hidden;
}
<div id="container">
	<label for="trigger">click me for Search</label>  
	<input type="checkbox" id="trigger">
  <div class="hide">
    <form>
        <input type="text" name="search" placeholder="Search..">
    </form>
  </div>
<div>

Solution with JS: 

function myFunction() {
	if (document.getElementById("form").style.display === "none") {
       document.getElementById("form").style.display = "block";
    } else {
        document.getElementById("form").style.display = "none";
    }
}
button {
width: 50px;
height: 50px;
}
<p>show and hide search</p>

<button  onclick="myFunction()"></button>
<form id="form">
  <input type="text" name="search" placeholder="Search..">
</form>

Upvotes: 0

user1773603
user1773603

Reputation:

There are lot of things on the net e.g https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search

Run below code:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('https://www.w3schools.com/howto/searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>
</head>
<body>

<p>Animated search form:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Upvotes: 1

Related Questions