システム利用できるWEBページメニューテンプレート

2019/03/10

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

t f B! P L
先日から、WEBページのメニューサンプルを何回かに渡ってアップしてきましたが、今回はその集大成として、実際にWEBページで使えるバージョンを完成形としてアップします。 少し改造すると、Wordpressのテーマとしても使える上、今回のソース内では、外部ライブラリを一切使っていないので、利便性は高い事間違いなしです。 注意点としては、ヘッダメニューとサブメニューで、ページ内の機能が多いWEBサイトに向いているテンプレートなので、シンプルにしたいホームページなどでは使わないほうがいいでしょう。 HTMLの箇所を部分的に削除して使ってもいいかもしれませんが、無駄なソースが結構残ってしまうので、ケースバイケースでの利用は自己判断でお願いいたします。

デモ

See the Pen page-theme-1 by YugetaKoji (@geta1972) on CodePen.

機能説明

ヘッダメニューとサイドメニュー

見た目通りですが、WEBページの画面上部と左部分は、「ファーストビュー」と言われる重要な箇所で、この位置に広告バナーなどを配置して、告知力をアップさせる領域なのですが、一般的にシステム領域では、この領域は、利用頻度の高いメニュー項目を配置します。 今回は、細かなレスポンシブシステムに対応させて、1000px以上のPC画面、700px以上の中クラスサイズのPC画面、500px以上のタブレット画面、500px以下のスマートフォン画面。 全部で4パターンのサイズ変更と挙動変更をcssで行っています。

アイコンは全てsvg

見た目にこだわりたいため、メニューに使うアイコンやロゴ画像は全てsvgで記述しています。 それもimgタグではなく、svgタグを直接書き込んでいます。 これは、cssで画像の色を動的に変更する為にこの仕様にしていますが、ブラウザキャッシュでデータ転送を軽く出来るimgタグを使う場合よりも、毎回ソースとしてデータ転送されてしまうので、出来る限りサイズを絞った形で記述しています。

細かなアニメーション

個別のメニューのマウスオーバーの背景色変更や、サブメニューが開く、閉じる場合の表示などには、アニメーションを付けています。 こうすることで、画面内で何が変わったのかを感覚的に認識することができ、迷子になりにくいメニュー構成ができます。

ソースコード

<!DOCTYPE html> <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="menu.css"> <link rel="stylesheet" href="main.css"> <script src="menu.js"></script> </head> <body> <div class="menu header-menu"> <ul class="logo"> <li> <a href="./index2.html"> <span class="img"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M425.063,374.977c10.406-11.891,19.406-24.813,26.313-38.781c10.969-22.219,17.094-46.797,17.094-72.547 c0-17.969-3.375-35.266-9.344-51.484c-8.938-24.328-23.656-46.25-41.656-65.078c-18-18.813-39.328-34.563-61.813-46.484 l-0.078-0.047l-0.109-0.063c-20.813-10.516-36-20.109-47.281-28.516c-8.453-6.297-14.719-11.922-19.578-16.844 c-3.641-3.672-6.484-6.953-8.922-9.891c-1.813-2.203-3.375-4.219-4.906-6.109c-1.156-1.422-2.25-2.781-3.469-4.109 c-0.906-1-1.875-1.984-2.969-2.953c-1.656-1.422-3.656-2.844-6.094-3.859c-2.406-1.031-5.172-1.547-7.781-1.547 c-1.844,0-3.75,0.25-5.547,0.766c-1.703,0.484-3.297,1.188-4.703,2.016c-1.328,0.781-2.484,1.641-3.516,2.547 c-1.922,1.656-3.453,3.391-4.938,5.156c-2.594,3.125-5.109,6.5-8.547,10.516c-2.578,2.984-5.641,6.328-9.5,10.047 c-5.797,5.563-13.406,11.984-23.797,19.156c-10.406,7.172-23.578,15.094-40.469,23.625l-0.078,0.047l-0.109,0.063 c-29.953,15.906-57.891,38.578-78.609,66.313c-10.359,13.875-18.891,29.031-24.859,45.25c-5.953,16.219-9.328,33.5-9.328,51.484 c0,25.766,6.188,50.281,17.188,72.453c6.875,13.859,15.797,26.672,26.078,38.531c-17.109,7.078-71.797,33.5-83.734,85.562 c111.563,57.078,216.563-4.484,236.016-30.313c2.422-0.625,4.797-1.297,7.172-2.125c1.484-0.516,2.969-1.141,4.438-1.734 c9.656,3.5,19.563,5.719,29.5,6.953C299.297,459.57,402.5,517.852,512,461.836C499.156,405.805,436.781,379.461,425.063,374.977z M69.844,448.773l-9.328-9.219c18.141-18.375,36.469-29.984,52.672-37.265c3.391,2.375,7.047,4.688,10.906,6.937 c0.938,0.531,1.938,1.031,2.891,1.563C110.344,417.008,90.141,428.195,69.844,448.773z M232,408.414 c-7.266,2.047-15.172,3.016-23.391,3.016c-16.844,0.016-34.984-4.109-51.172-10.406c-8.094-3.125-15.688-6.813-22.391-10.688 c-6.703-3.891-12.531-7.984-17.016-11.906c-17.25-15.016-31.203-32.656-40.813-52.031s-14.906-40.484-14.906-62.75 c0-15.25,2.844-29.922,7.984-43.953c7.719-21.016,20.672-40.531,36.953-57.516c16.219-16.969,35.719-31.375,56.188-42.266 c21.703-10.984,37.938-21.188,50.344-30.422c9.313-6.938,16.469-13.328,22.063-18.984c4.203-4.25,7.531-8.094,10.25-11.375 c2.016-2.453,3.688-4.609,5.078-6.328c1.031-1.281,1.906-2.328,2.578-3.078c0.328-0.344,0.5-0.516,0.719-0.719 c0.344,0.328,0.766,0.781,1.281,1.359c0.906,1.063,2.063,2.516,3.453,4.25c2.422,3.063,5.578,7.016,9.766,11.563 c6.266,6.828,14.875,14.969,27.156,24.031c12.281,9.047,28.25,19.016,49.406,29.719c27.281,14.516,52.813,35.313,71.25,60.047 c9.234,12.375,16.703,25.703,21.859,39.719c5.141,14.031,7.984,28.703,7.984,43.953c0,22.281-5.25,43.484-14.828,62.875 c-9.578,19.406-23.5,37-40.828,51.844c-11.031,9.469-25.734,18.078-42.234,24.219c-16.5,6.14-34.766,9.843-52.938,9.828 c-7.984,0-15.922-0.781-23.734-2.297c3.313-3.156,6.516-6.546,9.375-10.421c6.547-8.891,11.75-19.625,15.328-32.219 c3.563-12.625,5.547-27.109,5.734-43.688c0.016-0.813,0.016-1.641,0.016-2.5c0-10.703-0.813-24.484-5.016-39.016 c-2.125-7.266-5.094-14.719-9.281-22.016c-4.172-7.281-9.563-14.391-16.375-20.922l-15.094,15.781 c5.25,5.016,9.313,10.391,12.531,16c4.797,8.391,7.672,17.313,9.313,25.969c1.656,8.656,2.094,17.031,2.094,24.203 c0,0.766,0,1.516-0.016,2.25c-0.203,17.781-2.688,32.125-6.672,43.531c-3,8.563-6.813,15.469-11.234,21.109 c-3.297,4.203-6.953,7.719-10.906,10.641C245.938,403.211,239.281,406.352,232,408.414z M423.219,437.82 c-13.281-11.844-28.969-20.25-42.594-26.047c4.688-2.609,9.219-5.359,13.469-8.312c12.406,5.937,25.813,13.89,37.844,24.578 L423.219,437.82z"></path> </svg> </span> <span class="txt">Page-Title</span> </a> </li> </ul> <div class="mobile-list-button"> <span></span> <span></span> <span></span> </div> <ul> <li> <a> <span class="img"> <svg version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <path d="M32,50.323c-1.356,0-2.456-1.1-2.456-2.456V32.144c0-1.356,1.1-2.456,2.456-2.456 s2.456,1.1,2.456,2.456v15.723C34.456,49.223,33.356,50.323,32,50.323z"/> <polygon points="32,46.05 26.674,46.052 32.002,51.474 37.326,46.048 "/> <path d="M32.002,53.93c-0.659,0-1.29-0.265-1.752-0.735l-5.328-5.422c-0.693-0.706-0.896-1.758-0.513-2.67 c0.382-0.912,1.275-1.506,2.264-1.507l5.326-0.002l0,0l5.326-0.002c0,0,0.001,0,0.001,0c0.989,0,1.881,0.593,2.264,1.505 c0.383,0.912,0.182,1.965-0.511,2.671l-5.323,5.427C33.294,53.665,32.662,53.93,32.002,53.93 C32.003,53.93,32.003,53.93,32.002,53.93z"/> <path d="M46.719,49.065h-1.504c-1.548,0-2.803-1.255-2.803-2.803c0-1.548,1.255-2.803,2.803-2.803h1.504 c3.957,0,7.175-3.219,7.175-7.175s-3.219-7.175-7.175-7.175c-0.3,0-0.604,0.02-0.931,0.063c-0.795,0.102-1.596-0.14-2.2-0.667 c-0.604-0.527-0.954-1.287-0.961-2.088c-0.053-5.923-4.914-10.742-10.837-10.742c-5.977,0-10.84,4.863-10.84,10.84 c0,1.272,0.218,2.518,0.649,3.702c0.394,1.085,0.083,2.301-0.785,3.063c-0.868,0.762-2.114,0.914-3.139,0.382 c-0.742-0.384-1.543-0.579-2.381-0.579c-2.861,0-5.188,2.327-5.188,5.188s2.327,5.188,5.188,5.188h3.515 c1.548,0,2.803,1.255,2.803,2.803c0,1.548-1.255,2.803-2.803,2.803h-3.515C9.342,49.065,4.5,44.223,4.5,38.272 s4.842-10.794,10.794-10.794c0.026,0,0.053,0,0.079,0c-0.019-0.32-0.028-0.641-0.028-0.963c0-9.068,7.377-16.445,16.446-16.445 c4.367,0,8.479,1.694,11.579,4.769c2.423,2.404,4.008,5.433,4.601,8.726c6.462,0.631,11.53,6.095,11.53,12.72 C59.5,43.332,53.767,49.065,46.719,49.065z"/> </svg> </span> <span class="txt">Header-1</span> </a> <ul> <li><a href="#Header-1-1">Header-1-1</a></li> <li><a href="#Header-1-2">Header-1-2</a></li> <li><a href="#Header-1-2">Header-1-3</a></li> <li><a href="#Header-1-2">Header-1-4</a></li> <li><a href="#Header-1-2">Header-1-5</a></li> <li><a href="#Header-1-2">Header-1-6</a></li> <li><a href="#Header-1-2">Header-1-7</a></li> <li><a href="#Header-1-2">Header-1-8</a></li> <li><a href="#Header-1-2">Header-1-9</a></li> <li><a href="#Header-1-2">Header-1-10</a></li> <li><a href="#Header-1-2">Header-1-11</a></li> <li><a href="#Header-1-2">Header-1-12</a></li> <li><a href="#Header-1-2">Header-1-13</a></li> <li><a href="#Header-1-2">Header-1-14</a></li> <li><a href="#Header-1-2">Header-1-15</a></li> </ul> </li> <li> <a href="#Header-2"> <span class="img"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M411.438,55.875c-5.313-3.781-11.594-5.734-17.969-5.734c-3.438,0-6.906,0.578-10.25,1.75l0.625-0.219 l-204.922,71.719c-10.797-0.734-20.766-3.047-27.516-6.109c-3.625-1.609-6.281-3.406-7.672-4.766 c-0.703-0.672-1.078-1.203-1.266-1.5l-0.125-0.266l-0.016-0.016c-1.172-6.969-7.766-11.672-14.766-10.531 c-6.984,1.188-11.719,7.797-10.563,14.781c1.125,6.672,4.75,12.063,8.984,16.094c6.438,6.063,14.531,10,23.703,12.969 c9.156,2.906,19.469,4.672,30.266,5.188l2.5,0.125l208.609-73.016l0.656-0.234c0.578-0.188,1.156-0.281,1.75-0.281 c1.109,0,2.188,0.328,3.125,0.984c1.406,1,2.25,2.641,2.25,4.359v309.313c0,10-6.313,18.938-15.781,22.235l-207.125,72.484 l-0.375,0.172c-1.297,0.547-3.125,0.938-5.531,0.938c-4.516,0.047-10.984-1.531-17.781-4.5 c-10.188-4.391-21.063-11.766-28.797-18.703c-3.875-3.469-6.969-6.844-8.766-9.313c-0.781-1.063-1.25-1.875-1.5-2.359 c0.016-0.641,0.031-1.375,0.047-2.328c0.141-11.547,0.203-47.391,0.203-91.907c0-101.688-0.281-248.078-0.281-248.078v-4.734 c0-2.281,1.453-4.313,3.594-5.063l210.844-74.391c6.703-2.359,10.219-9.688,7.844-16.375c-2.344-6.688-9.688-10.188-16.375-7.828 L108.25,75.11l0.031-0.016c-12.469,4.359-20.797,16.094-20.797,29.297v4.75v0.016c0,0.031,0.016,9.141,0.047,24.453 c0.063,45.953,0.219,147.359,0.219,223.594c0,25.406,0,48.031-0.063,64.844c-0.016,8.406-0.047,15.375-0.078,20.5 c-0.016,2.547-0.031,4.656-0.063,6.234c-0.016,1.547-0.031,2.672-0.047,2.906v-0.016l-0.016,0.813 c0.094,5.141,1.719,8.578,3.453,11.813c3.156,5.563,7.563,10.563,13,15.734c8.125,7.672,18.531,15.328,29.875,21.359 c11.359,5.953,23.516,10.516,36.219,10.609c4.891,0,9.922-0.828,14.766-2.75l0.016,0.063l206.734-72.359 c19.75-6.906,32.969-25.547,32.969-46.469V81.172C424.516,71.11,419.641,61.688,411.438,55.875z"></path> <path d="M159.688,106.407c1.188,3.344,4.828,5.109,8.188,3.938L354.75,44.922c3.344-1.172,5.109-4.828,3.938-8.188 c-1.172-3.328-4.844-5.094-8.188-3.922L163.625,98.219C160.281,99.391,158.5,103.063,159.688,106.407z"></path> </svg> </span> <span class="txt">Header-2</span> </a> </li> </ul> <ul> </ul> </div> <div class="menu side-menu"> <ul> <li> <a> <span class="img"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M284.344,0v225.203l211.641-77.031C464.453,61.813,381.484,0,284.344,0z"></path> <path d="M241.219,286.781V61.578C117.047,61.563,16.016,162.594,16.016,286.781c0,27.063,4.797,52.984,13.578,77.031 C61.125,450.172,144.078,512,241.219,512c124.188,0,225.219-101.031,225.219-225.219c0-27.031-4.797-52.984-13.578-77.031 L241.219,286.781z" ></path> </svg> </span> <span class="txt">Side-Menu-1</span> </a> <ul> <li> <a href="#menu-1-1"> <span>Side-1-1</span> </a> </li> <li> <a href="#menu-1-2"> <span>Side-1-2</span> </a> </li> </ul> </li> <li> <a href="#menu-2"> <span class="img"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M480.077,132.02c-23.996-41.568-76.299-41.765-128.908-27.608C344.548,61.842,323.763,0,260.719,0 c-47.99,0-74.289,45.078-88.348,97.686C132.215,82.225,68.165,69.275,36.641,123.98c-23.991,41.568,1.911,86.942,40.46,125.392 c-33.529,27.011-76.701,76-45.176,130.608c23.996,41.568,76.299,41.765,128.804,27.608C167.454,450.156,188.233,512,251.283,512 c47.986,0,74.289-45.176,88.343-97.784c40.26,15.559,104.206,28.411,135.73-26.196c23.996-41.471-1.906-86.843-40.455-125.294 C468.43,235.617,511.596,186.627,480.077,132.02z M446.743,375.166c-20.882,36.04-70.573,24.892-101.396,13.549 c6.828-35.736,8.936-72.284,8.936-98.382h-18.672c0,22.991-3.715,56.52-11.848,89.147c-2.107,8.334-4.515,16.569-7.225,24.598 c-13.956,41.862-36.245,76.696-68.367,76.696c-41.662,0-56.922-48.588-62.447-80.911c34.436-11.952,67.064-28.412,89.652-41.559 l-9.338-16.166c-19.877,11.44-50.798,25-83.122,34.235c-8.334,2.412-16.667,4.52-25.001,6.118 c-43.167,8.844-84.426,7.03-100.49-20.882c-20.784-36.039,13.554-73.48,38.853-94.568c27.608,23.794,58.122,43.872,80.814,56.921 l9.338-16.157c-19.878-11.45-47.089-31.529-71.279-55.019c-6.123-5.922-12.049-12.039-17.672-18.373 c-29.314-33.029-48.289-69.667-32.226-97.578c20.785-36.04,70.476-24.892,101.3-13.549c-6.828,35.735-8.937,72.284-8.937,98.382 h18.775c0-22.991,3.711-56.52,11.842-89.147c2.108-8.334,4.52-16.667,7.231-24.696c13.956-41.862,36.24-76.598,68.367-76.598 c41.662,0,56.921,48.589,62.441,80.912c-34.43,11.95-67.161,28.412-89.75,41.559l9.436,16.166c19.78-11.44,50.701-25,83.128-34.235 c8.23-2.412,16.564-4.52,24.897-6.118c43.27-8.844,84.529-7.03,100.593,20.882c20.779,36.039-13.554,73.48-38.853,94.568 c-27.608-23.794-58.226-43.872-80.814-56.921l-9.338,16.156c19.775,11.452,47.084,31.53,71.177,55.02 c6.225,5.921,12.146,12.148,17.769,18.47C443.832,310.617,462.807,347.254,446.743,375.166z" ></path> <path d="M256.003,220.02c-19.868,0-35.975,16.098-35.975,35.97c0,19.872,16.108,35.98,35.975,35.98 c19.864,0,35.971-16.108,35.971-35.98C291.974,236.117,275.867,220.02,256.003,220.02z" ></path> </svg> </span> <span class="txt">Side-Menu-2</span> </a> </li> <li> <a> <span class="img"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.606 63.606" > <path d="M0,63.557l5.785-23.041l13.826,13.497l27.476-26.821L35.801,16.175l-22.516,21.98l9.854,9.619l-2.795,2.861 L7.559,38.155l28.242-27.569l17.013,16.606l-32.2,31.433L0,63.557z M7.971,48.239l-2.484,9.893l10.134-2.425L7.971,48.239z"/> <polygon points="55.055,25.003 42.339,12.59 45.134,9.729 55.055,19.414 57.88,16.656 46.595,5.639 37.053,14.955 34.258,12.091 46.595,0.049 63.606,16.656 "/> </svg> </span> <span class="txt">Side-Menu-3</span> </a> <ul> <li> <a href="#Side-3-1">Side-3-1</a> </li> <li> <a href="#Side-3-2">Side-3-2</a> <ul> <li> <a href="#Side-3-1">Side-3-1</a> </li> <li> <a href="#Side-3-2">Side-3-2</a> <ul> <li> <a href="#Side-3-2-1">Side-3-2-1</a> </li> <li> <a href="#Side-3-2-1">Side-3-2-2</a> </li> <li> <a href="#Side-3-2-3">Side-3-2-3</a> <ul> <li> <a href="#Side-3-2-3-1">Side-3-2-3-1</a> </li> <li> <a href="#Side-3-2-3-2">Side-3-2-3-2</a> </li> <li> <a href="#Side-3-2-3-3">Side-3-2-3-3</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div class="contents"> <div class="block"> <h1>Web Page Contents</h1> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> <div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div> </div> </div> </body> </html> ;(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(".header-menu"); this.set_dropdown(".side-menu"); // mobile-list-button var mobileListButton = document.querySelector(".menu .mobile-list-button"); if(mobileListButton){ $$event(mobileListButton , "click" , (function(e){this.click_mobileListButton(e)}).bind(this)); } }; $$.prototype.set_dropdown = function(root_selector){ if(!root_selector){return;} var menus = document.querySelectorAll(root_selector + " ul > li"); for(var i=0; i<menus.length; i++){ var listsElm = menus[i].querySelectorAll(":scope > ul"); if(!listsElm.length){continue;} menus[i].setAttribute("data-dropdown" , "1"); var a = menus[i].querySelector(":scope > a"); a.href = "javascript:void(0)"; $$event(a , "click" , (function(e){this.set_menu_toggle(e)}).bind(this)); } }; $$.prototype.set_menu_toggle = function(e){ var currentTarget = e.currentTarget.parentNode; // toggle if(currentTarget.getAttribute("data-view") !== "1"){ currentTarget.setAttribute("data-view","1"); this.set_all_menu_remove(currentTarget); } else if(currentTarget.getAttribute("data-view") === "1"){ currentTarget.setAttribute("data-view","0"); } }; // all-link-hidden-quick $$.prototype.set_all_menu_remove = function(exclusion_target){ // 上位エレメントを取得 var parents = this.getParents(exclusion_target.parentNode , ".menu" , "*[data-dropdown='1']"); var listElm = document.querySelectorAll(".menu > ul > li"); for(var i=0; i<listElm.length; i++){ if(listElm[i].getAttribute("data-dropdown") !== "1"){continue;} if(listElm[i].getAttribute("data-dropdown") === null){continue;} // 対象エレメントは閉じない if(exclusion_target && exclusion_target === listElm[i]){continue;} // 対象エレメントの親要素は閉じない if(parents.indexOf(listElm[i]) !== -1){continue;} // 閉じる処理 listElm[i].removeAttribute("data-view"); } }; $$.prototype.click_mobileListButton = function(e){ var menus = document.querySelectorAll(".menu"); if(!menus.length){return;} var checkValue = menus[0].getAttribute("data-view"); for(var i=0; i<menus.length; i++){ if(checkValue === "1"){ menus[i].setAttribute("data-view" , "0"); } else{ menus[i].setAttribute("data-view" , "1"); } } }; // 任意エレメントから上位の指定エレメントまでで任意selectorのモノをピックアップして配列で返す。 // currentElement @ 任意エレメント // rootSelector @ 最上位エレメントのselector(無ければdocument.body) // targetSelector @ 対象の任意selector(無ければ上位全て) $$.prototype.getParents = function(currentElement , rootSelector , targetSelector){ rootSelector = (rootSelector) ? rootSelector : "body"; var parents = []; while(!currentElement.matches(rootSelector)){ if(targetSelector && !currentElement.matches(targetSelector)){ currentElement = currentElement.parentNode; continue; } parents.push(currentElement); currentElement = currentElement.parentNode; } return parents; }; new $$; })(); @import "menu_common.css"; @import "menu_l.css"; @import "menu_m.css"; @import "menu_s.css"; @import "menu_mobile.css"; /* << common */ html,body{ height : 100%; margin : 0; padding : 0; border : 0; } *, *: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; } /* common >> */ /* << Menu -- */ .menu .mobile-list-button{ display:none; } .menu ul{ margin : 0; padding : 0; border : 0; } .menu li{ list-style:none; margin : 0; padding : 0; border : 0; } .menu a{ position : relative; text-decoration : none; white-space : nowrap; /* overflow : hidden; */ font-size : 13px; } /* -- Menu >> */ /* << Animation -- */ @keyframes list-mouseover{ 0%{ background-color : #ffffff; } 100%{ background-color : #910581; } } @keyframes submenu-mouseover{ 0%{ background-color : #ffffff; } 100%{ background-color : #ddd; } } @keyframes submenu-header-open{ 0%{ height : 0; } 100%{ height : 48px; } } @keyframes submenu-header-close{ 0%{ height : 48px; } 100%{ height : 0; } } @keyframes submenu-side-open{ 0%{ width : 0; } 100%{ width : 200px; } } @keyframes submenu-side-close{ 0%{ width : 200px; } 100%{ width : 0; } } /* -- Animation >> */ @media (min-width: 1001px) { /* << menu-common */ .header-menu a > img, .menu a > span > img, .header-menu a > svg, .menu a > span > svg{ width:24px; height:24px; vertical-align:middle; fill : #910581; } .header-menu a:hover > svg, .menu a:hover > span > svg, .menu li[data-view="1"] > a > span > svg{ fill : white; } .menu > ul > li > ul > li > a:hover{ animation: submenu-mouseover 0.2s linear forwards; } /* menu-common >> */ /* << submenu >> */ .menu li[data-dropdown="1"] > a:after{ content : ""; /* position : absolute; */ right : 4px; top : 50%; 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; } /* submenu >> */ /* << header-logo */ .header-menu > ul.logo{ display:block; background-color : #910581; color : white; width : 200px; min-width:200px; text-align:left; } .header-menu > ul.logo a{ color : white; } .header-menu > ul.logo a svg{ fill : white; } /* header-logo >> */ /* << header-menu */ .header-menu{ position : fixed; top:0; left:0; width:100%; height : 60px; border-bottom : 1px solid #ccc; box-shadow : 1px 0px 10px rgba(51,51,51,0.3); background-color:white; display : -webkit-flex; display : flex; /* menu:center */ /* -webkit-justify-content : space-between; justify-content : space-between; */ /* menu:last-right */ -webkit-justify-content : flex-start; justify-content : flex-start; } .header-menu > ul{ height : 100%; display : -webkit-flex; display : flex; -webkit-justify-content : center; justify-content : center; -webkit-align-items : center; align-items : center; } .header-menu > ul > li{ line-height : 60px; } .header-menu > ul > li > a{ display : block; padding : 0 8px; height : 100%; /* background-color : white; */ color : #666; cursor : pointer; } .header-menu > ul > li > a:hover{ /* background-color : #910581; */ color : white; animation: list-mouseover 0.2s linear forwards; } .header-menu > ul > li[data-view="1"] > a{ background-color : #910581; color : white; } .header-menu > ul > li ul{ display : none; } /* header-menu >> */ /* << side-menu */ .side-menu{ position : fixed; top:60px; left:0; display : block; width : 200px; height : calc(100% - 60px); border-right : 1px solid #ccc; box-shadow : 1px 0px 10px rgba(51,51,51,0.3); float:left; } .side-menu > ul > li{ height : 60px; line-height : 60px; } .side-menu > ul > li > a{ display:block; height:100%; padding : 0 8px; background-color : white; color : #666; cursor : pointer; border-bottom : 1px solid #ccc; } .side-menu > ul > li > a:hover{ /* background-color : #910581; */ color : white; animation: list-mouseover 0.2s linear forwards; } .side-menu > ul > li[data-view="1"] > a{ background-color : #910581; color : white; } .side-menu > ul > li ul{ display : none; } /* side-menu >> */ /* << sub-header-menu -- */ .header-menu > ul > li[data-view="1"] > ul{ /* z-index:100; */ display: block; position: absolute; top: 60px; background-color: white; border: 1px solid #ccc; /* max-height: 100%; */ box-shadow : 1px 0px 10px rgba(51,51,51,0.3); overflow:auto; } .header-menu > ul > li[data-view="1"] > ul > li{ overflow:hidden; min-width:200px; } .header-menu > ul > li[data-view="1"] > ul > li{ animation: submenu-header-open 0.1s linear forwards; } .header-menu > ul > li[data-view="0"] > ul > li{ animation: submenu-header-open 0.1s linear forwards; } .header-menu > ul > li[data-view="1"] > ul > li > a{ display:block; height:48px; padding:0 10px; line-height:48px; border-bottom:1px solid #ccc; } .header-menu > ul > li[data-view="1"] > ul > li > a:hover{ animation: submenu-mouseover 0.1s linear forwards; } /* -- sub-header-menu >> */ /* << sub-side-menu */ .side-menu > ul > li[data-view="1"] > ul{ /* z-index:100; */ display: block; position: absolute; top: 0; left: 200px; /* width: 200px; */ background-color: white; border-right: 1px solid #ccc; height: 100%; box-shadow : 1px 0px 10px rgba(51,51,51,0.3); overflow-y : auto; overflow-x : hidden; } .side-menu > ul li[data-view="1"] > ul{ animation: submenu-side-open 0.1s linear forwards; } .side-menu > ul li[data-view="0"] > ul{ animation: submenu-side-open 0.1s linear forwards; } .side-menu > ul > li[data-view="1"] ul > li{ height:48px; } .side-menu > ul > li[data-view="1"] ul > li > a{ display:block; width:100%; height:100%; padding:0 10px; line-height:48px; border-bottom:1px solid #ccc; } .side-menu > ul > li[data-view="1"] > ul > li > a:hover{ animation: submenu-mouseover 0.1s linear forwards; } /* sub-side-menu >> */ /* << sub-side-menu -- */ .side-menu > ul > li ul > li[data-view="1"] > ul{ display:block; } /* -- sub-side-menu >> */ /* << contents */ .contents{ display : block; width:calc(100% - 200px); float:left; margin-top:60px; margin-left:200px; } .contents .block{ padding:8px 20px; } /* contents >> */ } @media (min-width: 701px) and (max-width: 1000px) { /* << menu-common */ .menu > ul > li > a > span{ display:block; font-size:10px; line-height:normal; text-align:center; } .header-menu a > img, .menu a > span > img, .header-menu a > svg, .menu a > span > svg{ width:30px; height:30px; vertical-align:middle; fill : #910581; } .header-menu a > span > img, .header-menu a > span > svg{ margin:4px; } .side-menu a > span > img, .side-menu a > span > svg{ margin:10px; } .header-menu a:hover > svg, .menu a:hover > span > svg, .menu li[data-view="1"] > a > span > svg{ fill : white; } /* menu-common >> */ /* << submenu >> */ .header-menu > ul > li[data-dropdown="1"] > a:after{ top : 52px; } .side-menu > ul > li[data-dropdown="1"] > a:after{ top : 70px; } .menu > ul > li[data-dropdown="1"] > a:after{ content : ""; position : absolute; right : calc(50% - 3px); 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; } .menu > ul > li li[data-dropdown="1"] > a:after{ content : ""; /* position : absolute; */ right : 4px; top : 50%; 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; } /* submenu >> */ /* << header-logo */ .header-menu > ul.logo{ display:block; background-color : #910581; color : white; width : 80px; min-width:80px; text-align:left; } .header-menu > ul.logo a{ color : white; } .header-menu > ul.logo a svg{ fill : white; } /* header-logo >> */ /* << header-menu */ .header-menu{ position : fixed; top:0; left:0; width:100%; height : 60px; border-bottom : 1px solid #ccc; box-shadow : 1px 0px 10px rgba(51,51,51,0.3); background-color:white; display : -webkit-flex; display : flex; /* menu:center */ /* -webkit-justify-content : space-between; justify-content : space-between; */ /* menu:last-right */ -webkit-justify-content : flex-start; justify-content : flex-start; } .header-menu > ul{ height : 100%; display : -webkit-flex; display : flex; -webkit-justify-content : center; justify-content : center; -webkit-align-items : center; align-items : center; } .header-menu > ul > li{ height : 60px; line-height : 60px; } .header-menu > ul > li > a{ display : block; padding : 0 8px; height : 100%; /* background-color : white; */ color : #666; cursor : pointer; } .header-menu > ul > li > a:hover{ color : white; animation: list-mouseover 0.2s linear forwards; } .header-menu > ul > li[data-view="1"] > a{ background-color : #910581; color : white; } .header-menu > ul > li ul{ display : none; } /* header-menu >> */ /* << side-menu */ .side-menu{ position : fixed; top:60px; left:0; display : block; width : 80px; height : calc(100% - 60px); border-right : 1px solid #ccc; box-shadow : 1px 0px 10px rgba(51,51,51,0.3); float:left; } .side-menu > ul > li{ height : 80px; line-height : 80px; } .side-menu > ul > li > a{ display:block; height:100%; padding : 0 8px; background-color : white; color : #666; cursor : pointer; border-bottom : 1px solid #ccc; } .side-menu > ul > li > a:hover{ /* background-color : #910581; */ color : white; animation: list-mouseover 0.2s linear forwards; } .side-menu > ul > li[data-view="1"] > a{ background-color : #910581; color : white; } .side-menu > ul > li ul{ display : none; } /* side-menu >> */ /* << sub-header-menu -- */ .header-menu > ul > li[data-view="1"] > ul{ /* z-index:100; */ display: block; position: absolute; top: 60px; background-color: white; border: 1px solid #ccc; /* height: 100%; */ box-shadow : 1px 0px 10px rgba(51,51,51,0.3); } .header-menu > ul > li[data-view="1"] > ul > li{ overflow:hidden; min-width:200px; } .header-menu > ul > li[data-view="1"] > ul > li{ animation: submenu-header-open 0.1s linear forwards; } .header-menu > ul > li[data-view="0"] > ul > li{ animation: submenu-header-open 0.1s linear forwards; } .header-menu > ul > li[data-view="1"] > ul > li > a{ display:block; height:48px; padding:0 10px; line-height:48px; border-bottom:1px solid #ccc; } .header-menu > ul > li[data-view="1"] > ul > li > a:hover{ animation: submenu-mouseover 0.1s linear forwards; } /* -- sub-header-menu >> */ /* << sub-side-menu */ .side-menu > ul > li[data-view="1"] > ul{ /* z-index:100; */ display: block; position: absolute; top: 0; left: 80px; /* width: 200px; */ background-color: white; border-right: 1px solid #ccc; height: 100%; box-shadow : 1px 0px 10px rgba(51,51,51,0.3); overflow-y : auto; overflow-x : hidden; } .side-menu > ul li[data-view="1"] > ul{ animation: submenu-side-open 0.1s linear forwards; } .side-menu > ul li[data-view="0"] > ul{ animation: submenu-side-open 0.1s linear forwards; } .side-menu > ul > li[data-view="1"] > ul li{ height:48px; } .side-menu > ul > li[data-view="1"] > ul li > a{ display:block; width:100%; height:100%; padding:0 10px; line-height:48px; border-bottom:1px solid #ccc; } .side-menu > ul > li[data-view="1"] > ul > li > a:hover{ animation: submenu-mouseover 0.1s linear forwards; } /* sub-side-menu >> */ /* << sub-side-menu -- */ .side-menu > ul > li ul > li[data-view="1"] > ul{ display:block; } /* -- sub-side-menu >> */ /* << contents */ .contents{ display : block; width:calc(100% - 80px); float:left; margin-top:60px; margin-left:80px; } .contents .block{ padding:8px 20px; } /* contents >> */ } @media (min-width: 501px) and (max-width: 700px) { /* << menu-common */ .menu > ul > li > a > span{ display:block; font-size:10px; line-height:normal; text-align:center; line-height:48px; } .header-menu a > img, .menu a > span > img, .header-menu a > svg, .menu a > span > svg{ width:24px; height:24px; vertical-align:middle; fill : #910581; } .header-menu a > span > img{ margin:4px; } .side-menu a > span > img{ margin:10px; } .header-menu a:hover > svg, .menu a:hover > span > svg, .menu li:hover > a > span > svg{ fill : white; } .menu a > span.txt{ display:none; } /* menu-common >> */ /* << header-logo */ .header-menu > ul.logo{ display:block; background-color : #910581; color : white; width : 48px; min-width:48px; text-align:left; } .header-menu > ul.logo a{ color : white; } .header-menu > ul.logo a svg{ fill : white; } /* header-logo >> */ /* << header-menu */ .header-menu{ position : fixed; top:0; left:0; width:100%; height : 48px; border-bottom : 1px solid #ccc; box-shadow : 1px 0px 10px rgba(51,51,51,0.3); background-color:white; display : -webkit-flex; display : flex; /* menu:center */ /* -webkit-justify-content : space-between; justify-content : space-between; */ /* menu:last-right */ -webkit-justify-content : flex-start; justify-content : flex-start; } .header-menu > ul{ height : 100%; display : -webkit-flex; display : flex; -webkit-justify-content : center; justify-content : center; -webkit-align-items : center; align-items : center; } .header-menu > ul > li{ width:48px; height:48px; line-height : 48px; position:relative; } .header-menu > ul > li > a{ display : block; padding : 0 0px; height : 100%; /* background-color : white; */ color : #666; cursor : pointer; } .header-menu > ul > li > a:hover > span.txt, .header-menu > ul > li:hover > a > span.txt{ display : block; background-color : #910581; width:200px; height:48px; } .header-menu > ul > li > a:hover{ color : white; animation: list-mouseover 0.2s linear forwards; } .header-menu > ul > li:hover > a{ background-color : #910581; color : white; } .header-menu > ul > li ul{ display : none; } .header-menu > ul > li > a span.txt, .header-menu > ul > li > a span.txt{ font-size:13px; text-align:left; padding:0 10px; } /* header-menu >> */ /* << side-menu */ .side-menu{ position : fixed; top:48px; left:0; display : block; width : 48px; height : calc(100% - 48px); border-right : 1px solid #ccc; box-shadow : 1px 0px 10px rgba(51,51,51,0.3); float:left; } .side-menu > ul > li{ height : 48px; line-height : 48px; position : relative; } .side-menu > ul > li > a{ display:block; height:100%; padding : 0 0px; background-color : white; color : #666; cursor : pointer; border-bottom : 1px solid #ccc; } .side-menu > ul > li > a:hover, .side-menu > ul > li:hover > a{ /* background-color : #910581; */ color : white; animation: list-mouseover 0.2s linear forwards; width:248px; } .side-menu > ul > li > a:hover span.img, .side-menu > ul > li:hover > a span.img{ display:inline-block; width:48px; } .side-menu > ul > li > a:hover span.txt, .side-menu > ul > li:hover > a span.txt{ display:inline-block; width : calc(100% - 48px); font-size:13px; text-align:left; } .side-menu > ul > li ul{ display : none; } /* side-menu >> */ /* << sub-header-menu -- */ .header-menu > ul > li:hover > ul{ /* z-index:100; */ display: block; position: absolute; top: 96px; background-color: white; border: 1px solid #ccc; /* max-height: 100%; */ box-shadow : 1px 0px 10px rgba(51,51,51,0.3); overflow-y:auto; overflow-x:hidden; } .header-menu > ul > li:hover > ul > li{ overflow:hidden; min-width:200px; } .header-menu > ul > li:hover > ul > li{ animation: submenu-header-small-open 0.1s linear forwards; } /* .header-menu > ul > li[data-view="0"] > ul > li{ animation: submenu-header-small-open 0.1s linear forwards; } */ .header-menu > ul > li:hover > ul > li > a{ display:block; height:40px; padding:0 10px; line-height:40px; border-bottom:1px solid #ccc; } .header-menu > ul > li:hover > ul > li > a:hover{ animation: submenu-mouseover 0.1s linear forwards; } /* -- sub-header-menu >> */ /* << sub-side-menu */ .side-menu > ul > li > ul > li{ height:0; } .side-menu > ul > li:hover ul{ display: block; position: absolute; width: 200px; background-color: white; border-right: 1px solid #ccc; } .side-menu > ul > li:hover > ul{ top: 48px; left: 48px; box-shadow : 1px 0px 10px rgba(51,51,51,0.3); } .side-menu > ul > li:hover > ul > li{ animation: submenu-header-small-open 0.1s linear forwards; } .side-menu > ul > li ul > li > a{ display:block; width:100%; height:100%; padding:0 10px; line-height:40px; border-bottom:1px solid #ccc; } .side-menu > ul > li > ul li > a:hover{ animation: submenu-mouseover 0.1s linear forwards; } /* sub-side-menu >> */ /* << contents */ .contents{ display : block; width:calc(100% - 48px); float:left; margin-top:48px; margin-left:48px; } .contents .block{ padding:8px 20px; } /* contents >> */ /* << sub-side-menu -- */ .side-menu > ul > li li[data-dropdown="1"]:hover > ul{ display:block; } /* -- sub-side-menu >> */ /* << Animation -- */ @keyframes submenu-header-small-open{ 0%{ height : 0; } 100%{ height : 40px; } } @keyframes submenu-header-small-close{ 0%{ height : 40px; } 100%{ height : 0; } } /* -- Animation >> */ } @media (max-width: 500px) { /* << menu-common */ .menu img, .menu svg{ width:20px; height:20px; fill : #910581; } .menu *{ font-size:13px; } .menu .logo{ width:100%; height:60px; background-color : #910581; text-align:center; line-height:60px; position:relative; } .menu .logo li{ height:100% !important; } .menu > ul.logo > li > a, .menu[data-view="1"] > ul.logo > li > a, .menu[data-view="0"] > ul.logo > li > a{ display:block; width:100%; height:60px !important; animation-name:none; } .menu .logo span{ display:inline-block; height:100%; } .menu .logo img, .menu .logo svg{ position:absolute; left:10px; top : calc(50% - 15px); width:30px; height:30px; vertical-align:middle; margin-right:10px; } .menu .logo .txt{ position:absolute; top:0; left:0; width:100%; line-height:60px; font-size:20px; font-weight:bold; color:white; } .menu a{ height : 40px; line-height:40px; } .menu .mobile-list-button{ position:absolute; display:block; right:10px; top : 15px; width:30px; height:30px; border:1px solid white; border-radius:4px; } .menu .mobile-list-button > span{ display:block; width:calc(100% - 8px); height:2px; background-color:white; margin:5px 4px; } .menu li > a{ display:none; overflow:hidden; } .menu[data-view="1"] ul > li > a{ display:block; /* height : 40px; */ animation: submenu-header-small-open 0.3s linear forwards; line-height:40px; border-bottom:1px solid #ccc; width:100%; padding:0 10px; } .menu[data-view="0"] ul > li > a{ animation: submenu-header-small-close 0.3s linear forwards; } .contents{ margin : 0 10px; } /* << Animation -- */ @keyframes submenu-header-small-open{ 0%{ height : 0; } 100%{ height : 40px; } } @keyframes submenu-header-small-close{ 0%{ height : 40px; } 100%{ height : 0; } } /* -- Animation >> */ }

問題点

実は1点だけ問題が残っておりまして・・・ サブメニューが表示する際に、画面からはみ出してしまうものの一部で、はみ出した部分が表示されない箇所があります。 サイドメニューの中クラス表示の場合は、画面からはみ出した時にスクロールバーが出るようにしていますが、他の箇所はこの不具合対象箇所です。 数多くのメニューを表示すると、押せないメニューが出てしまうという不具合です。 これは"position:fixed"内の"position:absolute"の問題で、基本的にはoverflow:hiddenにデフォルトセットされてしまうのですが、画面メニューのサイズが一定でない事が原因です。 これを解決するには、サブメニューが表示されたタイミングで、サイズを記述する以外に方法が無く、cssだけではどうやら出来なさそうです。 でも、サブメニューがない状態や少ない状態で使う分には全く問題なく機能できると思うので、この問題解決したらブログにて完成版としてアップしようと思います。

人気の投稿

このブログを検索

ごあいさつ

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

ブログ アーカイブ