アダプティブナビゲーション：スマートフォンでメニューを取得する場所

多くの人はすでに自分のサイトをモバイル機器に適合させようとしています。 CSS3の新機能は、単純なサイトとより複雑なサイトの両方で使用してください。 その過程でいくつかの困難が生じますが、最も重要なことの1つは、小さな画面で表示したときのサイトメニューの動作です。 結局のところ、彼らはこの問題をいくつかの方法で解決しています。 私にとって、このタスクは最近特に重要になったため、適応設計に関するネットワーク上の資料に従います。 そして最近、既存の適応ナビゲーションパターンの優れた分析に出会いました。



私はオープンソースのレスポンシブHTML5テンプレートSimpliste を使用する必要があるため 、実際にナビゲーションを操作するための既存の可能性をすべて試すことにしました。 しかし、私は自分の経験を積むことに加えて、誰でも使用できるいくつかの実例を作成することができただけでなく、プロセスの説明を作成して、慣れ親しむことを勧めました。





この記事自体は、私を興味を持って行動に駆り立てたもので、 レスポンシブナビゲーションパターンと呼ばれます。 これに依存し、パターンの実装と同じ結果を達成する方法の完全な説明を含むSimplisteテンプレートのページを例として使用します。



適応ナビゲーションにはいくつかのアプローチがあります。 それらを順番に考えてみましょう。

1.上部のナビゲーションまたはそのままにする

最も明白で最も一般的な方法。 すべてが画面の幅に収まり、膨らまないことを確認するだけです。 HTML構造に変更はありませんが、メニューリンクはスタイルをわずかに変更できます。リンクの外観はさまざまな種類があり、単純化、中央揃え、アイコンに置き換えたり、モバイルデバイスインターフェイスの外観を模倣したりできます。



このアプローチはSimplisteスキンで使用されます。

メリット

最も簡単に到達します。 Javascriptを使用する必要はなく（また、依存関係もありません）、信じられないほどのCSS操作は必要ありません。

欠点

この問題は、メニュー項目の数が多すぎるときに始まる場合があります。 第一に、ナビゲーションブロックの高さが、最初のページのサイトのコンテンツを完全にブロックし、ユーザーが必要な情報に到達するためにサイトを「スクロール」する必要があるようになります。 そしてサイトのすべてのページに。 第二に、マルチレベルメニューの問題が生じます。 それらが単純に一方が他方の下に構築される場合、ナビゲーションブロックの高さの問題に戻ります。 第三に、すべてを事前に予測しないと、新しいメニュー項目の追加により、不快な「退去」と移転が発生する可能性があります。

例

2.フッター、ナビゲーションへのリンク

完全な説明付きのデモ 。



この方法はあまり一般的ではありません。 その本質は、リンクがヘッダーに作成されることです。これは、ワイドモニターでは非表示になり、必要に応じてモバイルデバイスに表示されます。 このアンカーリンクは、サイトのフッターにあるメニューにつながります。 この場合、メニュー自体はCSSを使用して配置されるか、ヘッダーとフッターに複製され、低解像度ではヘッダーのメニューが非表示になります。 リンクとして、テキストとわかりやすいアイコンの両方を使用できます。

長所

ヘッダーには唯一のリンクが残り、スペースをほとんど占有しません。 スクリプトの依存関係はありません。

欠点

追加のCSSコードを追加して、デスクトップコンピューターのメニューをフッターから上に移動する（位置：絶対または位置：固定を使用）か、フッターメニューを複製する場合はモバイルデバイスのヘッダーでメニューを非表示にする必要があります。 さらに、そのようなリンクを移動する際の鋭い「ジャンプ」の感覚は、ユーザーを驚かせる可能性があります。

例

3.ナビゲーションの代わりにドロップダウンリスト（<select>）

完全な説明付きのデモ 。



このアプローチはますます普及しています。 Javascriptを使用して、すべてのメニュー項目を「実行」し、それらのリストを作成します。 つまり、ナビゲーションは、訪問者のオペレーティングシステムでサポートされるインターフェース要素になります。



このようなメニューのスクリプト作成プロセスについては、 Smashing Magazineの記事で詳しく説明されています。 ただし、独自のソリューションで行ったように、既製のjQueryプラグインを使用できます。

長所

コンパクトに滑らかにします。 ナビゲーション要素として認識可能で、ユーザーになじみやすい。 複雑なナビゲーションとネストされたメニューを備えたサイトでは、優れたソリューションとなります。

欠点

モバイルOSのインターフェース要素を希望どおりに見せることは困難です。 異なるデバイスでは、外観と動作がわずかに異なります。 JavaScriptの依存関係。 ネストレベルは残っているが、すべてのアイテムが長い単調な列に配置されている場合、非常に大きなサイズをナビゲートするときの不便さ。

例

4.ドロップダウンメニュー

完全な説明付きのデモ 。



このアプローチも非常に人気があります。 特に、デザインを試す機会を考慮してください。 その本質は、メニューのモバイルバージョンでは非表示ですが、クリックすることでナビゲーションを開くことができるリンクまたはボタンがあります。 すべてがJavascriptで機能します。 アプローチとフッターへのリンクを比較できますが、この場合、メニューはユーザーがボタンをクリックした場所、つまりページの上部に表示されます。 または、最も重要なリンクをいくつか残して、ボタンをクリックすると残りを開くことができます。



jQueryで動作する既製のソリューションがあります。 しかし、私にはパーソナライズが難しいように思えました。 そのため、jQuery用の独自のコードを作成しましたが、それほど複雑ではなく、必要に応じて、純粋なJavascriptまたはモバイルデバイスにより適したコードに簡単に変換できます。 しかし、 エミュレータでのテストでは、私のソリューションが非常に機能していることが示されました。

var menuText = "Menu"; $( function(){ $("body").addClass("js"); $(".menu_main").prepend("<a href='#' class='link_nav'>"+ menuText +"</a>"); $(".menu_main li:has(ul)").addClass("menu_parent"); $(".link_nav").click( function(){ $(".menu_main > ul").toggleClass("menu_expanded"); $(this).toggleClass("menu_parent_exp"); return false; } ) $(".menu_parent").click( function(){ $(this).find(">ul").toggleClass("menu_expanded"); $(this).toggleClass("menu_parent_exp"); return false; } ) } )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このスクリプトは、以前に隠されたメニューを開くリンクを作成します。 ケースを調べて、 デモで必要なスタイルを使用できます。

長所

あなたが望むように見えるかもしれません。 ユーザーはどこにも転送しません。 ネストされたメニューの場合、クリックすると表示される階層を作成できます。

欠点

JavaScriptの依存関係。 メニューをアニメーション化する必要がある場合、パフォーマンスの問題が発生する可能性があります。

例

5.コンテンツシフトのある終了メニュー

完全な説明付きのデモ 。



このオプションは、別のアプローチとして説明されています。 しかし、実際には、ドロップダウンメニューのバリエーションです。 その本質は、リンクまたはボタンをクリックすると、メニューが開くだけでなく、ブラウザーウィンドウの端を離れ、コンテンツをウィンドウの外側に移動することです。



ソリューションの検索が機能しなかったため、作成されました。

 $( function(){ $("body").addClass("js"); $(".link_nav").click( function(){ $("body").toggleClass("mobile_nav"); } ); } )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、多くのスクリプトはありません。



主な作業はCSSによって行われます。 bodyタグクラスが変更されると、 position：fixedを介して配置されるメニュー位置が変更され、コンテンツは左側に追加のインデントを取得し、メニューに切り替わります。 Webkitブラウザーでは、CSSトランジションを介してアニメーションを実現することさえできました。つまり、iPhoneとAndroidではメニューが事実上終了します。 繰り返しますが、 デモでは必要なスタイルを確認して使用できます。



個別に説明する必要がある欠陥があります。 メニューに項目が多すぎる場合、位置が固定のメニューは下端で「食べられます」。 この場合、position：absoluteを使用すると役立ちますが、リンクボタンをクリックするとサイトの先頭に「ジャンプ」します。

長所

興味深い解決策、外観を実験する機能。 コンテキストは失われません。これは、コンテンツがウィンドウの端で覆われているにもかかわらず表示されているためです。

欠点

JavaScriptの依存関係。CSSをカスタマイズする必要があります。 position：fixedは、モバイルデバイスのすべての古いバージョンでサポートされていません（position：absoluteがあります）。メニューの高さに関する上記の問題です。

例

6.バリエーション

ナビゲーションへのアプローチと、デザインと機能の両方に、さまざまなバリエーションがあります。



メニューへのリンクなしで、メニューをフッターに配置できます。 メニューをまったく非表示にすることができます（推奨されません）。 ドロップダウンメニューを試すことができます。たとえば、ユーザーにそれを引き出すオプションを提供します。 サブメニュー項目の開示とエッジを残してナビゲーションを組み合わせることに煩わされる人はいません。

表示されるすべてのデモは、HTML5 Simplisteテンプレートのxtensions拡張機能の一部であり、 ダウンロードして独自のプロジェクトで無料で使用できます 。