CSS: レスポンシブ スタイル (ストライプ スタイル) の下でメニューを折りたたむ_html/css_WEB-ITnose

原文: CSS: Responsive Navigation Menu

翻訳: CSS: Responsive Navigation Menu

翻訳者: dwqs

以前、レスポンシブなドロップダウンメニューの作り方について書きました: Responsive Drop-down menu

以前、Aレスポンシブなモバイル ナビゲーションを作成する方法に関するチュートリアル。さて、JavaScript を使用せずに、HTML 5 の明確なセマンティック マークアップを使用して、レスポンシブ メニューを実装する新しいトリックを発見しました。

このメニューは、クリックして表示と非表示を切り替える必要がある前の記事で説明したメニューとは異なり、左、中央、右に揃えることができます。また、アクティブ/現在のメニュー項目を示すマーカーもあり、すべてのモバイル プラットフォームと IE を含むすべてのデスクトップ ブラウザーで動作します。

まず、デモの効果を見てみましょう: デモ

1. 目的

このチュートリアルの目的は、通常のリスト メニューを小さな表示ドロップダウン メニューに変える方法を示すことです。

このトリックは、以下のスクリーンショットのように、多くのリンクで構成されるナビゲーションで、すべてのボタンを 1 つのエレガントなドロップダウンに凝縮するのに非常に役立ちます。

2. HTML タグのナビゲーション

<nav class="nav">    <ul>        <li class="current"><a href="#">Portfolio</a></li>        <li><a href="#">Illustration</a></li>        <li><a href="#">Web Design</a></li>        <li><a href="#">Print Media</a></li>        <li><a href="#">Graphic Design</a></li>    </ul></nav>

3. CSS

/* nav */.nav {    position: relative;    margin: 20px 0;}.nav ul {    margin: 0;    padding: 0;}.nav li {    margin: 0 5px 10px 0;    padding: 0;    list-style: none;    display: inline-block;}.nav a {    padding: 3px 12px;    text-decoration: none;    color: #999;    line-height: 100%;}.nav a:hover {    color: #000;}.nav .current a {    background: #999;    color: #fff;    border-radius: 5px;}

4. 中央揃えと右揃え

前に述べたように、text-align プロパティの変更を使用できます。アライメント。

/* right nav */.nav.right ul {    text-align: right;}/* center nav */.nav.center ul {    text-align: center;}

5. IE サポート

IE 8 以前のバージョンでは、HTML5 の nav タグとメディア クエリはサポートされていません。 css3-mediaqueries.js (またはresponse.js) と html5shim.js を導入して、フォールバック互換性処理を提供します。 html5shim.js を使用したくない場合は、nav の代わりに div を使用できます

<!--[if lt IE 9]>    <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]?>

6. 応答性

次に、メディア クエリ メニューの応答性について説明します。レスポンシブ デザインに詳しくない場合は、レスポンシブ デザイン (後続翻訳) とメディア クエリに関する私の以前の記事を読んでください。

600 ピクセルのブレークポイントで、nav 要素を相対位置に設定して、ul 要素を絶対的に配置できるようにします。 display:none を使用すると、すべての li 要素が非表示になりますが、現在の li 要素はブロック要素として表示されたままになります。次に、マウスが nav 要素上にあるときに、display:block をすべての li 要素に追加して、現在の li 要素をマークします。アイコンを追加します。中央揃えと右揃えの場合は、配置された ul 要素の left 属性と right 属性を使用します。最終的なデモ効果をご覧ください:

@media screen and (max-width: 600px) {    .nav {        position: relative;        min-height: 40px;    }        .nav ul {        width: 180px;        padding: 5px 0;        position: absolute;        top: 0;        left: 0;        border: solid 1px #aaa;        background: #fff url(images/icon-menu.png) no-repeat 10px 11px;        border-radius: 5px;        box-shadow: 0 1px 2px rgba(0,0,0,.3);    }    .nav li {        display: none; /* hide all <li> items */        margin: 0;    }    .nav .current {        display: block; /* show only current <li> item */    }    .nav a {        display: block;        padding: 5px 5px 5px 32px;        text-align: left;    }    .nav .current a {        background: none;        color: #666;    }    /* on nav hover */    .nav ul:hover {        background-image: none;    }    .nav ul:hover li {        display: block;        margin: 0 0 5px;    }    .nav ul:hover .current {        background: url(images/icon-check.png) no-repeat 10px 7px;    }    /* right nav */    .nav.right ul {        left: auto;        right: 0;    }    /* center nav */    .nav.center ul {        left: 50%;        margin-left: -90px;    }    }

推奨される関連ブログ投稿:

10 のレスポンシブ デザイン ナビゲーション メニューのソース コード: http://www.shejidaren.com/10-sensitive-navigation-tutorials.html

CSS3 レスポンシブ メニューの作成: http://www.onextrapixel.com/2012/08/27/creating-a-css3-sensitive-menu/

Animenu レスポンシブ ナビゲーション デザイン チュートリアル: http://red-team-design.com /animenu-a-sensitive-dropdown-navigation-made-with-sass/

デモ: http://red-team-design.com/wp-content/uploads/2013/02/animenu-demo.html

初公開記事: