ハンバーメニュー内でリンクの貼り付け

ハンバーメニュー内でリンクを貼り付けたいです

<p><a　href="https://www.google.com/">Google</a></p>

上記のような記述をしていますが各当ページに遷移できません。
ご回答よろしくお願いします。

該当のソースコード

HTML
1<!---test.html--->
2<html>
3
4  <head>
5    <meta charset="utf-8">
6    <title>test</title>
7    <!--jQuery-->
8    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
9    <!--javascript-->
10    <script type="text/javascript" src="test.js"></script>
11    <!--CSS-->
12    <link rel="stylesheet" type="text/css" href="test.css">
13  </head>
14  
15  <body>
16    <header>
17
18      <!--ヘッダーの右側-->
19      <div class="header-right">
20        <div class="icon-animation type-5">
21          <div class="inner">
22            <span class="menu-icon-top"></span>
23            <span class="menu-icon-middle" ></span>
24            <span class="menu-icon-bottom"></span>
25          </div>
26        </div>
27      </div>
28      <!--メニュー-->
29      <div id="menu" class="menu">
30        <h1 >MENU</h1>
31        <p>
32          <a　href="#">TESTPAGE</a>
33        </p>
34        <p>
35          <a　href="https://www.google.com/">Google</a>
36        </p>
37      </div>
38
39    </header>
40
41    <a style="color: white; font-size: 90px;">TEST PAGE</a>
42
43  </body>
44
45</html>

CSS
1/*--- test.css ---*/
2/*-- 全体 --*/
3body {
4    margin: 0;
5    font-family: 'Arial Black', sans-serif;
6    background-color: black;
7}
8
9header {
10    height: 65px;
11    width: 100%;
12    background-color: transparent;
13    position: fixed;
14}
15
16.header-right {
17    float: right;
18}
19/*--------------------------------------------------*/
20/*-- メニューアイコン --*/
21.icon-animation {
22    width: 67px;
23    display: block;
24}
25
26.icon-animation span {
27    width: 50px;
28    height: 3px;
29    display: block;
30    background: #fff;
31    position: absolute;
32    left: 50%;
33    top: 50%;
34}
35
36.type-5 .inner {
37    width: 50px;
38    height: 50px;
39    margin: auto;
40    position: relative;
41}
42
43.type-5 .menu-icon-top {
44    -webkit-transform: translateY(-17px);
45    -ms-transform: translateY(-17px);
46    transform: translateY(-17px);
47    left: 0px;
48    right: 0px;
49}
50
51.type-5 .menu-icon-middle {
52    -webkit-transform: translateY(0px);
53    -ms-transform: translateY(0px);
54    transform: translateY(0px);
55    position: relative;
56    background: none;
57}
58
59.type-5 .menu-icon-middle:before,
60.type-5 .menu-icon-middle:after {
61    content: "";
62    -webkit-transition: all 0.2s;
63    transition: all 0.2s;
64    display: block;
65    position: absolute;
66    width: 50px;
67    height: 3px;
68    left: -25px;
69    background: #fff;
70    -webkit-transform: rotate(0deg);
71    -ms-transform: rotate(0deg);
72    transform: rotate(0deg);
73}
74
75.type-5 .menu-icon-bottom {
76    -webkit-transform: translateY(17px);
77    -ms-transform: translateY(17px);
78    transform: translateY(17px);
79    left: 0px;
80    right: 0px;
81}
82
83.type-5.is-open .menu-icon-top {
84    left: 100%;
85    width: 0px;
86}
87
88.type-5.is-open .menu-icon-middle:before {
89    -webkit-transform: rotate(135deg);
90    -ms-transform: rotate(135deg);
91    transform: rotate(135deg);
92}
93
94.type-5.is-open .menu-icon-middle:after {
95    -webkit-transform: rotate(45deg);
96    -ms-transform: rotate(45deg);
97    transform: rotate(45deg);
98}
99
100.type-5.is-open .menu-icon-bottom {
101    right: 100%;
102    width: 0px;
103}
104/*--------------------------------------------------*/
105/*-- メニュー一覧 --*/
106.menu {
107    color: white;
108    border: 3px solid white;
109    width: 60%;
110    height: auto;
111    padding: 10px;
112    border-radius: 3px;
113    line-height: 70px;
114    text-align: center;
115    margin-top: 80px;
116    margin-left: auto;
117    margin-right: auto;
118    display: none;
119    background-color: rgba(148, 0, 211, 0.95);
120}
121
122.menu h1{
123    font-size: 30px;
124}
125
126.menu p{
127    font-size: 20px;
128}
129

JavaScript
1/*--- test.js ---*/
2$(function () {
3    var $menu = $('.header-right');
4    var $animation = $('.icon-animation');
5
6    $menu.on('click',function(){
7        if ($animation.hasClass('is-open')){
8            $animation.removeClass('is-open');
9            console.log('( ˇωˇ )');
10        }
11        else{
12            $animation.addClass('is-open');
13            console.log('(・A・ )!');
14        }
15        $("#menu").fadeToggle();
16    });
17    
18});
19

babu_babu_baboo

2021/02/22 07:58

全角空白文字!?

takumanabe

2021/02/22 08:04

ちゃんと遷移できました！ありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<!--
2  ↓ 全角空白なので半角にする -->
3<a　href="https://www.google.com/">Google</a>

投稿2021/02/22 07:59

kei344

総合スコア69596

takumanabe

2021/02/22 08:04

ご指摘の通りでした???? 今後も注意してみます????

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

ハンバーメニュー内でリンクの貼り付け

ハンバーメニュー内でリンクを貼り付けたいです

該当のソースコード

関連した質問