/* メニューボタン */ .menubtn{ position: relative; background:#FFFFFF; border: 1px dotted #222222; cursor: pointer; width: 60px; height: 60px; border-radius: 0px; } /*ボタン内側*/ .menubtn span{ display: inline-block; transition: all .4s; position: absolute; left: 14px; height: 2px; border-radius: 5px; background: #1b4c75; width: 45%; } .menubtn span:nth-of-type(1) { top:14px; left: 17px; } .menubtn span:nth-of-type(2) { top:21px; left: 17px; } .menubtn span:nth-of-type(3) { top:28px; left: 17px; } .menubtn span:nth-of-type(3)::after { content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/ position: absolute; top:10px; left:-3px; color: #1b4c75; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; } #btn_box { display: none; position: absolute; top: 0px; right: 120px; } /*activeクラス付与後の形状*/ .menubtn.active span:nth-of-type(1) { top: 14px; left: 22px; transform: translateY(6px) rotate(-45deg); width: 30%; } .menubtn.active span:nth-of-type(2) { opacity: 0; } .menubtn.active span:nth-of-type(3){ top: 26px; left: 22px; transform: translateY(-6px) rotate(45deg); width: 30%; } .menubtn.active span:nth-of-type(3)::after { content:"Close";/*3つ目の要素のafterにClose表示を指定*/ transform: translateY(0) rotate(-45deg); top:10px; left:7px; } /* ナビゲーションメニュー */ /*ナビゲーション全体の背景色*/ #navigation_box { } nav{ display: block; } nav ul{ list-style: none; display: flex; justify-content: flex-end; } nav ul ul{ display: block; } nav ul li{ position: relative; width: 180px; text-align: center; font-size: 1.4rem; } nav ul li a{ display: block; text-decoration: none; color: #FFFFFF; height: 60px; padding: 24px 0; transition:all .3s; } nav ul li a:hover{ color:#1b4c75; background-color: #FFFFFF; } nav ul li.has-child::after{ content:''; position: absolute; top: 26px; right: 10px; width: 6px; height: 6px; border-top: 2px solid #999; border-right:2px solid #999; transform: rotate(135deg); } #nav-ap-support { display: inline-block; margin-top: -5px; } /*下の階層を持っているulの指定*/ nav li.has-child ul{ /*絶対配置で位置を指定*/ position: absolute; left: 0; top: 60px; z-index: 20; /*形状を指定*/ background: rgba(255,255,255,0.9); width: 260px; /*はじめは非表示*/ visibility: hidden; opacity: 0; /*アニメーション設定*/ transition: all .3s; } nav li.has-child ul li { width: 260px; } /*hoverしたら表示*/ nav li.has-child:hover > ul, nav li.has-child ul li:hover > ul, nav li.has-child:active > ul, nav li.has-child ul li:active > ul{ visibility: visible; opacity: 1; } /*ナビゲーションaタグの形状*/ nav li.has-child ul li a{ color: #666666; border-bottom: dotted 1px rgba(255,255,255,0.6); text-align: left; padding-left: 25px; } nav li.has-child ul li:last-child a{ border-bottom:none; } nav li.has-child ul li a:hover, nav li.has-child ul li a:active{ background:#1b4c75 ; color: #FFFFFF; } @media screen and (max-width:980px){ #navigation_box { position: fixed; display: block; right: -600px; /* これで隠れる */ top: 60px; width: 320px; /* スマホに収まるくらい */ height: 100%; padding-top: 40px; background-color: #fff; transition: all 0s; z-index: 200; overflow-y: scroll; /* メニューが多くなったらスクロールできるように */ -webkit-overflow-scrolling: touch; } .nav-open #navigation_box { overflow-y: scroll; top: 60px; right: -280px; width: auto; /* IE, Edge 対応 */ -ms-overflow-style: none; /* Firefox 対応 */ scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* Chrome, Safari 対応 */ #navigation_box::-webkit-scrollbar { display:none; } .nav-open .blackbg { opacity: .7; visibility: visible; } nav{ padding: 0; } nav ul{ display: block; margin-top: -40px;/*ナビゲーションの上部位置調整・スマホ*/ } nav ul li.has-child{ width: 320px; text-align: center; font-size: 1.6rem; } nav ul li{ position: relative; width: 320px; text-align: center; font-size: 1.6rem; } nav ul li a{ display: block; text-decoration: none; color: #333; height: 70px; padding: 24px 0 18px 0; transition:all .3s; } #group-link { display: block; text-decoration: none; color: #333; padding: 12px 0; transition:all .3s; margin-bottom: 60px; } nav li.has-child ul, nav li.has-child ul ul{ margin-top: 0px;/*ナビゲーションの上部位置調整・スマホ*/ position: relative; top: 0; left:0; width:100%; visibility:visible;/*JSで制御するため一旦表示*/ opacity:1;/*JSで制御するため一旦表示*/ display: none;/*JSのslidetoggleで表示させるため非表示に*/ transition:none;/*JSで制御するためCSSのアニメーションを切る*/ } nav ul li a{ border-bottom:1px dotted #ccc; width: 320px; } /*矢印の位置と向き*/ nav ul li.has-child::after{ right:40px; top: 22px; } nav ul ul li.has-child::after{ transform: rotate(135deg); right:40px; top: 25px; } nav ul li.has-child.active::after{ transform: rotate(-45deg); } .blackbg { position: fixed; left: 0; top: 60px; width: 100vw; height: 100vh; z-index: 100; background-color: #000; opacity: 0; visibility: hidden; transition: all .6s; cursor: pointer; } #btn_box { display: block; position: absolute; top: 0px; right: 120px; } }