質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

ハンバーガーメニューを組み込むと、はじめから見えないリンクが出てしまう

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 654

score 2

前提・実現したいこと

自分が作ったサイトにハンバーガーメニュー(Web上に無料公開されていたソース)を組み込みました。
この組み込んだソースはHTML,CSS,Javascript(jQuery)からできています。
画面幅が600px以下の時に、ナビゲーションメニュー(通常は横並び)がハンバーガーメニューに変化し、ハンバーガーメニューをクリックしたときに「メニューが縦に並ぶ」ようにしたいです。
しかし、1点問題が起きました。

発生している問題・エラーメッセージ

画面幅が600px以下になりハンバーガーメニューが表示された時、既にドロップダウンメニューが「見えない状態」で出てしまっています。
マウスをハンバーガーメニュー(3本線)の下に移動すると、メニューは表示されていないのにマウスの状態が「リンクを指す手の形」になります。そしてマウスが手の形になった状態でクリックすると、そのページに飛んでしまいます。
つまり、ハンバーガーメニューをクリックしてもいないし見えてもいないのに、はじめからドロップダウンメニューが表示されてしまっているのです。

「header ul」に「flex-direction:column;」を自分で設定したのが原因のようですが、こうしないとハンバーガーメニューに入ったナビメニューが縦に並ばないのです。

該当のソースコード

<head>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><!--jQuery読み込み-->
</head>
<body>
    <header>
        <div class="title_background">
            <h1>TEST</h1>
        </div>
        <!----ハンバーガーメニュー追加中---->
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <nav class="globalMenuSp">
            <ul>
                <li><a href="#">トップ</a></li>
                <li><a href="#">メニュー</a></li>
                <li><a href="#">アクセス</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
</body>
(下記のCSS以外にresetCSSをはじめに入れています。)
.title_background{
    background-color: black; height:100px;
}
h1{
  padding:20px;
  font-size:4rem;
  line-height:3vh;
  text-align:center;
  color:#fff;
  font-family: serif;
}
header{
    top:0;
    width:100%;
    position:fixed;
    z-index:50;
    margin:auto;
}
header ul{/*** header menu ***/
    display: flex;
    justify-content: center;
    background-color:lightgray;
}
header li{
    margin:2vh 3vw;
}
header a{
    color:#000;
    text-decoration: none;
}
header h1 a{
    color:#fff;
    text-decoration: none;
}
@media (max-width:600px){
/*********** ハンバーガーボタン ***********/
header ul{/*** header menu ***/
    display: flex;
    justify-content: center;
    flex-direction:column;
    z-index:70;
}
/* ハンバーガーボタン */
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}
nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}
nav.globalMenuSp ul li a {
  display: block;
  color: #000;
  padding: 1em 0;
  text-decoration :none;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
}
}
$(function() {
    $('.hamburger').click(function() {
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
        } else {
            $('.globalMenuSp').removeClass('active');
        }
    });
});

試したこと

「flex-direction:column;」の記述を移動しましたが、思った通りになりません。
これをulから消してしまうとハンバーガーメニューをクリックしてもメニューが横並びになってしまいます。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

visibility を追加するだけでいけました。

nav.globalMenuSp {
  visibility: hidden;
}
nav.globalMenuSp.active {
  opacity: 100;
  visibility: visible;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/02/17 11:16

    ありがとうございます!おかげさまでできました!

    キャンセル

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

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る