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

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

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

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

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

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

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

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

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

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/