常連

自己紹介

ハンバーガーメニューを設置しており、一部ページ内リンクとスムーススクロールを設定しています。
ハンバーガーメニュー内のリンクをクリックするとハンバーガーメニューが閉じるようにしたいと考えています。

ハンバーガーメニュー内のリンクをクリックすると該当箇所まで移動はしますが、ハンバーガーメニューが閉じずに開いたままです。

以下、CSSのみ一部抜粋して記載しています。

```HTML
<div id="nav">
<ul>
<li><a href="#info">INFORMATION</a></li>
<li><a href="URL"> BOOKSHELF</a></li>
<li><a href="#bkm"">BOOKMARK</a></li>
<li><a href="#mail">CONTACT</a></li><li>
<a href="URL">HOME</a></li>
</ul></div>
<a class="menu" href="#"><span></span><span></span><span></span></a>
<header><h1>タイトル</h1></header><div id="all"><article><section id="info"><h2>タイトル</h2>中身</section><section id="news"><h2>タイトル</h2>中身</section><section id="bkm"><h2>タイトル</h2>中身</section>
<section id="mail"><h2>タイトル</h2><br>
中身</section><div class="footer">中身</div><p class="pagetop"><a href="#"><i class="fas fa-angle-double-up"></i></a></p></div></article></div>
```
``` CSS 

.menu,
.menu span {
display: inline-block;
-webkit-transition:all .4s;
transition: all .4s;
box-sizing: border-box;
}

.menu {
position: fixed;
top: 10px;
right: 12px;
width: 50px;
height: 40px;
margin:6px auto;
padding:6px auto;
z-index: 9999;
}

.menu span {
position: absolute;
left: 12px;
width: 70%;
height: 1px;
background-color: #000;
z-index: 9999;
}

.menu span:nth-of-type(1) {
top: 0px;
}

.menu span:nth-of-type(2) {
top: 18px;
}

.menu span:nth-of-type(3) {
bottom: 0px;
}

.menu.active span:nth-of-type(1) {
-webkit-transform: translateY(20px) rotate(-45deg);
transform: translateY(20px) rotate(-45deg);
}

.menu.active span:nth-of-type(2) {
opacity: 0;
}

.menu.active span:nth-of-type(3) {
-webkit-transform: translateY(-20px) rotate(45deg);
transform: translateY(-20px) rotate(45deg);
}

#nav {
position: fixed;
top: 0;
right: 0;
z-index: 9999;
width: 80vw;
height: 100vh;
background: rgba(240,255,240,1);
opacity: 0;
-webkit-transition: .5s linear;
-moz-transition: .5s linear;
transition: .5s linear;
-moz-transform: translateX(100vw);
-webkit-transform: translateX(100vw);
transform: translateX(100vw);
}

#nav.active{
right: 0;
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}

#nav ul{
margin:20px 0;
padding:20px 0;
}

#nav ul li{
list-style-type: none;
}

#nav ul li a{
font-family:'Nunito',"メイリオ", sans-serif;
display: block;
text-align: center;
text-decoration: none;
color: #003853;
font-size: 18px;
font-weight:700;
margin:20px 0;
padding:10px 0;
}

body{
margin:0;
padding:0;
background:url();
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
letter-spacing:2.4px;
line-height:1.5;
}

header{
width:100%;
height:60px;
top:0;
padding:20px 0;
text-align:center;
position:fixed;
z-index:1;
background-color:rgba(248,254,243,1);
}

section{
background:rgba(255,255,255, .8);
display:block;
font-family:'Nunito',"メイリオ", sans-serif;
font-size:14px;
color: #003853;
text-align:center;
margin:10px auto;
padding:10px auto;
}

.pagetop {
display: none;
position: fixed;
bottom: 30px;
right: 50px;
}

.pagetop a {
display: block;
width: 50px;
height: 50px;
background-color: #333;
border-radius: 50px;
text-align: center;
color: #fff;
font-size: 24px;
text-decoration: none;
line-height: 50px;
}
```
``` jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
     $('.menu').on('click', function() {
         $(this).toggleClass('active');
         $("#nav").toggleClass('active');
      })
    });

$(function() {
  var pagetop = $('.pagetop');
  $(window).scroll(function () {
  if ($(this).scrollTop() > 80) {
    pagetop.fadeIn();
  } else {
    pagetop.fadeOut();
  }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 600);
    return false;
  });
});

$(function(){
   $('a[href^="#"]').click(function() {
      var speed = 600;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
```

似たような質問を見たり調べたりして、様々なコードを試してみましたが、ハンバーガーメニュー自体が動かなくなったり、メニューは開けても三本線のアイコンが消えたりしました。
初心者の為、すみませんが教えて下さい。

ハンバーガーメニュー・ページ内リンクをクリックで閉じる

下記のソース、親要素にheight:100%を指定していないのに、.wrapの高さが100%になります。positionにfixedかabsoluteを指定すると高さが100%になる様ですが、なぜでしょうか？

```ここに言語を入力
<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<style type="text/css">

.wrap {
	position: absolute;
	top:0;
	left:0;
	width: 100px;
	height: 100%;
	background: #fff000;
}
</style>
</head> 
<body>
<div class="wrap">
	
</div>
<script>

</script>
</body>
</html>
```

position:fixedを指定した要素にheight:100%を指定すると高さが100%になるのはなぜか

親タームのスラッグを、下記の2つのテンプレートに表示させたいと思っています。
- taxonomy.php
- archive-food.php

詳しい内容としては、カスタム投稿にカテゴリー機能を持たせて、階層を作りました。
例えば下記の様なカテゴリーだとします。

```
■タクソノミー名は「food_cat」

【炭水化物】（青色の見出し。スラッグはtansui）
・米
・小麦粉

【食物繊維】（緑色の見出し。スラッグはsyokumotsu）
・サツマイモ
・レタス

※子タームは自由投稿の為、スラッグは設定していません。

```

この場合、「米」のカテゴリーで投稿したときは、青色の見出しに、
「レタス」のカテゴリーで投稿した時には緑色の見出しにしたいと思っています。

そこで、親タームのスラッグを取得して、クラスとしてhtmlタグ内に出力すれば、
色が変えられると思うのですが、どうしても親タームのスラッグが取得できません。
子タームを取得してしまいます。

一つ成功したのは、「taxonomy.php」で子タームの記事一覧を表示したときに
下記のコードで取得できました。親カテゴリーでソートして表示すると、取得できませんでした。
（すみません、こちら拾い物の為、よくわかっていません。）

```php
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$terms = get_the_terms($post->ID, 'food_cat');
$term_slug = get_query_var('food_cat');
$term_info = get_term_by('slug',$term_slug,'food_cat');
$parent = get_term( $term_info->parent,'food_cat' );?>

<?php if ($terms) {
foreach ( $terms as $term ) { ?>
<div class="<?php if($parent->slug) { echo $parent->slug; } else { echo $term->slug; } ?>">
} ?>

```

「taxonomy.php」で、子タームでソートした時と、親タームでソートした時の表示を行っているので、
どちらにも対応しなければなりません。

ちなみにURLは下記の様になっていました。
↓取得できない
http://test.jp/food_cat/tansui/
↓取得できた
http://test.jp/food_cat/レタス/

「archive-food.php」は、年別アーカイブと新着一覧に使っていますが、
こちらも子タームを取得してしまいます。

リファレンスには、親タームのIDを取得する方法は載っているのですが、
その情報を使ってスラッグをどう取得できるのかがわからなかったので、これ以上何もできないでいます。

説明が下手で申し訳ないです。すみませんがどなたか教えてください。
どうぞよろしくお願いいたします。