小さな画面でバーガーアイコンをクリックしたときに隠れたナビゲーションアンカーと隠れた検索フォームをキューに入れる方法は？

Question

私は（左のロゴ、ナビゲーションアンカーを浮かべ - は、右の検索フォームを浮かべ）ナビゲーションメニューがで構成されて持って小さく、余分な小さな画面上で大規模および中規模の画面上と（左のロゴを浮かべ、 は、右のハンバーガーのアイコンを浮かべ）

<div class="navbar"> 
    <a href="#"> <img class="navbar-brand" 
    src="http://www.placehold.it/50/50"/> </a> 
    <div class="search-form"> 
    <form> 
     <input type="text" class="search-input"> 
     <button type="submit" class="search-button"><img src=""/></button> 
    </form> 
    </div> 
    <div class="navigators"> 
    <ul class="tabs"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Resourses</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 

を

CSS：

.navbar{float:left} 
.search-form{float:right} 
.tabs{list-style:none;display:inline-block;} 
.tabs li{float:left;} 

その後、私は大規模および中規模の画面で隠されているハンバーガーのアイコンがあります。

<label class="tog" for="toggle">&#9776;</label> 
<input type="checkbox" id="toggle"></input> 

中規模および大画面で

CSS：クリック小さく、余分な小さな画面で

.tog,#toggle {display:none} 

：

#toggle:checked + .search-form {display:inline} 
#toggle:checked ~ .navigators {display:inline} 

しかし、彼らは離れた場所のナビゲーションメニューに表示され、私は彼らがしたいですバーチャルリストに表示すると、バーガーアイコンがクリックされたときにベーネが表示されます。それは可能ですか、アンカーと検索フォームを複製して縦リストにする必要がありますか？

ウェブサイトは、私は、私はあなたがおそらくしている彼らのNavbar component

を通じて、すでにこれを実現ブートストラップのようなものを使用することをお勧めします

Answer 1

応答ではありませんソリューションを必要としない応答し、 checked psuedoクラスを切り替えることができるように入力を使用しますが、ハッキーな修正ではなく、意図した目的にCSSとJavaScriptを使用するより洗練されたソリューションがあります。自分で実装したい場合は、大画面と中画面を単純化するより洗練されたソリューションがあります。 formに何かを投稿しない限り、labelとinput（または<input/>は自己終了タグです）を使用しないようにして、SEOとスケーラビリティを構文的に修正することができます。良い解決策を思いつくために、HTML、CSS、JavaScriptを使う良い例として、Codepenがあります。

チームツリーハウスのblog postには、純粋なCSS応答メニューを使用した素晴らしい例があります。