動きを実現する仕組み
JSでJSでハンバガーボタンとナビの出現と中身が階層付きアコーディオンを実装。
STEP1 HTMLコード
① head終了タグ直前に自作のCSSを読み込みます。＊wordpressでfunctionにて設定の場合は省略
<head>
<link rel="stylesheet" type="text/css" href="css/5-1-14.css">
</head>② body内にリンク元のHTMLとリンク先のHTMLを記載します。
<body>
<header class="header">
<div class="header_inner">
<div class="bland_logo">
<a href="#"
>LOGO</a>
</div>
<div class="openbtn">
<span></span>
<span></span>
<span></span>
</div>
<nav id="g-nav">
<div id="g-nav-list">
<!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
<ul class="navi-wrapper">
<li><a href="#">Top</a></li>
<li class="has-submenu">
<a href="#">About<span class="submenu-arrow"></span></a>
<ul class="submenu">
<li><a href="#">会社概要</a></li>
<li><a href="#">沿革</a></li>
</ul>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<section class="scroll-point" id="area-1">
<h2>Area 1</h2>
<p>内容が入ります。</p>
<!--/area1--></section>
<section class="scroll-point" id="area-2">
<h2>Area 2</h2>
<p>内容が入ります。</p>
<!--/area2--></section>
<section class="scroll-point" id="area-3">
<h2>Area 3</h2>
<p>内容が入ります。</p>
<!--/area3--></section>
<section class="scroll-point" id="area-4">
<h2>Area 4</h2>
<p>内容が入ります。</p>
<!--/area4--></section>
<!--/main--></main>
<footer id="footer">
<small>© copyright.</small>
</footer>
</body>③ body 終了タグ直前に JS、動きを制御する自作のJS の2 つを読み込みます。＊wordpressでfunctionにて設定の場合は省略
<!--自作のJS-->
<script src="js/5-1-14.js"></script>
</body>④ WordpressでのfunctionでのCDNとファイルの読み込みは下記より。
//CSSとJSの読み込み
function my_enqueue_scripts()
{
$version = wp_get_theme()->get( 'Version' );
wp_enqueue_style('index-style', get_template_directory_uri() . '/css/index.css', array(), $version);
wp_enqueue_style('singular-style', get_template_directory_uri() . '/css/singular.css', array(), $version);
wp_enqueue_style('content-style', get_template_directory_uri() . '/css/content.css', array(), $version);
wp_enqueue_style('archive-style', get_template_directory_uri() . '/css/archive.css', array(), $version);
wp_enqueue_style('comments-style', get_template_directory_uri() . '/css/comments.css', array(), $version);
wp_enqueue_style('404-style', get_template_directory_uri() . '/css/404.css', array(), $version);
wp_enqueue_style('search-form-style', get_template_directory_uri() . '/css/searchform.css', array(), $version);
wp_enqueue_style('search-style', get_template_directory_uri() . '/css/search.css', array(), $version);
wp_enqueue_style('sidebar-style', get_template_directory_uri() . '/css/sidebar.css', array(), $version);
wp_enqueue_style('header-style', get_template_directory_uri() . '/css/header.css', array(), $version);
wp_enqueue_style('footer-style', get_template_directory_uri() . '/css/footer.css', array(), $version);
wp_enqueue_style('navi-style', get_template_directory_uri() . '/css/navi.css', array(), $version);
wp_enqueue_style('navi-accordion-style', get_template_directory_uri() . '/css/navi-accordion.css', array(), $version);
wp_enqueue_style('catego-navi-style', get_template_directory_uri() . '/css/catego-navi.css', array(), $version);
wp_enqueue_style('button-style', get_template_directory_uri() . '/css/button.css', array(), $version);
wp_enqueue_script('navi-script', get_template_directory_uri() . '/js/navi.js', array('jquery'), $version, true);
wp_enqueue_script('catego-navi-script', get_template_directory_uri() . '/js/catego-navi.js', array('jquery'), $version, true);
wp_enqueue_script('page-top-script', get_template_directory_uri() . '/js/page-top.js', array('jquery'), $version, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');⑤ header.phpの>head>内で下記を使って読み込み。
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの呼び出し-->
<?php wp_head(); ?><!--システム・プラグイン用-->CSSでコーディング
STEP2 cssコード
/*ヘッダー設定*/
.header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
transition: 0.5s;
z-index: 9000;
}
.header.hide {
top: -80px;
}
.header .header_inner {
display: flex;
align-items: center;
height: 40px;
padding: 20px;
}
.header .header_inner .bland_logo {
width: 100%;
}
/*ハンバーガーナビの設定*/
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position: fixed;
z-index: 999;
/*ナビのスタート位置と形状*/
top: 0;
right: -120%;
width: 20%;
/*半分とか調整をする際は、g-nav-listも合わせる*/
height: 100vh;
/*ナビの高さ*/
background: #fff;
/*動き*/
transition: all 0.6s;
}
@media (max-width: 768px) {
#g-nav {
width: 40%;
}
}
#g-nav.panelactive {
right: 0;
}
#g-nav.panelactive #g-nav-list {
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 20%;
/*半分とか調整をする際は、g-navも合わせる*/
height: 100vh;
/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
#g-nav.panelactive #g-nav-list {
width: 40%;
}
}
#g-nav .navi-wrapper {
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
left: 0;
width: 100%; /*li要素をnaviの幅いっぱいに広げるため追加*/
margin-top: 100px;
}
#g-nav li {
font-size: 1.5rem;
list-style: none;
text-align: left;
width: 100%; /*li要素をnaviの幅いっぱいに広げるため追加*/
}
#g-nav li li:not(:first-child) {
margin-top: 20px;
}
#g-nav li a {
color: #000;
text-decoration: none;
padding: 10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/*========= サブメニュー（階層） ===============*/
.has-submenu .submenu {
display: block;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
padding-left: 20px;
font-size: 0.9rem;
}
.has-submenu.open .submenu {
max-height: 500px; /* サブメニューの高さに合わせて調整 */
opacity: 1;
}
.has-submenu > a {
position: relative;
padding-right: 32px; /* 矢印分の余白を追加 */
}
#g-nav .submenu li a {
color: #333 !important;
font-size: 1.2rem !important;
padding: 2px 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
#g-nav .submenu > li:not(:first-child) {
margin-top: 5px !important;
}
/* サブメニューの矢印アイコン(矢印は最初は右端寄せ) */
.submenu-arrow {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
margin-left: 0;
/*display: inline-block;
margin-left: 8px;
transition: transform 0.2s;*/ /*通常状態*/
}
.has-submenu > a .submenu-arrow::before {
content: "\25B6"; /* ▶ 横矢印 */
font-size: 1em;
}
.has-submenu.open > a .submenu-arrow::before {
content: "\25BC"; /* ▼ 下矢印 */
font-size: 1em;
}
/*========= ボタンのためのCSS ===============*/
.openbtn {
position: absolute;
z-index: 9999;
/*ボタンを最前面に*/
top: 15px;
right: 10px;
cursor: pointer;
width: 70px;
height: 70px;
}
.openbtn span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #000;
width: 45%;
}
.openbtn span:nth-of-type(1) {
top: 15px;
}
.openbtn span:nth-of-type(2) {
top: 23px;
}
.openbtn span:nth-of-type(3) {
top: 31px;
}
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
body{
margin: 0;
padding: 0;
line-height: 1.8;
width: 100%;
height: 100%;
overflow-x: hidden;
}JSを使ってJSコード作成
STEP3 JSコード
/*ハンバーガナビの開閉*/
document.addEventListener("DOMContentLoaded", function () {
const openBtn = document.querySelector(".openbtn");
const gNav = document.getElementById("g-nav");
openBtn.addEventListener("click", function () {
openBtn.classList.toggle("active");
gNav.classList.toggle("panelactive");
});
// サブメニュー親リンク
const submenuParents = document.querySelectorAll(".has-submenu > a");
submenuParents.forEach(function (parentLink) {
parentLink.addEventListener("click", function (e) {
e.preventDefault();
const li = parentLink.parentElement;
li.classList.toggle("open");
});
});
// サブメニュー以外のリンクのみナビを閉じる
const navLinks = gNav.querySelectorAll("a:not(.has-submenu > a)");
navLinks.forEach(function (link) {
link.addEventListener("click", function () {
openBtn.classList.remove("active");
gNav.classList.remove("panelactive");
});
});
});動作確認は下記から
See the Pen Untitled by K O (@K-O-the-builder) on CodePen.
comments