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

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

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

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

1回答

741閲覧

ハンバーガーメニューのクリック時のアニメーションがクリック後に戻ってしまう

itokin

総合スコア14

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/09/06 12:27

前提・実現したいこと

プログラミング初心者です
お手柔らかにお願いします

モバイル用の画面でのハンバーガーメニューをつけたのですがクリック時に
ハンバーガーメニューの3本のうち中央が右へフェイドアウトしつつ上下の2本がクロスして✖印になるアニメーションをつけたいです。またもう一度クリックすれば元の状態に戻るようにしたいです。

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

クリックしている間はアニメーションで変化するのですが、マウスから指を離すとクリック前の状態に戻ってしまいます

該当のソースコード

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, shrink-to-fit=no"> 6 <title>MyPortfolio</title> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 8 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"> 9 <link rel="stylesheet" href="MyPortfolio.css"> 10</head> 11<body> 12 <!-- ヘッダー --> 13 <header> 14 <nav class="navbar navbar-expand-md navbar-light"> 15 <div class="container-fluid"> 16 <a href="#" class="navbar-brand">MY PORTFOLIO</a> 17 <button class="navbar-toggler" data-toggle="collapse" type="button" data-target="#menu"> 18 <a class="menu-trigger" href="#"> 19 <span></span> 20 <span></span> 21 <span></span> 22 </a> 23 </button> 24 <div class="collapse navbar-collapse" id="menu"> 25 <ul class="navbar-nav ml-auto " > 26 <li class="nav-item"><a href="#profile" class="nav-link">Profile</a></li> 27 <li class="nav-item"><a href="#service" class="nav-link">Service</a></li> 28 <li class="nav-item"><a href="#works" class="nav-link">Works</a></li> 29 <li class="nav-item"><a href="#policy" class="nav-link">Policy</a></li> 30 <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li> 31 </ul> 32 </div> 33 </div> 34 </nav> 35 </header> 36 37 38 <!-- ランディングページ --> 39 40 41 <!-- プロフィール --> 42 43 44 <!-- サービス内容 --> 45 46 47 <!-- works (制作物) --> 48 49 50 <!-- ポリシー --> 51 52 53 <!-- お問い合わせ --> 54 55 56 <!-- フッター --> 57 58 59 <!-- bootstrap JQuery --> 60 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> 61<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 62<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> 63</body> 64</html>

CSS

1*{ 2 box-sizing: border-box; 3 list-style: none; 4} 5 6/* ヘッダー */ 7.navbar-light .navbar-toggler { 8 border-color: rgba(0, 0, 0, 0); 9} 10*:focus { 11 outline: none !important; 12} 13.menu-trigger, 14.menu-trigger span { 15 display: inline-block; 16 transition: all .4s; 17 box-sizing: border-box; 18} 19.menu-trigger { 20 position: relative; 21 width: 30px; 22 height: 25px; 23} 24.menu-trigger span { 25 position: absolute; 26 left: 0; 27 width: 100%; 28 height: 2px; 29 background-color: black; 30 border-radius: 4px; 31} 32.menu-trigger span:nth-of-type(1) { 33 top: 0; 34} 35.menu-trigger span:nth-of-type(2) { 36 top: 12.5px; 37} 38.menu-trigger span:nth-of-type(3) { 39 bottom: 0; 40} 41 42button:active span:nth-of-type(1) { 43 -webkit-transform: translateY(0px) rotate(-45deg)!important; 44 transform: translateY(14px) rotate(-45deg)!important; 45} 46button:active span:nth-of-type(2) { 47 left: 200%; 48 opacity: 0; 49 -webkit-transform: translateY(10px); 50 transform: translateY(10px); 51 -webkit-animation: active-menu-bar02 .8s forwards; 52 animation: active-menu-bar02 .8s forwards; 53} 54@-webkit-keyframes active-menu-bar02 { 55 100% { 56 height: 0!important; 57 } 58} 59@keyframes active-menu-bar02 { 60 100% { 61 height: 0!important; 62 } 63} 64button:active span:nth-of-type(3) { 65 -webkit-transform: translateY(-0px) rotate(45deg); 66 transform: translateY(-8px) rotate(45deg); 67}

試したこと

全くわからなかったのでスペルミスを確認したり
button:activeの部分を.menu-trigger:activeに変更したんですが変わりませんでした。

説明不足の部分もあるかもしれませんがよろしくお願いします

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんにちは。

button:not(.collapsed)としてはどうですか?

投稿2020/09/08 09:22

Lhankor_Mhy

総合スコア35871

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問