ドロップダウンメニューの実装

前提・実現したいこと

ドロップダウンの実装（メニュを開く時に滑らかに開くようにしたい）

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

ドロップダウンのメニューを開く時滑らかに出ない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <title>Document</title>
8</head>
9<body>
10    <header class="header">
11        <nav class="header-inner">
12        <h1 class="header-logo"><a class="header-btn" href="">LOGO</a></h1>
13                
14        <ul class="gnav-list">
15        <li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
16        <li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
17        <li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
18        <li class="gnav-items gnav-items-menu"><a class="gnav-item">GNAV<p>ナビ</p></a>
19        <ul class="gnav-item-list">
20            <li><a href="">› ナビ</a></li>
21            <li><a href="">› ナビ</a></li>
22            <li><a href="">› ナビ</a></li>
23            <li><a href="">› ナビ</a></li>
24            <li><a href="">› ナビ</a></li>
25        </ul>
26        </li>
27        <li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
28        <li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
29        <li class="gnav-items"><a class="gnav-item">GNAV<p>ナビ</p></a></li>
30        </ul>        
31        
32        <div class="menu">
33            <a class="menu-btn" href="">
34                <span class="menu-open menu-close"></span>
35            </a>
36        </div>
37        </nav>
38        </header>
39</body>
40</html>
41

CSS
1.header {
2    z-index: 999;
3    position: fixed;
4    box-sizing: border-box;
5    top: 0;
6    background: #fff;
7    width: 100%;
8  }
9  
10  .header-inner {
11    max-width: 1280px;
12    padding: 0 20px;
13    margin: 0 auto;
14    box-sizing: border-box;
15  }
16  
17  .header-logo {
18    display: inline-block;
19    margin: 0;
20  }
21  
22  .header-btn {
23    font-size: 32px;
24    letter-spacing: 4px;
25    margin: 0;
26    padding-top: 0px;
27    display: block;
28    font-weight: 800;
29    font-family: 'Montserrat', sans-serif;
30    color: #222;
31    line-height: 80px;
32    box-sizing: border-box;
33    height: 80px;
34    cursor: pointer;
35    text-decoration: none;
36  }
37  
38  .gnav-list {
39    display: flex;
40    justify-content: space-between;
41    align-items: center;
42    float: right;
43    list-style: none;
44    padding: 0;
45    margin: 0;
46  }
47  
48  .gnav-items {
49    margin: 0;
50    float: left;
51    height: 80px;
52    padding-top: 9px;
53    color: #282828;
54    box-sizing: border-box;
55    font-size: 1.6rem;
56  }
57  
58  .gnav-items-menu {
59    position: relative;
60  }
61  
62  .gnav-items-menu:hover .gnav-item-list {
63    visibility: visible;
64  }
65  
66  .gnav-item {
67    display: block;
68    margin: 0;
69    padding: 14px 0 6px;
70    box-sizing: border-box;
71    width: 130px;
72    font-size: 1.6rem;
73    font-weight: bold;
74    text-align: center;
75    position: relative;
76  }
77  
78  .gnav-item p {
79    margin: 0;
80    font-size: 13px;
81    font-weight: 500;
82    letter-spacing: 0;
83    color: #666;
84    line-height: 1;
85  }
86  
87  .gnav-item-list {
88    list-style: none;
89    position: absolute;
90    top: 80px;
91    background: #fff;
92    height: auto;
93    width: 190px;
94    padding: 0 0 26px;
95    border-radius: 0 0 6px 6px;
96    border: 2px solid #9dce54;
97    border-top: none;
98    box-sizing: border-box;
99    opacity: 1;
100    z-index: 1;
101    margin: 0;
102    list-style: none;
103    visibility: hidden;
104  }
105  
106  .gnav-item-list a {
107    font-size: 15px;
108    color: #333;
109    line-height: 42px;
110    height: 42px;
111    padding-left: 26px;
112    text-align: left;
113    font-weight: 600;
114    display: block;
115    letter-spacing: 0.2px;
116    box-sizing: border-box;
117    cursor: pointer;
118    text-decoration: none;
119  }

試したこと

.gnav-list , .gnav-items-menu , .gnav-item-list , .gnav-item-list li クラスにtransition: 2s; -webkit-transition: .2s; を指定。
.gnav-items-menu:hover .gnav-item-list　に　transition: 2s; -webkit-transition: .2s;　を指定。
.gnav-items-menu:hover .gnav-item-list に　transition: .3s ease-in-out;　　を指定。

いずれも効果ありませんでした。

ドロップダウンメニューの形はできていると思いますが、滑らかに開けず苦戦しております。
初心者のとても未熟な質問ではありますが、どなたかご教授していただけると幸いです。

yambejp

2020/04/09 00:09

「滑らか」の定義をしてくださいどこかのサイトのどの部分に似てた感じ・・・でもよいので

shuto0901

2020/04/09 15:52

コメント遅くなり申し訳ございません。 https://galera.co.jp/ こちらのサイトのようなドロップダウンメニュー【Webサイト制作】の滑らかさです！

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

回答2件

ベストアンサー

表示/非表示の切り替えを visibilityの設定で行っていますが、これは hiddenとvisibleの２つしかなく中間点がないのでアニメーションにはできません。
「滑らか」の定義は不明確ですか、例えば、透明から徐々に不透明に変化する(フェイドイン)ということなら、opacityを使うといいでしょう。

※コメントを受けて、上から下に移動するアニメーションも追加しました。

修正例

css
1
2  .gnav-items-menu:hover .gnav-item-list {
3    visibility: visible;
4    opacity: 1;         /*追加*/
5    top: 80px;          /*追加*/
6  }
7
8/*中略*/
9
10  .gnav-item-list {
11    list-style: none;
12    position: absolute;
13    top: 50px;          /*修正*/
14    background: #fff;
15    height: auto;
16    width: 190px;
17    padding: 0 0 26px;
18    border-radius: 0 0 6px 6px;
19    border: 2px solid #9dce54;
20    border-top: none;
21    box-sizing: border-box;
22    transition: all 1s; /*追加*/
23    opacity: 0;         /*修正*/
24    z-index: 1;
25    margin: 0;
26    list-style: none;
27    visibility: hidden;    
28  }

Height を使えばドロップダウンアニメーションになります。

投稿2020/04/09 00:34

編集2020/04/09 19:02

hatena19

総合スコア34075

shuto0901

2020/04/09 15:26

ご回答ありがとうございます。回答通りopacityを用い動作を確認いたしましたが、イメージとの相違がありました。 https://galera.co.jp/ 私がイメージしていたドロップダウンメニューの【滑らか】とは上記サイトのような上から下に動くようなものでした。質問をする際に滑らかの定義を怠り手間をおかけして申し訳ございません。もしよろしければ、上記サイトのようなドロップダウンメニューの作り方を教えていただけたら幸いです。