幅が変わったときにナビゲーションメニューをボタンにするにはどうすればいいですか？

こんにちは、そこに人が流れています、どうですか？幅が変わったときにナビゲーションメニューをボタンにするにはどうすればいいですか？

私のウェブサイトでは、フルサイズでないブラウザで開くと気になるところがあります。ブラウザの幅に応じて、ナビゲーションメニューを「3つのバー」のシンボルに変える新しいウェブサイトがたくさんあります。？？！私は偉大をやっているどのように私はそれ誰かが私にヒントを与えることができないことができ

おかげ

body { 
 
    background-color: black; 
 
} 
 

 

 
nav { 
 
\t padding: 12px; 
 
\t float: right; 
 
\t margin: 18px 100px; 
 
} 
 

 
nav a{ 
 
\t margin-left: 12px; 
 
\t text-decoration: none; 
 
\t color: #ffffff; 
 
\t font-family: Verdana; 
 
\t font-weight: bold; 
 
\t padding: 13px; 
 
\t font-size: 75%; 
 
\t letter-spacing: .03em; 
 
} 
 

 
nav a:hover { 
 
\t color: #ffffff; 
 
\t background-color: #0ad2ad; 
 
}

<!DOCTYPE HTML> 
 
\t <html> 
 
\t \t <head> 
 
\t \t \t <title>Navegation Doubt</title> 
 
\t \t </head> 
 
\t \t <body> 
 
\t \t <div id="container"> 
 
\t \t \t <div id="first"> 
 
\t \t \t \t <nav> 
 
\t \t \t \t \t <a href="#">Home</a> 
 
\t \t \t \t \t <a href="#">Store</a> 
 
\t \t \t \t \t <a href="#">Blog</a> 
 
\t \t \t \t \t <a href="#">Classes</a> 
 
\t \t \t \t \t <a href="#">Contact</a> 
 
\t \t \t \t </nav> 
 
\t \t \t </div> 
 
\t \t </body> 
 
\t </html>

出典

2016-03-21 Thassio Paganucci Xavier

使用media queriesあなたのケースで異なる条件（の大きさに基づいて、異なるCSSルールを適用しますデバイス）は基本的に、サポートしたい最小のデバイスのサイトを設計し、min-widthを使用して構築します。

3つのバーメニューアイコンをfont awesomeにチェックアウトするには、あなたのサイトで使用できる素晴らしいアイコンがいくつかあります。

多くのCSSフレームワークとグリッドシステムには、メディアクエリを使用した応答コンポーネントのビルドが含まれています。hereの束を見つけることができます。

出典

2016-03-21 17:02:32

Olam WordPress Theme

：（ちょうどこのワードプレスのテーマのようにあなたはどうですか？

主に、navbarコンポーネント（および最も簡単な方法）を使用しました。ブートストラップ。サイトを反応させるので、このフレームワークを学ぶことを強くお勧めします。

また、あなたのnavbarがあなたのウェブサイトのSEOのジュースであることに注意することが重要です。

ブートストラップを含めたら、ナビゲーションバーを作ることができ、ここでの例です：

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <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="#"> 
      Your Cool Website 
      </a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">Store</a></li> 
      <li><a href="#contact">Blog</a></li> 
      <li><a href="#contact">Classes</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav>

JSFiddle

出典

2016-03-21 16:55:32 Swadish

幅が変わったときにナビゲーションメニューをボタンにするにはどうすればいいですか？

答えて

関連する問題