[HTMLパーツ] メニュー項目サンプル #5「サイドメニュー2階層パターンcssのみ」

2019年2月21日

HTML テクノロジー プログラミング

t f B! P L
「ホームページのメニューを制するものは、WEBマーケティングを制す」とはよく言ったもので・・・ ウソです。誰もそんな事は言ったこと無いし、聞いたこと無いし、今はじめて書いてみました。 しかし、ホームページを制作している人あるあるですが、あって当たり前、項目のセットは簡単にできると思われがちなメニュー項目は意外と製作依頼者からの問い合わせが多い箇所でもあります。 ホームページを作り終わってから、「あの項目消しといて」とか「新たに追加しておいて」などはまだよく、「スマホで使いづらいので折りたたみはやめて」とか、「サイズをもっと大きくして」などなど・・・ おそらくユーザー側も問い合わせするレベルではないが、ホームページで最初に見る箇所、触る箇所は、大体において「メニュー項目」であることがほとんどのはずです。 こうした「メニューマーケティング」もしかしたら改善ポイントにより、サイトコンバージョンをアップさせるポイントにもなりえるかもしれませんね。 「PMO」(PageMenuOptimyzation)というジャンルはプロマネ用語と似ていますが、新たに立ち上げてもいいかもしれませんね。 こういうネタ、得意なんですよね・・・ というわけで、本日も前回に引き続いてサイドメニューサンプルをお届けします。 今回はCSSのみのバージョンでJavascriptを使わないヤツです。

デモ

See the Pen Side-Menu-1-css by YugetaKoji (@geta1972) on CodePen.

ソースコード

<html lang="en"> <head> <meta charset="utf-8"> <title>HTML-parts SideMenu</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="side-menu.css"> </head> <body> <div class="side-menu"> <ul> <li data-dropdown="1"> <a href="javascript:void(0)">Menu-1</a> <ul> <li><a href="#menu-1-1">Menu-1-1</a></li> <li><a href="#menu-1-2">Menu-1-2</a></li> </ul> </li> <li> <a href="#menu-2">Menu-2</a> </li> </ul> <ul> <li data-dropdown="1"> <a href="javascript:void(0)">Menu-3</a> <ul> <li><a href="#menu-3-1">Menu-3-1</a></li> <li> <a href="#menu-3-2">Menu-3-2</a> </li> </ul> </li> </ul> </div> </body> </html> html,body{ margin : 0; padding : 0; border : 0; width : 100%; height : 100%; } *, *:before, *:after { -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -o-box-sizing : border-box; -ms-box-sizing : border-box; box-sizing : border-box; } /* Side-menu */ .side-menu{ width : 200px; background-color:white; border-right:1px solid #ccc; } .side-menu ul{ padding:0; margin:0; border:0; } .side-menu li{ padding:0; margin:0; border:0; list-style:none; min-height:60px; line-height:60px; } .side-menu a{ display:block; border-bottom:1px solid #ccc; } .side-menu > ul > li > a{ padding-left:10px; } .side-menu > ul > li > ul > li > a{ padding-left:20px; } .side-menu li[data-dropdown="1"] > a:after{ content: ""; display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: 6px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; box-sizing: border-box; margin-left:4px; } .side-menu a:hover{ background-color:#eee; } /* expand-default */ .side-menu > ul li > ul{ display:none; } /* ecpand-open */ .side-menu li:hover > ul{ display:block; } /* expand-close */ .side-menu li > ul{ display:none; } @keyframes menu-noactive{ 0%{ background-color:#eee; } 100%{ background-color:rgba(255,255,255,0.0); } } @keyframes menu-close{ 0%{ opacity:1.0; visibility:visible; } 100%{ opacity:0.0; visibility:hidden; } } @keyframes menu-list-open{ 0%{ transform : scaleY(0); } 100%{ transform : scaleY(1); } } @keyframes menu-list-close{ 0%{ transform : scaleY(1); } 100%{ transform : scaleY(0); } }

解説

ヘッダーメニューと同じ構成なのでCSSのみでの仕様も全く同じです。 [data-view="1"]をhoverに変更して、[data-view="0"]を削除しています。 それから、liタグには、data-dropdownを記述する必要があるので、子階層があるモノには属性をつけてください。 細かい仕様ですが、子階層の項目をクリックしても画面遷移させないように、aタグのhref属性に"javascript:void(0)"を登録しておきましょう。 これだけで、jsを使わなくて非常に高速でかつ、処理負荷がかからないページになるので、おすすめです。 ただし、モバイルの場合はhover対応ができないので、使えません・・・orz

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ