スマホメニュー

スマホサイトで使う開閉メニューを3つ程作って試して見た

MVサイト製作日記 part.05
スマホ用のページを作っていて悩んだのがナビゲーション部分です。個人的に開閉式(ページを開いた時は見えなくて、ボタンを押すとメニューが開く)はあまり好きではなく、始めから全て画面に表示させていたのですが、メニューの数が多くなるとそうも言っていられません。
というわけで、3つほど開閉するメニューを作って比べてみました。

前置き

全ての方法にjQueryを使っています。
このサイトの記事用にテンプレートを作っているので、無駄なcssや、今から作るメニューのhtmlに非効率なid等が混ざってますので予めご了承くださいませ^^;

サンプルで使うHTMLとCSS

Header
menu
Contents
Footer

上記のようなテンプレートを使いメニューを作っていきます。
実際のサイトでう使う場合は「section」部分が「body」だと思ってください。

要素を広げて開閉する

Header
menu
Contents
Footer

menuボタンを押すと、単純に隠れている要素が広がってメニューが表示されます。
開閉の仕方はjQueryの「slideToggle」を使っているので誰でも簡単に作れます。
これだけではなく「toggle」自体とても便利なので、興味があるかたはググって見てください。

js部分の設置の仕方

  1. jsファイルの2行目に、メニューを開閉する為のボタンに付けたid名を指定します。
  2. そして3行目には実際に開閉するメニューのid名を指定します。

メリット

  • Html/cssが簡単
  • 他の要素に被らないので、隠れて見えなくなるコンテンツが無い

デメリット

  • メニューを開くとページ全体が長くなる
  • メニューが多いと、メインのコンテンツまでが遠い

要素を重ねて開閉する

Header
menu
Contents
Footer

cssは、テンプレートと違う部分のみ書いています。

1つ目と違うのは、メニューをpositionを使って浮かせていることです。その他は1つ目と作り方は同じです。

js部分の設置の仕方

  1. jsファイルの2行目に、メニューを開閉する為のボタンに付けたid名を指定します。
  2. そして3行目には実際に開閉するメニューのid名を指定します。

メリット

  • Html/cssが簡単
  • 自分が知っている中ではこのパターンが1番多い気がするので、ユーザーが迷わない

デメリット

  • すぐ下のコンテンツに被るので、ブログでいうと1番新しい記事が隠れる

要素を横から重ねて開閉する

Header
menu
Contents
Footer

cssは、テンプレートと違う部分のみ書いています。
また、8行目と52行目はこの記事用に「absolute」を使ってますが、実際のサイトで使う時は、「fixed」を使ってください。

css部分の81行目~85行目までのサイズ指定は、103行目で指定したサイズ+1pxで指定してください。また、左側に設置する場合は「translateX(-181px)」みたく、マイナス指定します。
動き部分はcss3を使っています。jQueryだけでも同様の事ができますが、Googleさんがこの方法使っていたので、css3を使ってみました。
jQueryは、要素にclassを追加・削除するだけに使っています。

js部分の設置の仕方

  1. jsファイルの2行目に、メニューを開閉する為のボタンに付けたid名を指定します。
  2. 3行目と7行目には実際に開閉するメニューのid名を指定します。
  3. 4行目と6行目にはモーダル部分のid名を指定します。(Htmlの15行目で指定したid名)

メリット

  • 下のコンテンツに被さるが、全部隠れる訳では無い
  • Googleさんも使っている

デメリット

  • css3を使っている
  • 少し複雑なので理解しづらい

チラシの裏

結局このサイトでは1つ目のパターンで作りました。
理由はやっぱり、コンテンツ部分に被さるのが嫌だったからです。

また、1つ目と2つ目のパターンもjquery.easing.1.3.jsと組み合わせる事で動きに変化をつける事ができます。
その際、こちらの記事で動きの参考にしてください。

イージングの動き見本(サンプル)【Javascript / jQuery】
https://muumv.com/easing/

コメントを残す

メールアドレスが公開されることはありません。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2017年11月
« 10月    
 1234
567891011
12131415161718
19202122232425
2627282930  

タグ

Social