グローバルナビゲーションドロップダウン

実現したいこと

HTML、CSS初心者ですが、グローバルナビゲーションをレスポンシブ対応のドロップダウン形式にしたいです。

発生している問題・分からないこと

JavaScriptやCSSの設定がよくわかりません
ドロップダウンが表示されません

該当のソースコード

HTML
      <!-- グローバルナビゲーション -->
      <div class="navigation">
        <input id="navi-checkbox" type="checkbox">
        <nav class="navi-menu">
          <label class="hamburger-btn" for="navi-checkbox" aria-label="open navigation">
            <span class="hamburger-bar"></span>
          </label>
          <ul class="navi-list">
            <li class="navi-item">
              <a class="navi-item-anchor" href="<%url>">HOME</a>
            </li>
            <li class="navi-item">
              <a class="navi-item-anchor" href="<%url>archives.html">INDEX</a>
            </li>
            <li class="navi-item">
              <a class="navi-item-anchor" href="<%server_url>control.php">LOG IN</a>
            </li>
            <li class="navi-item navi-item-modal">
              <label class="navi-item-anchor search_modal-trigger-label" for="search_modal-trigger"><svg class="svg-fill" role="img" aria-hidden="true"><use xlink:href="#svg-search-fill"></use></svg></label>
            </li>
          </ul>
        </nav>
      </div>

CSS
/***==========================================
      global navigation
==========================================***/

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  background: var(--navi-bgcolor);
  color: var(--navi-color);
  font-size: var(--navi-font_size);
  transition: .7s ease-in-out;
}

.searchBarfound .navigation {
  top: 27px;
}

.navi-menu {
  display: flex;
  flex-flow: column;
  align-items: center;
  height: var(--navi-height);
  margin: auto;
  overflow: hidden;
  transition: height .6s ease-in-out;
}

.navi-list {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  text-align: center;
}

.navi-list::-webkit-scrollbar {
  display: none;
}

.navi-item {
  position: relative;
  margin: 0 0 10px;
}

.navi-item:first-of-type {
  margin-top: 30px;
}

.navi-item-anchor {
  display: block;
  padding: 1em 0;
  color: var(--navi-color);
  cursor: pointer;
}

/* hamburger */
.hamburger-btn {
  flex-shrink: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: var(--navi-height);
  height: var(--navi-height);
  margin: 0 auto;
  color: currentColor;
  cursor: pointer;
}

.hamburger-bar {
  display: block;
  height: 2px;
  width: 28px;
  margin: 5px;
  background: currentColor;
  transition: background .6s;
}

.hamburger-btn::before,
.hamburger-btn::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: currentColor;
  transition: transform .6s;
}

#navi-checkbox {
  display: none;
}

#navi-checkbox:checked + .navi-menu .hamburger-btn .hamburger-bar {
  background: transparent;
}

#navi-checkbox:checked + .navi-menu .hamburger-btn::before {
  transform: translateY(7px) rotate(225deg);
}

#navi-checkbox:checked + .navi-menu .hamburger-btn::after {
  transform: translateY(-7px) rotate(-225deg);
}

#navi-checkbox:checked ~ .navi-menu {
  height: var(--navi-accordion-height);
  overflow: visible;
}

@media screen and (min-width: 768px) {
  .hamburger-btn {
    display: none;
  }
  #navi-checkbox:checked + .navi-menu {
    height: initial;
  }
  .navigation {
    position: static;
    width: initial;
    background: transparent;
  }
  .navi-menu {
    margin: 0 auto;
  }
  .navi-list {
    flex: initial;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: var(--navi-height);
    overflow: hidden;
    background: transparent;
  }
  .navi-item {
    height: 100%;
    margin: 0 0 0 10px;
  }
  .navi-item:first-of-type {
    margin: 0;
  }
  .navi-item-anchor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 1.8em;
  }
}

.sticky_active {
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.06),
              0 4px 5px 0 rgba(0,0,0,.06),
              0 1px 10px 0 rgba(0,0,0,.08);
  background: var(--navi-bgcolor);
}

@media screen and (min-width: 768px) {
  .sticky_active {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .sticky_active .navi-menu {
    width: var(--width-whole_pct);
    max-width: var(--width-whole);
  }
}


/***==========================================
      header + navigation
==========================================***/

.margin-block {
  width: 100%;
  height: calc(var(--navi-height) + var(--header-margin-vertical-sp));
}

.header-banner {
  width: var(--width-whole_pct);
  max-width: var(--width-whole);
  margin: 0 auto;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .margin-block {
    height: var(--header-margin-vertical-tb);
  }
  .header-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media screen and (min-width: 1100px) {
  .margin-block {
    height: var(--header-margin-vertical-pc);
  }
}

.blog-title {
  flex: 1;
  min-width: 0;
  font-weight: normal;
  font-size: clamp(var(--blog_title-font_size-min), 2.5vw, var(--blog_title-font_size-max));
  line-height: var(--line_height-title);
  font-family: var(--font_family-latin);
}

.blog-title-anchor {
  color: var(--color-base);
}

.site-description,
.breadcrumbs-prewrap {
  width: var(--width-whole_pct);
  max-width: var(--width-whole);
  margin: 15px auto 0;
  font-size: var(--sub_title-font_size);
}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ChatGPTでHTML、CSSを変更、JavaScriptを追加しましたが、マウスホバーしてもドロップダウンが表示されませんでした

補足

FC2ブログのSwollenというテンプレートを使用しています。
ChatGPTでのCSSの変更内容、JavaScriptを記載します。
文字数がオーバーするのでHTMLは省きました。

CSS
/==========================================
global navigation
==========================================/

/* ナビゲーションを右寄せ */
.navigation {
display: flex;
justify-content: flex-end;
align-items: center;
}

/* ナビゲーションのメニュー */
.navi-menu {
display: flex;
align-items: center;
}

/* ナビゲーションのリスト */
.navi-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}

/* 各ナビゲーション項目 */
.navi-item {
position: relative;
padding: 10px 15px;
min-width: 100px;
}

/* ナビゲーションのリンク */
.navi-item-anchor {
font-size: 14px;
text-decoration: none;
display: block;
text-align: center;
padding: 5px 10px;
}

/* 画像のサイズ調整 */
.navi-item img {
width: 40px;
height: auto;
vertical-align: middle;
}

/* チェックボックス（四角いボックス）を非表示 */
#navi-checkbox {
display: none;
}

/* ======= Sitemap ドロップダウン対応 ======= */

/* Sitemapの親要素 */
.navi-dropdown {
position: relative;
}

/* Sitemapのリンク */
.navi-dropdown .dropdown-toggle {
cursor: pointer;
display: block;
padding: 5px 10px;
}

/* ドロップダウンメニュー */
.navi-dropdown-menu {
opacity: 0;
visibility: hidden;
position: absolute;
right: 0;
top: 100%;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
list-style: none;
padding: 5px 0;
width: 150px;
z-index: 1000;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* マウスホバー時にドロップダウンを表示 */
.navi-dropdown:hover .navi-dropdown-menu {
opacity: 1;
visibility: visible;
}

/* ドロップダウン内の各メニュー */
.navi-dropdown-menu li {
padding: 5px 10px;
}

.navi-dropdown-menu li a {
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
padding: 8px 12px;
white-space: nowrap;
}

/* ホバー時の背景色 */
.navi-dropdown-menu li a:hover {
background: lightgray;
}

/==========================================
header + navigation
==========================================/
の部分のCSSは変更していません。

JavaScript

yambejp

2025/02/04 04:50

質問内容がわからないのですがメディアクエリーでwidthが768以下のときにメニューをハンバーガーにしたいということでしょうか？

kahomaru

2025/02/04 05:36

グローバルナビゲーションをPCはマウスホバーでドロップダウン、レスポンシブ対応でスマホではハンバーガーメニューで開閉したいと思っています。

juner

2025/02/04 08:42

質問文の最大文字数にひっかかるときはとりあえず現状が再現できるコードを https://livecodes.io や https://codepen.io 等に書いて共有用URLを払い出して質問文につけるとよいです。

kahomaru

2025/02/06 21:56

コメントありがとうございます。両方見てみましたが、使い方がよくわかりませんでした。

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

回答2件

自己解決

CSSのみで解決しました。
/==========================================
global navigation
==========================================/

.navigation {
width: 100%;
background-color: white; /* 背景色を白に設定 */
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}

/* ナビゲーションメニュー /
.navi-menu {
display: flex;
justify-content: center; / 中央寄せ /
align-items: center;
height: var(--navi-height); / 縦幅を元のCSSと同じに設定 */
padding: 10px 0;
}

/* ナビゲーションリスト */
.navi-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}

/* ナビゲーションアイテム /
.navi-item {
position: relative;
margin: 0 0 10px; / 各項目間の距離を元のCSSと同じに設定 */
}

/* ナビゲーションリンク /
.navi-item-anchor {
display: flex;
align-items: center;
padding: 5px 15px; / 縦幅を元のCSSと同じに設定 /
color: #333; / 背景色に合わせてテキスト色を変更 */
text-decoration: none;
font-size: 16px;
white-space: nowrap;
}

/* ホバー時の背景色 /
.navi-item:hover > .navi-item-anchor {
background-color: #e0e0e0; / ホバー時の背景色を調整 */
}

/* サブメニューがある項目に矢印 🔻 を追加 */
.navi-item.has-submenu > .navi-item-anchor::after {
content: " 🔻";
font-size: 0.8em;
margin-left: 5px;
}

/* ドロップダウンメニュー /
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: linear-gradient(-80deg, #ff65ff, #65ffff); / グラデーションの背景色 */
list-style: none;
padding: 0;
margin: 0;
min-width: 200px;
}

/* ドロップダウンのアイテム */
.dropdown-menu li {
border-bottom: 1px solid #ccc;
}

/* 最後のアイテムのボーダーを削除 */
.dropdown-menu li:last-child {
border-bottom: none;
}

/* ドロップダウンのリンク /
.dropdown-menu li a {
display: flex;
align-items: center;
padding: 5px; / ドロップダウンアイテムのパディングを設定 */
color: #333;
text-decoration: none;
font-size: 14px;
white-space: nowrap;
}

/* ドロップダウンの画像 /
.dropdown-menu li a img {
margin-right: 5px;
width: 46px; / 画像の幅を固定 /
height: 35px; / 画像の高さを固定 */
}

/* サブメニュー（ドロップダウン）をホバーで表示 */
.navi-item.has-submenu:hover > .dropdown-menu {
display: block;
}

/* レスポンシブ対応（スマホ用） */
@media screen and (max-width: 768px) {
.navi-menu {
flex-direction: column;
align-items: flex-start;
padding: 0;
}

.navi-list {
flex-direction: column;
width: 100%;
}

.navi-item {
width: 100%;
}

.navi-item-anchor {
width: 100%;
justify-content: space-between;
}

.dropdown-menu {
position: static;
width: 100%;
}

.dropdown-menu li a {
padding: 10px 20px;
}
}

投稿2025/02/06 21:59

kahomaru

総合スコア9

ご提示のコードを試してみましたが、以下を追加するとメニューが開閉するようです。

css
1:root {
2    --navi-accordion-height: 0;
3}

投稿2025/02/04 08:42

Lhankor_Mhy

総合スコア37460

kahomaru

2025/02/06 21:57

回答ありがとうございます。非常に参考になりました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.30%

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

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

質問する

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

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

グローバルナビゲーションドロップダウン

実現したいこと

発生している問題・分からないこと

該当のソースコード

試したこと・調べたこと

上記の詳細・結果

補足

関連した質問