メニューちょこっと改善。アコーディオンと開閉ボタンをtoggleで簡単実装。

メニューちょこっと改善。アコーディオンと開閉ボタンをtoggleで簡単実装。

記事が増えました。

なのにメニューはずっと同じまま。

 

どうにかしたいのだけど、なにからやったらいいんだろう。時間ばかりが過ぎていく・・

 


デザイン=情報の整理

いろんなサイトを拝見して、すきだな、と思ったもの3つ。

 

 

シンプルで素敵だなと思ったのは、GOODPATCHさんのメニュー。

このぐらい潔いのかっこいいです!

真ん中はすみだ水族館さんです。案内板みたいに親切ですね。あー、水族館行きたい!

一番右は東京汽船さん。乗り物なので、目的別に分けているんだ。

 

親切にサポートできるかどうか、これ大事。ですが、項目が多すぎても親切の押し付けになってしまうし・・

自分がメニューを見たいと思うときは、なにか目的があって探してることが多いので。

すべての機能は使わないし、最短ルートでたどり着けるほうが親切なのかな。

 

見た目云々の前に中身の整理が先かも。

 


メニューの動き、あれこれ

スマホメニューを気にしながらサイトを見るようになったら、すごく気になってしまったのが・・

 

こういうのです。

 

メニューボタン押すと、ボタンの上にメニューとレイヤーが出てきちゃうやつ。後ろのレイヤーの部分を押すか、なにかリンクをクリックしないと閉じません。

閉じるボタンはつけたい。そう思いました。

 

 

よく見るのはこのタイプでしょうか。

 

「押したら出る、もう一回押したら消える」は「addClass」と「removeClass」。

「ふわっと出す」は「fadeToggle」、「スライドさせる」は「slideToggle」でできそう。

 

見慣れてるものが使いやすいと感じる人もいるけれど、ユーザーの記憶に頼ることなく、そして説明がなくとも操作できてしまうのが一番素晴らしい気がする。

 


2階層メニューを付け足すことにした

「シンプルに1画面に収まってほしい!」と作った当初のメニュー、項目が増えたときのことを想定しておらず。表示するデータの数が増えても減っても成り立つものであれば、長く使えるはず。

 

ということで、目的別に整理して、アコーディオンの2階層にすることに。

 

元々のメニューをベースに整理整頓して構成を変えました。

文字をセンタリングから右寄せに。せっかくなのでアイコンも追加。

 

タグを使って細かく分類してみたり・・と中身の整理のほうが時間かかっちゃった。

 

実装は、2階層にするためのコードを付け加えているだけでとってもカンタンでした。

これはおすすめ◎

 

HTML

これを足します。ulが入れ子に。

 

<ul>
  <li>
    <a class="sp-accordion">親メニュー</a>
    <ul class="sp-accordion-inner child">
      <li><a href="/hogehoge1">子メニュー</a></li>
      <li><a href="/hogehoge2">子メニュー</a></li>
    </ul>
  </li>
</ul>

 

CSS

 

.sp-accordion-inner li {
  background: rgba(255, 255, 255, 0.4);
}
.sp-accordion-inner li:hover {
  background: rgba(255, 255, 255, 0.6);
}
.child {
  display: none;
}

 

backgroundは透過させてます。お好みで。

 

JS(jQuery)

 

function accordionBtn() {
  $(this).next().slideToggle(300);
}
$(".sp-accordion").click(accordionBtn);

 

アコーディオンにする記述です。短いです。

出来上がってるものにちょこっと足したいときは、こういうシンプルなコード◎。

 


スクロールしないんだけど

スクロールができない!

アコーディオンを開いたら、下の方の字が読めなくなりました。

原因は position:fixed。height の設定を変え、メニュー項目の要素(ul)に overflow: auto; 入れたら、動いた!

 

positionを使いまくってたので、z-indexも大喧嘩。ひとつひとつ順番を指定していく・・地味な作業が発生しました。

 

最初から考えて作ればこんなことになりません。最初が肝心。

 


押したら開閉、ボタンのオン/オフを切り替える

ついでにPCメニューも。

探しやすくなりますように!とボタンを追加。

 

押したらふわっとコンテンツが出て、閉じる押すと消える。

開いてる時は「閉じるボタン」を表示、閉じたらまた「通常ボタン」に戻す。

 

HTML

 

<div id="search-toggle"></div>
<div class="search-toggle-list">ここに出したいものを</div>

 

search-toggleがボタン。search-toggle-listが開いた時の中身です。

 

CSS

 

#search-toggle {
  background-image: url('通常ボタン画像');
}
#search-toggle.is_close {
  background-image: url('閉じるボタン画像');
}

 

ボタンは画像にしちゃいます。

画像はbackgroundにして、通常のときと「is_close」のとき、2種類のボタンclassを用意。

 

JS(jQuery)

 

$('#search-toggle').on('click',function(){
  $(this).toggleClass('is_close');
  $('.search-toggle-list').fadeToggle();
});

 

クリックしたら「#search-toggle」に「is_close」がついて「通常ボタン」から「閉じるボタン」に変わって、リストがふわっと表示。

 


 

記事を整理したりタグを付け直したりの、中身の整理が終わらない。

 

    ∩∩
   (´・ω・)
   _| ⊃/(___
 / └-(____/
  ̄ ̄ ̄ ̄ ̄ ̄ ̄

   ⊂⌒/ヽ-、__
 /⊂_/____ /

 

 
 
toggle使うとカンタンです。ぜひ。

 

 

 

 

 

 

share on

まだ見ぬソール・ライター THE UNSEEN SAUL LEITER

THE UNSEEN SAUL LEITERまだ見ぬソール・ライター

世界のキッチンから 商品開発と写真の関係

世界のキッチンから商品開発と写真の関係

ミナ ペルホネン / 皆川明 つづく

ミナ ペルホネン / 皆川明つづく

イラスト図解式 この一冊で全部わかる Web技術の基本

Web技術の基本イラスト図解式 この一冊で全部わかる

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

なるほどデザイン目で見て楽しむ新しいデザインの本

広報・PR・販促担当者のための伝わるコンテンツ制作ガイド

広報・PR・販促担当者のための伝わるコンテンツ制作ガイド

海外Webマーケティングの教科書

海外Webマーケティング
の教科書