折りたたみボックスを小さな解像度で表示する方法

Question

折り畳み可能なボックスをJavaScriptを使用してウェブサイトに表示する方法を教えてもらえますか？

私がウェブサイト上で望むのは、画面のサイズを変更することです（モバイルなどのように）。クリックする必要があるドロップダウンボックスでナビゲーションバーを置き換えます。

これは可能ですか？

ありがとうございました！ここで

#navLocation { 
 
\t position:relative; 
 
\t float: right; 
 
\t top: 55; 
 
\t right: 125; 
 
\t font-size: 155%; 
 
}

<div id="navLocation"> 
 

 
<a id="container" id="navLocation" href="index.html">home</a>&nbsp; <a href="about.html">about</a>&nbsp; <a href="projects.html">projects</a>&nbsp; <a href="news.html">news</a>&nbsp; <a href="contact.html">contact</a> 
 

 
</div>

Answer 1

はJSFiddle

\t .navbar-inverse { 
 
    background-color: #000000; 
 
    margin-top:10px; 
 
    float: right; 
 
    border: none; 
 
    margin-right: 10px; 
 

 
    border-radius: 0px; 
 
} 
 

 

 
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover { 
 
    color: #FFFFFF; 
 
    background-color: #000000; 
 
    border: none; 
 
} 
 

 

 
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover { 
 
    color: #FFFFFF; 
 
    background-color: 000000; 
 
} 
 

 

 

 
ul li{ 
 
\t font-size: 20px; 
 
} 
 

 

 
ul li a{ 
 
\t text-decoration: none; 
 
\t color: #000000; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <nav class="navbar navbar-inverse"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span>       
 
      </button> 
 
      
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Menu 1</a></li> 
 
      <li><a href="#">Menu 2 </a></li> 
 
      <li><a href="#">Menu 3</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav>

これはあなたが望むのと同じであるのですか？

これが役に立ちます。

Answer 2

私はあなたのために例を挙げました。見てください。

`https://jsfiddle.net/ibrahimince/yrashdfm/` 

アップ。私はjqueryライブラリを追加することを忘れてしまった。 jqueryライブラリを追加する必要があります。

https://jsfiddle.net/ibrahimince/qntz5w3u/