先日から、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 >> */
}
0 件のコメント:
コメントを投稿