Q&A
回答ありがとうございます。
@keyframesで色々試してみましたが、背景の白はすぐに表示されて、リストはゆっくり表示されてしまいます。
どのような記述が良いのでしょうか？
サービスと企業情報にホバーした際に、「sub-menu-lis」が表示されるのですが、現状は、ホバーしたら要素がすぐに表示されてしまします。
display:none;→display:block;
をゆっくり表示させるにはどのようにすればよいでしょうか？
イメージはhttps://liginc.co.jp/この会社ヘッダーのように、上からふわっと表示させたいです。
【やってみたこと】
transition: 0.3s ease-in-out;
で表示速度を変更してみようとしましたが変化はありませんでした。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="content-type" charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <title>Next Revolution</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link rel="stylesheet" href="public/css/index.css"> 10 <link rel="stylesheet" href="public/css/all_common.css"> 11 <script src="https://unpkg.com/scrollreveal"></script> 12 <script src="https://code.jquery.com/jquery-3.5.1.min.js" 13 integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 14 <!--font--> 15</head> 16<body> 17 <!--header--> 18 <header> 19 <div id="header"> 20 <h2 class="company-logo">test</h2> 21 <div class="header-box"> 22 <ul class="menu-list"> 23 <li class="current"><a href="#">HOME<br><span>ホーム</span></a></li> 24 <li><a href="company.html">ABOUT<br><span>わたしたちについて</span></a></li> 25 <li><a href="#">SERVICE<br><span>サービス</span></a></li> 26 <li><a href="works.html">WORKS<br><span>制作事例</span></a></li> 27 <li><a href="#">COMPANY<br><span>企業情報</span></a></li> 28 <li class="contact-btn"><a href="#">CONTACT<br><span>お問い合わせ</span></a></li> 29 </ul> 30 <ul class="sub-menu-list sub01"> 31 <li><a href="#">ホームページ制作<br>ランディングページ制作</a></li> 32 <li><a href="#">Web広告・SNS広告</a></li> 33 <li><a href="#">WEBコンサルティング</a></li> 34 <li><a href="#">SNSマーケティング</a></li> 35 <li><a href="reasonable.html">無料ホームページ制作</a></li> 36 <li><a href="#">ホームページ制作</a></li> 37 </ul> 38 <ul class="sub-menu-list sub02"> 39 <li><a href="#">サブメニュー04</a></li> 40 <li><a href="#">サブメニュー05</a></li> 41 <li><a href="#">サブメニュー06</a></li> 42 <li><a href="#">サブメニュー07</a></li> 43 <li><a href="#">サブメニュー08</a></li> 44 </ul> 45 </div> 46 </div> 47 </header> 48 <!--JavaScript--> 49 <script src="public/js/javascript.js"></script> 50</body> 51 52</html>
CSS
1/*header_footer共通*/ 2*{ 3 margin: 0; 4 padding: 0; 5 border: 0; 6 font-family: ヒラギノ角ゴシック, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, sans-serif; 7 border: none; 8 word-break: break-all; 9 max-width: 1700px; 10} 11body{ 12 margin: 0; 13 padding: 0; 14 border: 0; 15 background-color: burlywood; 16} 17ul{ 18 list-style: none; 19 padding: 0; 20} 21a{ 22 text-decoration: none; 23 color: #000000; 24} 25p,h1,h3,h4,h5,ul,li,a{ 26 font-family: Helvetica, '游ゴシック', 'Yu Gothic', YuGothic, HiraKakuProN-W3, 'メイリオ', Meiryo, sans-serif; 27} 28section{ 29 margin: 50px 0; 30} 31.inner{ 32 max-width: 1080px; 33 margin: auto; 34} 35.pc{ 36 display: block; 37} 38.sp{ 39 display: none; 40} 41/*header共通*/ 42#header { 43 background-color: rgb(255, 255, 255); 44 width: 100%; 45 z-index: 9999; 46 position: fixed; 47 transition: 0.3s ease-in-out; 48 box-sizing: border-box; 49 display: flex; 50 top: 0; 51 left: 0; 52 z-index: 3; 53} 54.company-logo{ 55 margin: 15px 0 0 100px; 56 font-size: 35px; 57 font-family: "Yu Mincho Light", YuMincho, "Yu Mincho", 游明朝体, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", ヒラギノ角ゴシック, "Hiragino Sans", sans-serif; 58} 59.header-box{ 60 margin: auto; 61} 62#header .menu-list li, 63#header .sub-menu-list li { 64 display: inline-block; 65 text-align: center; 66} 67#header .menu-list li a, 68#header .sub-menu-list li a { 69 position: relative; 70 display: inline-block; 71} 72.current a{ 73 border-bottom: 4px solid rgb(127, 173, 241); 74} 75#header .menu-list li a::after, 76#header .sub-menu-list li a::after{ 77 position: absolute; 78 bottom: -2px; 79 left: 0; 80 content: ''; 81 width: 100%; 82 height: 2px; 83 background: rgb(127, 173, 241); 84 transform: scale(0, 1); 85 transform-origin: left top; 86 transition: transform .3s; 87} 88#header .menu-list li a:hover::after, 89#header .sub-menu-list li a:hover::after { 90 transform: scale(1, 1); 91} 92 93#header .menu-list li.selected { 94 background: rgba(233, 233, 233, 0.7); 95} 96#header .menu-list li a { 97 width: 120px; 98 display: block; 99 font-weight: bold; 100 padding: 25px 15px; 101 font-size: 16px; 102 text-shadow: rgba(109, 109, 109, 0.4) 1px 1px 4px; 103 text-decoration: none; 104} 105.menu-list span{ 106 font-size: 12px; 107 font-weight: lighter; 108} 109#header .sub-menu-list { 110 display: flex; 111 flex-wrap: wrap; 112 display: none; 113 width: 727px; 114 padding: 20px; 115 transition: 0.3s ease-in-out; 116} 117#header .sub-menu-list.selected { 118 display: block; 119} 120#header .sub-menu-list li a { 121 width: 160px; 122 display: block; 123 padding: 15px 15px; 124 margin: 15px 5px; 125 font-size: 14px; 126 text-decoration: none; 127 border-bottom: 1px solid rgb(156, 156, 156); 128} 129#header .sub-menu-list li a:hover { 130 opacity: 0.7; 131}
JavaScript
1/*ヘッダーjs*/ 2$(function() { 3 $('#header').hover( 4 function() { 5 $(this).addClass('hovered'); 6 }, 7 function() { 8 $(this).removeClass('hovered'); 9 $(this).find('.menu-list li').removeClass('selected'); 10 $(this).find('.sub-menu-list').removeClass('selected'); 11 } 12 ); 13 14 $('#header .menu-list li').hover( 15 function() { 16 var ttl = $(this).children('a').text(); 17 $(this).addClass('selected'); 18 $(this).siblings().removeClass('selected'); 19 20 var current; 21 switch(ttl) { 22 case "SERVICEサービス": 23 current = $('#header .sub-menu-list.sub01'); 24 $(current).addClass('selected'); 25 break; 26 case "COMPANY企業情報": 27 current = $('#header .sub-menu-list.sub02'); 28 $(current).addClass('selected'); 29 break; 30 default: 31 current = $('#header .sub-menu-list'); 32 break; 33 } 34 $(current).siblings().removeClass('selected'); 35 }, 36 function() { 37 //マウスカーソルが離れた時の処理 38 } 39 ); 40});
回答2件
0
yukapome789さんの回答へのコメントより
@keyframesで色々試してみましたが、背景の白はすぐに表示されて、リストはゆっくり表示されてしまいます。
.sub-menu-list が表示された時の背景色のことでしょうか。
.sub-menu-list自体には背景色は設定されていないですね。
.sub-menu-list が表示されるとき #headerの高さがその分、拡張してその背景色が表示されている状態ですね。
ですので、.sub-menu-listにアニメーションを設定しても反映されません。
.sub-menu-listにposition: absolute;を設定してそれに背景色を設定するようにすればどうでしょう。
サイズは727pxの固定でなく、画面一杯にしたいのだと思いますので、left: 0; right: 0;とすれば画面一杯に広がります。
メニューの中央寄せなどその他もろもろ調整して、下記のような感じになりました。
あくまで、一例ですのでお好みで微調整してください。
css
1#header .sub-menu-list { 2 justify-content: center; 3 flex-wrap: wrap; 4 display: none; 5 position: absolute; 6 background-color: rgb(255, 255, 255); 7 left: 0; 8 right: 0; 9 padding:20px calc((100% - 727px)/2); 10} 11#header .sub-menu-list.selected { 12 display: flex; 13 animation-name: fadein; 14 animation-duration: .5s; 15} 16@keyframes fadein { 17 0% { 18 opacity: 0; 19 } 20 100% { 21 opacity: 1; 22 } 23}
アニメーションは、yukapome789さんの回答にもあるように display: none;で表示にしているときは、transitionが効かないので、@keyframesを使います。
投稿2021/11/07 08:02
編集2021/11/07 08:27
総合スコア33715
0
こんにちは。none, block で表示非表示を切替するの場合、 opacity がうまく動かないことがあるようです。
そのため keyframes と animation で動きを設定するのがいいんじゃないでしょうか。
流れは下記です。
【1】 @keyframes を定義する
css
1@keyframes アニメーション名 { 2 0% { 3 opacity: 0; 4 } 5 100% { 6 opacity: 1; 7 } 8}
【2】 1で定義したアニメーション名を、適用したいクラスの CSS プロパティに追加する
css
1animation-name: アニメーション名;
【3】 animation-duration で表示までの時間を設定する
css
1animation-duration: 0.5s;
投稿2021/11/07 05:36
編集2021/11/07 05:37
総合スコア361
>背景の白はすぐに表示されて、リストはゆっくり表示されてしまいます。
画像がないのでイメージがつかないのですが、背景とリストは同時に表示したいのですかね？
試したソースと、表示されてる動画とか画像を添付いただけますか？
あと「背景の白」と言われても、どの要素のことを言っているのかわからないので、class名で言っていただけると助かります。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。