Jqueryでハンバーガーナビ構築 ①

2025年5月15日 JQuery,ハンバーガーナビ

グローバルナビゲーション -クリックしたらナビが右から左に出現-


STEP1　HTMLコード


①　head終了タグ直前に自作のCSSを読み込みます。＊wordpressでfunctionにて設定の場合は省略 

<head>

<link rel="stylesheet" type="text/css" href="css/5-1-14.css">

</head>

②　body内にボタンとナビゲーションのHTMLを記載します。 

<body>

  <div class="openbtn"><span></span><span></span><span></span></div>

    <nav id="g-nav">
      <div id="g-nav-list"><!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
        <ul>
          <li><a href="#">Top</a></li> 
          <li><a href="#">About</a></li> 
          <li><a href="#">Service</a></li> 
          <li><a href="#">Contact</a></li> 
        </ul>
      </div>
    </nav>

</body>

③　body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。＊wordpressでfunctionにて設定の場合は省略 

　　<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
　　<!--自作のJS-->
　　<script src="js/5-1-14.js"></script>
</body>

④　WordpressでのfunctionでのCDNとファイルの読み込みは下記より。 

//CDN形式のCSSとJSの読み込み
function add_my_files() {
  wp_enqueue_style(
  'fontawesome4.7',  //$handle
  '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'  //$src
  );
  wp_enqueue_style(
    'fontawesome5.15.4',  //$handle
    '//use.fontawesome.com/releases/v5.15.4/css/all.css'  //$src
    );
  wp_enqueue_style(
    'fontawesome6.5.1',  //$handle
    '//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'  //$src
    );
  wp_enqueue_script(
    'jquery3.1.1',  //$handle
    '//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js',  //$src
    array(),  //$deps
    null,  //$ver
    true  //$in_footer
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_files' );
//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コード


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    right: -120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#999;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;
}

#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #666;
  	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%;
}


Jqueryを使ってJSコード作成


STEP3　JSコード


$(".openbtn").click(function () {//ボタンがクリックされたら
	$(this).toggleClass('active');//ボタン自身に activeクラスを付与し
    $("#g-nav").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与
});

$("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
    $(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
    $("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去
});

動作確認は下記から


See the Pen Untitled by K O (@K-O-the-builder) on CodePen.