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

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

新規登録して質問してみよう
ただいま回答率
85.54%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

650閲覧

メニューを閉じた時に起こるアニメーションをリンクをクリックしても起こしたい!

tsuk

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/02/27 14:58

実現したいこと

https://kodocode.net/design-css-hamburger/
↑上記のサイトの【|メニューが画面中央に移動しメニューに変化!】
をコピペして使用してますが、ハンバーガーメニューの×マークをクリックするとメニューは閉じます。
それをリンクをクリックしても×をクリックした時と同様のアニメーションで閉じるようにしたいです。

該当のソースコード

HTML <a href="https://front.codes/" class="logo" target="_blank"> <img src="https://assets.codepen.io/1462889/fcy.png" alt=""> </a> <input class="menu-icon" type="checkbox" id="menu-icon" name="menu-icon"/> <label for="menu-icon"></label> <nav class="nav"> <ul class="pt-5"> <li><a href="#">Work</a></li> <li><a href="#">Studio</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="section-center"> <h1 class="mb-0">Pure CSS Menu</h1> </div>
CSS @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap'); body{ font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.7; color: #ececee; background-color: #1f2029; overflow: hidden; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg'); background-position: center; background-repeat: repeat; background-size: 4%; height: 100vh; width: 100%; } .section-center{ position: absolute; top: 50%; left: 0; display: block; width: 100%; padding: 0; margin: 0; z-index: 6; text-align: center; transform: translateY(-50%); } h1{ font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 7vw; line-height: 1; color: #ffeba7; text-align: center; -webkit-text-stroke: 2px #ffeba7; text-stroke: 2px #ffeba7; -webkit-text-fill-color: transparent; text-fill-color: transparent; color: transparent; } [type="checkbox"]:checked, [type="checkbox"]:not(:checked){ position: absolute; left: -9999px; } .menu-icon:checked + label, .menu-icon:not(:checked) + label{ position: fixed; top: 63px; right: 75px; display: block; width: 30px; height: 30px; padding: 0; margin: 0; cursor: pointer; z-index: 10; } .menu-icon:checked + label:before, .menu-icon:not(:checked) + label:before{ position: absolute; content: ''; display: block; width: 30px; height: 20px; z-index: 20; top: 0; left: 0; border-top: 2px solid #ececee; border-bottom: 2px solid #ececee; transition: border-width 100ms 1500ms ease, top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-icon:checked + label:after, .menu-icon:not(:checked) + label:after{ position: absolute; content: ''; display: block; width: 22px; height: 2px; z-index: 20; top: 10px; right: 4px; background-color: #ececee; margin-top: -1px; transition: width 100ms 1750ms ease, right 100ms 1750ms ease, margin-top 100ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-icon:checked + label:before{ top: 10px; transform: rotate(45deg); height: 2px; background-color: #ececee; border-width: 0; transition: border-width 100ms 340ms ease, top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-icon:checked + label:after{ width: 30px; margin-top: 0; right: 0; transform: rotate(-45deg); transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); } .nav{ position: fixed; top: 33px; right: 50px; display: block; width: 80px; height: 80px; padding: 0; margin: 0; z-index: 9; overflow: hidden; box-shadow: 0 8px 30px 0 rgba(0,0,0,0.3); background-color: #353746; animation: border-transform 7s linear infinite; transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 1100ms ease, width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1); } @keyframes border-transform{ 0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } .menu-icon:checked ~ .nav { animation-play-state: paused; top: 50%; right: 50%; transform: translate(50%, -50%); width: 200%; height: 200%; transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 700ms ease, width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1); } .nav ul{ position: absolute; top: 50%; left: 0; display: block; width: 100%; padding: 0; margin: 0; z-index: 6; text-align: center; transform: translateY(-50%); list-style: none; } .nav ul li{ position: relative; display: block; width: 100%; padding: 0; margin: 10px 0; text-align: center; list-style: none; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(30px); transition: all 250ms linear; } .nav ul li:nth-child(1){ transition-delay: 200ms; } .nav ul li:nth-child(2){ transition-delay: 150ms; } .nav ul li:nth-child(3){ transition-delay: 100ms; } .nav ul li:nth-child(4){ transition-delay: 50ms; } .nav ul li a{ font-family: 'Montserrat', sans-serif; font-size: 9vh; text-transform: uppercase; line-height: 1.2; font-weight: 800; display: inline-block; position: relative; color: #ececee; transition: all 250ms linear; } .nav ul li a:hover{ text-decoration: none; color: #ffeba7; } .nav ul li a:after{ display: block; position: absolute; top: 50%; content: ''; height: 2vh; margin-top: -1vh; width: 0; left: 0; background-color: #353746; opacity: 0.8; transition: width 250ms linear; } .nav ul li a:hover:after{ width: 100%; } .menu-icon:checked ~ .nav ul li { pointer-events: auto; visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 350ms ease, transform 250ms ease; } .menu-icon:checked ~ .nav ul li:nth-child(1){ transition-delay: 1400ms; } .menu-icon:checked ~ .nav ul li:nth-child(2){ transition-delay: 1480ms; } .menu-icon:checked ~ .nav ul li:nth-child(3){ transition-delay: 1560ms; } .menu-icon:checked ~ .nav ul li:nth-child(4){ transition-delay: 1640ms; } .logo { position: absolute; top: 60px; left: 50px; display: block; z-index: 11; transition: all 250ms linear; } .logo img { height: 26px; width: auto; display: block; } @media screen and (max-width: 991px) { .menu-icon:checked + label, .menu-icon:not(:checked) + label{ right: 55px; } .logo { left: 30px; } .nav{ right: 30px; } h1{ font-size: 9vw; -webkit-text-stroke: 2px transparent; text-stroke: 2px transparent; -webkit-text-fill-color: #ffeba7; text-fill-color: #ffeba7; color: #ffeba7; } .nav ul li a{ font-size: 8vh; } }

試したこと

何をどこをいじればいいのかわかりません。
何卒よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

リンクをクリックしたら閉じます

<li><a id="closeLink" href="#">Work</a></li> <script> const myCheckbox = document.getElementById("menu-icon"); const closeLink = document.getElementById("closeLink"); closeLink.addEventListener("click", function(e) { e.preventDefault(); myCheckbox.checked = false; }); </script>

投稿2023/03/17 05:07

ayuayuayu

総合スコア68

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

リンクがクリックされたときにメニューの開閉状態を持っているチェックボックスの状態を変化させる、という挙動を JavaScript で組めばよさそうです。(動作未確認)

投稿2023/02/27 22:01

int32_t

総合スコア20516

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tsuk

2023/02/27 23:16

そのコードを組むことができません... よろしければ教えていただけないですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。