2017-01-26 37 views
-3

私は、そこにあるナビゲーションバーにのみ検索アイコンを表示しようとしていますが、検索アイコンをクリックすると検索バーがドロップされるようにしたいのですが、検索バーにアイコンを入れます

<ul class="nav navbar-nav navbar-right"> 
    <li class="dropdown"> 

     <a href="#navs" class="dropdown-toggle" data-toggle="dropdown"> 
      <span style="color:white" class="glyphicon glyphicon-search"/> 
     </a> 

     <ul class="dropdown-menu" role="menu"> 
      <li> 
       <input type="hidden" name="cx" /> 
       <input type="hidden" name="ie" value="UTF-8" /> 
       <input type="text" name="q" size="25" /> 
       <input type="submit" name="sa" value="Search" /> 


      </form> 
     </li> 
    </ul> 
</li> 
</ul> 
</div> 
</div> 
+0

は基本的に開始:http://www.w3schools.com/html/default.aspあなたがHTMLの基本を理解した後、あなたはもう少し学ぶことができますCSSについて:http://www.w3schools.com/css/default.asp基本を学んだら、ここでnavbarについて学ぶことができます:http://www.w3schools.com/css/css_navbar.asp –

+0

後藤http://bootsnipp.comといい例があります。 –

+0

このようなものを試してみてください:http://www.bootply.com/rX9b6QFM6j – ZimSystem

答えて

1

jqueryを使用できますか? .dropdown-menu { display: none; }を行い、その後、jqueryのを使用して、次の操作を行います。

$(document).ready(function(){ 
    $(".dropdown-toggle").click(function(){ 
    $(".dropdown-menu").toggle(); 
    }); 
}); 
+0

多くの助けになりましたが、どうすればそれを閉じるのか知っていますか? –

+0

'.show()'の代わりに '.toggle();'を使うことができます。基本的にはhide/showを切り替えるだけです。クリックする前に要素が非表示になっていると表示されます。表示されている場合は非表示になります。だからあなたのCSSであなたはあなたの最初のビューを設定するだけでそれを設定したい! '.toggle()'はあなたが探しているものです。 – oompahlumpa

+0

私にその緑色のチェックマークを付ける気が気になります:) – oompahlumpa

関連する問題