実現したいこと
Widthが500px以下の場合、チェックボックスにチェックが入れられたらアニメーションで<ul id="topnav">を表示する、チェックボックスのチェックを外した時にもアニメーションで消えていくようにしたいです。アニメーションが始まる（表示される範囲）をチェックボックスより下にしたいです。
チェックボックスをメニューのみたいにして、チェックされていないときに「≡Menu」、チェックされているときに「✕Close」というようにしたいです。
できれば以下のコードのようにしたいです。
<!DOCTYPE html> <html lang="ja"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript" ></script> <script src="../js/pagetop.js" type="text/javascript"></script> <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="../css_style/import.css" media="screen,projection,tv,print"> <script> $(document).ready(function() { var pagetop = $('.pagetop'); $(window).scroll(function () { var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); console.log("scrollHeight - scrollPosition"+(scrollHeight - scrollPosition)+"|scrollPosition: "+scrollPosition); if((scrollHeight - scrollPosition) > 250) { pagetop.fadeIn(); pagetop.css('bottom','30px'); } else if( (scrollHeight - scrollPosition) < 250 ) { pagetop.fadeOut(); } else { pagetop.fadeOut(); } }); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); $(function(){ $("#toggle").click(function(){ $("#globalNav").slideToggle(); return false; }); $(window).resize(function(){ var win = $(window).width(); var p = 640; if(win > p){ $("#globalNav").show(); } else { $("#globalNav").hide(); } }); }); </script> </head> <body> <ul class="ul_main"> <div id="toggle"><li><i class="fa fa-bars"></i></li></div> </ul> <nav> <ul id="globalNav"> <li><a href="index.html">トピック</a></li> <li><a href="../about/index.html">概要</a> </ul> </nav> </body> </html>
発生している問題・分からないこと
・チェックボックスのデザイン
・終わるアニメーションがない→CSSで変わるのを遅らせる方法
・一番上からアニメーションが始まってしまう→CSSのアニメーションが始まる（表示される）位置を変える方法
該当のソースコード
HTML・CSS
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>Menu Example</title> 6<style> 7/* メニューボタン */ 8.menu-button { 9display: none; 10} 11 12/* 横幅が500px以下の場合にul要素を非表示にする */ 13@media only screen and (max-width: 500px) { 14#topnav { 15display: none; 16} 17.menu-button { 18display: block; 19} 20} 21 22/* メニューボタンをクリックしたらul要素を表示する */ 23@media only screen and (max-width: 500px) { 24.menu-button:checked ~ #topnav { 25display: block; 26animation: slide-down 0.5s ease-out; 27} 28} 29 30/* スライドダウンアニメーション */ 31@keyframes slide-down { 320% { 33transform: translateY(-100%); 34} 35100% { 36transform: translateY(0); 37} 38} 39 40/* メニューボタンをクリックしたらul要素を非表示にする */ 41@media only screen and (max-width: 500px) { 42.menu-button:not(:checked) ~ #topnav { 43display: none; 44animation: slide-up 0.5s ease-out; 45} 46} 47 48/* スライドアップアニメーション */ 49@keyframes slide-up { 500% { 51transform: translateY(0); 52} 53100% { 54transform: translateY(-100%); 55} 56} 57</style> 58</head> 59<body> 60 61<input type="checkbox" class="menu-button"> 62<ul id="topnav"> 63<li><a>Home</a></li> 64<li><a href="about">About</a></li> 65<li><a href="contact">Contact</a></li> 66</ul> 67 68</body> 69</html>
試したこと・調べたこと
上記の詳細・結果
いろいろなサイトのメニューを見てみてみましたが、よくわかりませんでした。
補足
特になし
0 コメント