ホームページ » コーディング » レスポンシブナビゲーションを作成する方法

    レスポンシブナビゲーションを作成する方法

    するのが最も難しい部分の1つ 責任がある ウェブサイト上です “ナビゲーション”, これは訪問者がWebページを飛び越える方法の1つであるため、この部分はWebサイトのアクセシビリティにとって本当に重要です。.

    レスポンシブWebサイトナビゲーションを作成するには実際には多くの方法がありますが、jQueryプラグインの中にはそれをすぐに実行できるものもあります。.

    しかし、この記事では、即時の解決策を適用するのではなく、順を追って説明します。 地上から単純なナビゲーションを構築する方法 CSS3メディアクエリと小さなjQueryを使用して、スマートフォンのように小さい画面サイズで表示する.

    それでは始めましょう.

    • デモ
    • ソースをダウンロード

    HTML

    まず、内部にメタビューポートを追加しましょう。 頭 タグ。この メタビューポート タグは、特にモバイルビューポートで、任意の画面サイズ内で適切に拡大縮小するために必要です。.

    …そして、ナビゲーションマークアップとして次のスニペットを 体 タグ.

    あなたが上で見ることができるように、我々は6つの主要なメニューリンクを持っていて、それらの後にもう一つのリンクを加えました。この追加リンクは、 引く 小さい画面に隠れているときのメニューナビゲーション.

    参考文献： viewportメタタグを忘れないでください.

    スタイル

    このセクションでは、ナビゲーションのスタイリングを始めます。ここのスタイルは装飾的です、あなたが望むようにあなたは任意の色を選ぶことができます。しかしこの場合、私たち（私は個人的に） 体 柔らかくてクリーミーな色.

     body 背景色：＃ece8e5;

    の ナビ ナビゲーションを定義するタグは 100％ ブラウザウィンドウの全幅 ul それが私たちの主なメニューのリンクが含まれている場所 600px 幅のため.

     ナビ身長：40px;幅：100％。背景：＃455868。フォントサイズ：11pt。 font-family： 'PT Sans'、Arial、Sans-Serif。フォントの太さ：太字。位置：相対;ボーダーボトム：2ピクセルソリッド＃283744。  nav ul パディング：0;マージン：0自動。幅：600ピクセル。高さ：40ピクセル。

    それでは、 浮く メニューは左にリンクしているので、横に並べて表示されますが、要素をフローティングにすると、親が折りたたまれることもあります。.

     nav li display：inline;フロート：左。

    あなたが上記のHTMLマークアップから気付くならば、我々はすでに加えました クリアフィックス の中に クラス 両方の属性 ナビ そして ul このCSS clearfixハックを使ってその中の要素を浮かせるときに周りのものをクリアするため。それでは、スタイルシートに次のスタイルルールを追加しましょう。.

     .clearfix：before、.clearfix：after content： "";表示：テーブル。 clear：both;の後。 .clearfix * zoom：1;

    6つのメニューリンクがあり、コンテナも 600px, 各メニューリンクは 100px 幅のため.

     ナビゲーション色：#fff;表示：インラインブロック。幅：100ピクセル。 text-align：center。テキスト装飾：なし。行の高さ：40ピクセル。 text-shadow：1ピクセル1ピクセル0ピクセル＃283744;

    メニューリンクは次のように分けられます。 1px 最後のものを除いて、右ボーダー。ボックスモデルに関する前回の記事を思い出してください。メニューの幅は次のように拡大されます。 1px それを作る 101px ボーダー追加として、ここで我々は ボックスサイズ モデルに ボーダーボックス メニューを維持するために 100px.

     ナビゲーション：ボーダーライト：１ピクセル（立体）＃５７６９７９。ボックスサイズ：ボーダーボックス。 -moz-box-sizing：ボーダーボックス。 -webkit-box-sizing：ボーダーボックス。  nav li：最後の子a border-right：0;;

    次に、それがあるとき、メニューはより明るい色になります ホバー または ：アクティブ 状態.

     ナビゲーションA：ホバー、ナビゲーションA：アクティブ背景色：＃8c99a4;

    …そして最後に、余分なリンクは隠されるでしょう（デスクトップスクリーンのために）.

     nav a＃pull display：none;

    この時点では、ナビゲーションのスタイルを設定するだけで、ブラウザウィンドウのサイズを変更しても何も起こりません。それでは、次のステップに進みましょう.

    参考文献： CSS3ボックスサイズ（Hongkiat.com）

    メディアクエリ

    CSS3メディアクエリは、特定のブレークポイントや具体的にはデバイスの画面サイズでスタイルがどのように変化するかを定義するために使用されます。.

    私たちのナビゲーションは最初の 600px 固定幅、それが表示されるときに我々は最初にスタイルを定義します 600px 画面サイズが小さいか小さいので、実質的には, この 私たちの最初のブレークポイントです.

    この画面サイズでは、2つのメニューリンクがそれぞれ並んで表示されます。 ulここの幅は 100％ メニューリンクは、ブラウザウィンドウの 50％ 幅のため.

     @メディア画面と（最大幅：600ピクセル）ナビゲーション高さ：自動;  nav ul width：100％;表示ブロック;身長：オート。 ナビゲーション幅：50％;フロート：左。位置：相対; nav li a border-bottom：1ピクセルsolid＃576979;右ボーダー：1ピクセルソリッド＃576979。 nav a text-align：left;幅：100％。テキストインデント：25px。

    …そして、画面が小さくなったときのナビゲーションの表示方法も定義します。 480px 以下（つまりこれが私たちの2番目のブレークポイントです）.

    この画面サイズでは、前に追加した追加のリンクが表示され、リンクにも “メニュー” 右側のアイコンを使用して ：後 疑似要素, メインメニューのリンクは画面上により多くの垂直方向のスペースを節約するために非表示になりますが.

     @メディアのみの画面と（最大幅：480ピクセル）ナビゲーション境界下：0;  nav ul display：none;身長：オート。 nav a＃pull display：block;;背景色：＃283744。幅：100％。位置：相対;  #av：nav＃pull：after content： "";背景：url（ 'nav-icon.png'）繰り返しなし。幅：30ピクセル。高さ：30ピクセル。表示：インラインブロック。位置：絶対右：15ピクセル。トップ：10px。

    最後に、画面が小さくなったとき 320px 下のメニューは上下に垂直に表示されます.

     @メディアのみの画面と（最大幅：320ピクセル）ナビゲーション 表示：ブロック; float：なし。幅：100％。 nav li a border-bottom：1ピクセルsolid＃576979;

    これで、ブラウザウィンドウのサイズを変更できます。画面サイズを調整できるようになりました.

    参考文献： 標準デバイスのメディアクエリ.

    メニューを表示する

    この時点では、メニューはまだ非表示になっており、をタップまたはクリックして必要なときにのみ表示されます。 “メニュー” リンクすれば、jQueryを使って効果を得ることができます。 slideToggle（）.

     $（function（）var pull = $（ '＃pull'）; menu = $（ 'nav ul'）; menuHeight = menu.height（）; $（pull）.on（ 'click'、function（e） e.preventDefault（）; menu.slideToggle（）;）;）;

    ただし、小さな画面でメニューを表示して非表示にした直後にブラウザウィンドウのサイズを変更すると、メニューは非表示になります。 表示：なし jQueryによって生成されたスタイルはまだ要素に添付されています.

    そのため、ウィンドウのサイズを変更するときには、次のようにこのスタイルを削除する必要があります。

     $（ウィンドウ）.resize（関数（）変数w = $（ウィンドウ）。幅（）; if（w> 320 && menu.is（ '：hidden'））menu.removeAttr（ 'style'）; ;））;

    これで、必要なコードはすべて揃いました。次のリンクからナビゲーションを表示できるようになりました。Responsinatorなどのレスポンシブデザインテストツールでテストして、一度にさまざまな幅で表示できるようにすることをお勧めします.

    • デモ
    • ソースをダウンロード

    ボーナス：代替方法

    この記事の前半で述べたように、それを行う方法、およびというJavaScriptライブラリーを使用する方法が他にもあります。 SelectNav.js 最も簡単な方法の一つです。. これは、jQueryのような他のサードパーティのライブラリに依存していない純粋なJavaScriptです。.

    基本的に、それはあなたのリストメニューを複製し、それをに変換します。 メニューはデバイス自体からネイティブのユーザーインターフェースを利用します.

    さらなる実装については、公式文書を参照してください。.

    結論

    レスポンシブナビゲーションをゼロから作成するためのすべての方法を実行しました。ここで作成したものはほんの一例です。この記事で前述したように、他にもたくさんの解決策があります。そのため、要件とWebサイトのナビゲーション構造に最も適したプラクティスを選択するかどうかは、あなたの判断に任されています。.

    JavaScriptリーダーでRSSリーダーアプリを作成する方法
    Windows 8.1でデスクトップに検索ショートカットを作成する方法
    余分なソフトウェアなしでWindows 7に繰り返しアラームを作成する方法
    次の記事
    Amazon Alexaでルーチンを作成する方法
    前の記事
    リソースに優しいブラウザを作成する方法（Operaを使用）