Suchschaltfläche zum Öffnen des Suchfelds in bootstrap navbar

Ich möchte ein Suchfeld zu meiner Navigationsleiste hinzufügen, aber nicht wie auf dem Bild üblich, sondern nur in der Navigationsleiste und wenn Benutzer auf klicken Es erscheint das Suchfeld unter dem Suchsymbol.Suchschaltfläche zum Öffnen des Suchfelds in bootstrap navbar

Wie kann ich das tun jemand kann mir bitte helfen?

<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>

Quelle

2017-12-12 user

Sie diese Schnipsel ausprobieren können.

Solutuion mit 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"> 
 
\t <label for="trigger">click me for Search</label> 
 
\t <input type="checkbox" id="trigger"> 
 
    <div class="hide"> 
 
    <form> 
 
     <input type="text" name="search" placeholder="Search.."> 
 
    </form> 
 
    </div> 
 
<div>

Lösung mit JS:

function myFunction() { 
 
\t 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>

Quelle

2017-12-12 21:08:23 Most24

Javascript sollte nicht benötigt werden, und eine vollständige CSS-Lösung sollte sein möglich. Das ist eine schlechte Idee. – kmc059000

Ich habe nur eine CSS Version – Most24

@ Most24 vielen vielen Dank hinzugefügt, das ist was ich will – user

Es gibt viele Dinge im Netz beispiels https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search

Run unten 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>

Quelle

2017-12-12 18:48:55 AsifAli72090

Suchschaltfläche zum Öffnen des Suchfelds in bootstrap navbar

Antwort

Verwandte Themen