Question

我想在我的导航栏中添加搜索框但不像图片中显示的传统方式，我只想在导航栏中添加搜索图标按钮，当用户点击它时，搜索框会出现在搜索图标下方

我怎么能这样做任何人可以帮助我？

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

Answer 1

网上有很多东西，例如https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search

运行以下代码：

＆＃13;

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

＆＃13;

Answer 2

您可以尝试这些代码段。

只使用CSS解决：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

JS的解决方案：

＆＃13;

function myFunction() {
	if (document.getElementById("form").style.display === "none") {
       document.getElementById("form").style.display = "block";
    } else {
        document.getElementById("form").style.display = "none";
    }
}

＆＃13;

button {
width: 50px;
height: 50px;
}

＆＃13;

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

＆＃13;

搜索按钮在bootstrap导航栏中打开搜索框

2 个答案: