クリックする前からハンバーガーメニューを表示をさせたいです。

コードはちゃんと書いたはずですが、
ディフォルトでハンバーガーメニューが表示されません。

一回クリックして戻すと、ハンバーガーメニューが表示され、
クリックするとバッテンが表示され動きますが、
最初ページを開いた段階では、
最初にバッテンが表示されてしまっています。

※スマホ表示でお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <!--Metaタグ-->
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
9    <!--OGP-->
10    <meta property="og:title" content="ページの タイトル" />
11    <meta property="og:description" content="ページのディスクリプション" />
12    <meta property="og:type" content="ページの種類" />
13    <meta property="og:url" content="ページの URL" />
14    <meta property="og:image" content="サムネイル画像の URL" />
15    <meta property="og:site_name" content="サイト名" />
16    <meta property="og:locale" content="ja_JP"  />
17
18    <!--Bootstrap CSS-->
19    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
20    
21    <!--CSS-->
22    <link rel="stylesheet" href="style.css">
23
24    <!--Fontawesome-->
25    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
26
27    <!--Swiper.js-->
28    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
29    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
30
31    <title>Document</title>
32</head>
33<body>
34  
35  <nav class="navbar navbar-expand-lg navbar-light bg-light">
36    <div class="container-fluid">
37      <a class="navbar-brand" href="#">Navbar</a>
38      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
39        <span class="navbar-toggler-icon"></span>
40        <span class="close-icon py-1">✖</span>
41      </button>
42      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
43        <div class="navbar-nav">
44          <a class="nav-link active" aria-current="page" href="#">Home</a>
45          <a class="nav-link" href="#">Features</a>
46          <a class="nav-link" href="#">Pricing</a>
47          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
48        </div>
49      </div>
50    </div>
51  </nav>
52
53       <!--Bootstrap Js-->
54       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
55</body>
56</html>

css
1@charset "utf-8";
2/*!
3 * Bootstrap Reboot v5.0.1 (https://getbootstrap.com/)
4 * Copyright 2011-2021 The Bootstrap Authors
5 * Copyright 2011-2021 Twitter, Inc.
6 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
7 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
8 */
9 
10
11 @media (max-width: 992px) {
12  .navbar-collapse {
13      position: fixed;
14      top: 50px; 
15      right: 0;
16      padding-left: 15px;
17      padding-right: 15px;
18      padding-bottom: 15px;
19      width: 100%;
20      height: 100%;
21  }
22
23  .navbar-collapse.collapsing {
24      right: -75%;
25      transition: height 0s ease;
26  }
27
28  .navbar-collapse.show {
29      right: 0;
30      transition: right 300ms ease-in-out;
31  }
32
33  .navbar-toggler.collapsed ~ .navbar-collapse {
34      transition: right 500ms ease-in-out;
35  }
36}
37/* ここでアイコンを隠す */
38.navbar-toggler.collapsed .close-icon {
39  display: none;
40}
41
42.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
43  display: inline;
44}

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

回答1件

ベストアンサー

一例です。参考までにどうぞ。

<!DOCTYPE html>
<html lang="ja">

<head>
    <!--Metaタグ-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--OGP-->
    <meta property="og:title" content="ページの タイトル" />
    <meta property="og:description" content="ページのディスクリプション" />
    <meta property="og:type" content="ページの種類" />
    <meta property="og:url" content="ページの URL" />
    <meta property="og:image" content="サムネイル画像の URL" />
    <meta property="og:site_name" content="サイト名" />
    <meta property="og:locale" content="ja_JP" />

    <!--Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <!--CSS-->
    <style>
 @media (max-width: 992px) {
  .navbar-collapse {
      position: fixed;
      top: 50px;
      right: 0;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 15px;
      width: 100%;
      height: 100%;
  }

  .navbar-collapse.collapsing {
      right: -75%;
      transition: height 0s ease;
  }

  .navbar-collapse.show {
      right: 0;
      transition: right 300ms ease-in-out;
  }

  .navbar-toggler.collapsed ~ .navbar-collapse {
      transition: right 500ms ease-in-out;
  }
}

.navbar-toggler {
    width:40px;
    height:40px;
    position: relative;
}

.openIcon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.closeIcon {
    font-size:45px;
    line-height: 0.6;
    display: inline-block;
    width: 40px;
    height:40px;
    position: absolute;
    top:0;
    left:0;
}

    </style>

    <!--Fontawesome-->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

    <!--Swiper.js-->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    <title>Document</title>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler openIcon" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="closeIcon">x</span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                    <a class="nav-link" href="#">Features</a>
                    <a class="nav-link" href="#">Pricing</a>
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </div>
            </div>
        </div>
    </nav>

    <!--Bootstrap Js-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>

    <script>
        const navbarToggler = document.getElementsByClassName("navbar-toggler")[0];
        const closeIcon = document.getElementsByClassName("closeIcon")[0];
        closeIcon.style.display = "none";

        navbarToggler.addEventListener("click", () => {
            if(closeIcon.style.display == "none") {
                closeIcon.style.display = "";
                navbarToggler.classList.remove("openIcon");
            } else {
                closeIcon.style.display = "none";
                navbarToggler.classList.add("openIcon");
            }
        });
    </script>
</body>

</html>

投稿2021/05/16 21:32