검색 버튼을 부트 스트랩 navbar에서 검색 창을 엽니 다.

내 탐색 모음에 검색 상자를 추가하고 싶지만 그림에 표시된 것과 같은 전통적인 방법이 아닙니다. 탐색 아이콘에만 버튼을 추가하고 사용자가 클릭하면 검색 상자 아래에 검색 상자가 나타납니다.검색 버튼을 부트 스트랩 navbar에서 검색 창을 엽니 다.

어떻게하면 좋을까요?

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

출처

2017-12-12 user

당신은이 조각을 시도 할 수 있습니다. JS와

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

솔루션 : 만 CSS와

는

Solutuion

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>

자바 스크립트는 전혀 필요하지 말아야하며, 전체 CSS 솔루션은해야

출처

2017-12-12 21:08:23 Most24

가능한. 이것은 나쁜 생각입니다. – kmc059000

나는 CSS 만 추가했다 버전 – Most24

@ Most24 많은 많은 감사, 이것이 내가 원하는 것이다. – user

많은 것이 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search

실행 코드 아래 그물 예컨대에 있습니다

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

출처

2017-12-12 18:48:55 AsifAli72090

검색 버튼을 부트 스트랩 navbar에서 검색 창을 엽니 다.

답변

관련 문제