−グローバルナビ新−
アコーディオンメニュー
jQueryは使わないCSSのみで動く！
＜HTML＞
<div class="hamburger-menu">
<input type="checkbox" id="menu-btn-check">
<label for="menu-btn-check" class="menu-btn"><span></span></label>
<div class="menu-content">
<ul>
<li><a href="<?php echo site_url(); ?>">トップページ</a></li>
<li><a href="<?php echo site_url(); ?>/news.html">ニュース</a></li>
<li><a href="<?php echo site_url(); ?>/solution.html">事業内容・取扱い製品</a></li>
<li><a href="<?php echo site_url(); ?>/jisseki.html">実績紹介</a></li>
<li><a href="<?php echo site_url(); ?>/office.html">会社概要</a></li>
<li><a href="<?php echo site_url(); ?>/recruit.html">採用情報</a></li>
<li><a href="<?php echo site_url(); ?>/voice.html">先輩社員の声</a></li>
<li><a href="<?php echo site_url(); ?>/contact.html">お問い合わせ</a></li>
<li><a href="<?php echo site_url(); ?>/sitelink.html">サイトマップ</a></li>
<li><a href="<?php echo site_url(); ?>/policy.html">プライバシーポリシー</a></li>
</ul>
</div>
</div>
＜CSS＞
/*--------------------------------------------------------
ハンバーガーメニュー
--------------------------------------------------------*/
@media screen and (min-width: 900px) {
.hamburger-menu{display:none;}
}
@media screen and (max-width: 899px) {
.menu-btn {
position: fixed;
top: 10px;
right: 10px;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #00873c;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #ffffff;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check {
display: none;
}
.menu-content {
width: 80%;/*100で全画面*/
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 80;
/*background-color: #00873c;*/
background:rgba(0, 135, 60, 0.9);
background:-moz-rgba(0, 135, 60, 0.9);
background:-webkit-rgba(0, 135, 60, 0.9);
}
.menu-content ul {
padding: 70px 10px 0;
}
.menu-content ul li {
border-bottom: solid 1px #ffffff;
list-style: none;
}
.menu-content ul li a {
display: block;
width: 100%;
font-size: 15px;
box-sizing: border-box;
color:#ffffff;
text-decoration: none;
padding: 9px 15px 10px 0;
position: relative;
}
.menu-content ul li a::before {
content: "";
width: 7px;
height: 7px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
transform: rotate(45deg);
position: absolute;
right: 11px;
top: 16px;
}
.menu-content {
width: 80%;/*100で全画面・上と数字を合わせる*/
height: 100%;
position: fixed;
top: 0;
left: 100%;/*leftの値を変更してメニューを画面外へ*/
z-index: 80;
/*background-color: #00873c;*/
background:rgba(0, 135, 60, 0.9);
background:-moz-rgba(0, 135, 60, 0.9);
background:-webkit-rgba(0, 135, 60, 0.9);
transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
left: 20%;/*メニューを画面内へ 0で全画面*/
}
}
アコーディオンメニュー
jQueryはいつも使っているものでOK！
複数パネルがある時は for="accordion1" と id="accordion1" の数字を変更する。
input のチェックボックスの中にlabel を書くと、チェックボックスを押された時にアクションを起こすようになる！
だから、クリックしたらアイコンを変更することができる！すごい！！
input:checked でチェックボックスを押した時にイベントを起こす。
＜HTML＞
<input type="checkbox" id="accordion1" class="on-off">
<label class="title_ac" for="accordion1">ブログ記事一覧</label>
<ul class="toggle"><?php dynamic_sidebar(); ?></ul>
＜CSS＞
/*--------------------------------------------------------
アコーディオンナビ
--------------------------------------------------------*/
input[type="checkbox"].on-off{display: none;}/*チェックボックスを消す*/
label {
background:#35afa3;/*タイトルの背景色*/
color: #fff;
padding: 6px;
display: block;/*一行クリック可能*/
margin: 0;
border-bottom:solid 1px #FFFFFF;
}
label h2:after{
font-family: "Font Awesome 5 Free";
content: "\f107";
padding-left: 10px;
}
input:checked + label h2:after{
font-family: "Font Awesome 5 Free";
content: "\f106";
padding-left: 10px;
}
/*閉開したい中身*/
.toggle{
height: 0;
padding: 0 8px;
transition: 0.2s;/*クリック時の動きを滑らかに*/
background-color:#f0f0f0;/*開いたメニューの背景色*/
}
/*閉開したい中身：通常は消しておく*/
.toggle li{
padding: 0 8px;
line-height: 0;
overflow: hidden;/*非表示に*/
opacity: 0;/*中身を透明に*/
transition: 0.2s;/*クリック時の動きを滑らかに*/
}
/*閉開したい中身：クリックした時に高さautoで開く*/
input:checked + label + .toggle{
height: auto;
padding: 8px;
}
/*クリックしたらパネルを表示*/
input:checked + label + .toggle li{
padding: 8px;
line-height: 1.5;
visibility: visible;/*クリックしたらパネルを表示*/
opacity: 1;
}
＜javaScript＞
//トルグメニュー
$(window).on('resize', function() {
if( 'none' == $('.title_ac').css('pointer-events') ){
$('.toggle').attr('style','');
};
});
アコーディオンメニュー
<div id="main"> の中がタップ時暗くなる。
＜HTML＞
<div id="menu">
<div><a href="#menu" class="menuopen">OPEN</a><a href="#close" class="menuclose">CLOSE</div>
<ul>
<li><a>menu1</a></li>
<li><a>menu2</a></li>
<li><a>menu3</a></li>
<li><a>menu4</a></li>
<li><a>menu5</a></li>
</ul>
</div>
<div id="main">
テストテストテストテストテスト
</div>
＜CSS＞
/****メニュー全体****/
#menu{
/*配置*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 100;
}
/****メニュー開閉ボタン****/
#menu div{
/*デザイン*/
width: 30px;
height: 30px;
background: rgba(200,200,200,1);
/*配置*/
overflow: hidden;
position: absolute;
right: 0;
}
#menu .menuopen{
/*デザイン*/
color: rgba(255,255,255,1);
font-size: 20px;
/*配置*/
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: auto;
}
#menu .menuclose{
/*デザイン*/
color: rgba(255,255,255,1);
font-size: 20px;
/*配置*/
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: auto;
}
/****メニュー一覧****/
#menu ul{
/*デザイン*/
background: rgba(200,200,200,1);
width: 80%;
/*配置*/
position: absolute;
top: 30px;/*#menu divの高さ*/
right: 0;
display: none;
}
#menu li{
/*デザイン*/
padding: 10px;
color: rgba(0,0,0,1);
border-bottom: 1px rgba(255,255,255,1) solid;
/*配置*/
pointer-events: auto;
}
/****メニューオープン時****/
#menu:target .menuopen{
/*配置*/
display: none;
}
#menu:target .menuclose{
/*配置*/
display: block;
}
#menu:target ul{
/*配置*/
display: block;
}
/*** メインエフェクト ***/
#main{
/*デザイン*/
background: #fff;/*ページ背景色・背景画像はここで設定*/
/*アニメーション*/
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
#menu:target ~ #main{
-webkit-filter:brightness(70%);
-moz-filter:brightness(70%);
-ms-filter:brightness(70%);
filter:brightness(70%);
}
