[HTMLパーツ] メニュー項目サンプル #6「サイドメニューマルチ階層対応」

2019年2月23日

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

t f B! P L
ホームページのサイトマップって何故必要なのか考えたことありますか? SEO対策として、SearchConsoleを使って、クローラーボットに対しての設定を行いますが、 この作業はクローラーに対してサイト内にあるページを提示しているワケですが、そもそも情報サイトやブログ・サイトなどは、動的にどんどんページが作成されていき、中にはページURLが時間をかけ合わせたユニークコードになってしまうサイトもあります。 こういう動的URLのサイトはSEOにはあまり向かないという事もまことしやかに言われていますが、確かにWEBサイトをクローリングする際にそういう仕様のWEBページって厄介であることは感じますね。 そうするとサイトマップは固定ページを提示するという仕様を提示する重要な仕様書であると考えられます。 あんまりトリッキーなWEBサイトを構築してはいけないというあらわれなのが、サイトマップであるとも考えられますね。 そして、そこで重要なのがサイトマップのxmlデータと加えて、ページ内リンクでしょう。 ユーザーが直感的に理解できるのはメニュー項目で、そこがゴッチャゴチャのサイトは正直玄関先が散らかっている自宅に訪れた感覚になり、それはもう不安でしかないですよね。 サイト内のページが多くなりすぎて、メニューをスッキリみせたい人の為に、サイドメニューも多階層化してみました。

Demo

See the Pen Side-Menu-2 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"> <script src="side-menu.js"></script> </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 data-dropdown="1"> <a href="#menu-3-2">Menu-3-2</a> <ul> <li><a href="#menu-3-2-1">Menu-3-2-1</a></li> <li><a href="#menu-3-2-1">Menu-3-2-2</a></li> <li data-dropdown="1"> <a href="#menu-3-2-3">Menu-3-2-3</a> <ul> <li><a href="#menu-3-2-3-1">Menu-3-2-3-1</a></li> <li><a href="#menu-3-2-3-2">Menu-3-2-3-2</a></li> <li><a href="#menu-3-2-3-3">Menu-3-2-3-3</a></li> </ul> </li> </ul> </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; } .side-menu > ul > li{ min-height:60px; line-height:60px; } .side-menu > ul > li li{ min-height:60px; line-height:60px; } .side-menu > ul li > ul{ display:none; } .side-menu > ul li[data-view="1"] > ul{ display:block; } .side-menu a{ display:block; padding-left:8px; border-bottom:1px solid #ccc; width:100%; } .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; } /* second-level */ .side-menu > ul li[data-view="1"]{ position:relative; } .side-menu > ul > li[data-view="1"] ul{ position:absolute; top:-1px; left:100%; min-width:200px; border:1px solid #ccc; border-bottom:0; } @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); } } ;(function(){ // ページ内にjsライブラリの読み込み var $$addScript = function(file){ var s = document.createElement("script"); s.src = file; document.body.appendChild(s); } // イベントライブラリ var $$event = function(target, mode, func){ //other Browser if (typeof target.addEventListener !== "undefined"){ target.addEventListener(mode, func, false); } else if(typeof target.attachEvent !== "undefined"){ target.attachEvent('on' + mode, function(){func.call(target , window.event)}); } }; var $$ = function(){ var state = document.readyState; if(state === "complete"){ this.start(); } else if(state === "interactive"){ $$event(window , "DOMContentLoaded" , (function(e){this.start(e)}).bind(this)); } else{ $$event(window , "load" , (function(e){this.start(e)}).bind(this)); } }; $$.prototype.start = function(){ // dropdown-set this.set_dropdown(); // dropdown-click this.set_dropdown_click(); // top-menu var links = document.querySelectorAll(".side-menu ul > li > a"); for(var i=0; i<links.length; i++){ $$event(links[i] , "click" , (function(e){this.set_top_menu_toggle(e)}).bind(this)); } // other-click $$event(window , "click" , (function(e){this.checkClick(e)}).bind(this)); }; $$.prototype.set_top_menu_toggle = function(e){ var currentTarget = e.currentTarget; if(!currentTarget || currentTarget.parentNode.getAttribute("data-dropdown") !== "1"){ this.set_top_menu_hidden(); } var top_menus = document.querySelectorAll(".side-menu ul > li"); for(var i=0; i<top_menus.length; i++){ // 対象リンククリック if(top_menus[i] === currentTarget.parentNode){ if(top_menus[i].getAttribute("data-view") !== "1"){ this.set_top_menu_view(top_menus[i] , true); } else{ this.set_top_menu_view(top_menus[i] , false); } } // 対象の親階層は処理しない else if(this.checkHierarchy(currentTarget , top_menus[i])){ continue; } // 対象外リンククリック else{ this.set_top_menu_view(top_menus[i] , false); } } }; $$.prototype.checkHierarchy = function(currentTarget , menuElement){ while(!currentTarget.matches(".side-menu")){ if(currentTarget === menuElement){ return true; } currentTarget = currentTarget.parentNode; } return false; }; // bool @ [true:active , false:unactive] $$.prototype.set_top_menu_view = function(linkElm , bool){ if(!linkElm){return;} if(bool === true){ linkElm.setAttribute("data-view" , "1"); } else{ linkElm.setAttribute("data-view" , "0"); } }; // all-link-hidden $$.prototype.set_top_menu_hidden = function(){ var listElm = document.querySelectorAll(".side-menu ul > li"); for(var i=0; i<listElm.length; i++){ if(listElm[i].getAttribute("data-dropdown") !== "1"){continue;} listElm[i].setAttribute("data-view" , "0"); } }; // bool @ [true:view , false:hidden] $$.prototype.set_top_menu_active = function(dropdowns , currentTarget){ if(!dropdowns || !dropdowns.length){return;} for(var i=0; i<dropdowns.length; i++){ if(!currentTarget || dropdowns[i].getAttribute("data-active") === "1"){ dropdowns[i].setAttribute("data-active" , "0"); } else{ dropdowns[i].setAttribute("data-active" , "1"); } } }; // window-event $$.prototype.checkClick = function(e){ var target = e.target; if(target && target.matches(".side-menu ul > li *")){ return; } if(!target || !target.matches(".side-menu ul > li > a")){ this.set_top_menu_hidden(); } }; $$.prototype.set_dropdown = function(){ var top_menus = document.querySelectorAll(".side-menu ul > li"); for(var i=0; i<top_menus.length; i++){ var listsElm = top_menus[i].querySelectorAll(":scope > ul"); if(!listsElm.length){continue;} top_menus[i].setAttribute("data-dropdown" , "1"); } }; $$.prototype.set_dropdown_click = function(){ var dropdowns = document.querySelectorAll(".side-menu ul li[data-dropdown='1']"); for(var i=0; i<dropdowns.length; i++){ var a = dropdowns[i].querySelector(":scope > a"); a.href = "javascript:void(0)"; } }; new $$; })();

解説

今回もこれまで作ってきたヘッダメニューと同じ構成を貫いています。 サイドメニューをクリックして子階層がある場合は、右側にリストがポップアップされます。 単純にLIタグを"position=relative"にすることで座標を気にせず簡単に表示することが出来るようになります。 デザイン的に気をつけないといけないのは、メニューの縦幅と横に表示される縦幅を揃えないと少し違和感が出ていたので、細かい点ですが子階層がもっさりしてしまっているのはご愛嬌ですね。

人気の投稿

このブログを検索

ごあいさつ

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

ブログ アーカイブ