ハンバーガーメニューを↑と表示させたいのですが↓になりました。
2枚目のhtmlとcssとjQueryは↓です。
<!doctype html> <html lang="ja"> <head> <!--メディアクエリ--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--reset.css--> <link rel="stylesheet" href="reset.css"> <!--css--> <link rel="stylesheet" href="css/stylesheet.css"> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <!--fontawesome--> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="exercise.js"></script> <title>top</title> </head> <html> <header> <div class="menu"> </div><!--/.menu--> <img class="header-img img1" src="images/top1.jpg" width="1920px" height="900px" alt="top1"> <div class="logo"> <p>PAS-POL</p> <p>旅のモノづくりブランド</p> </div><!--/.logo--> <nav class="globalMenuSp"> <ul class="navi"> <li><a href="top.html">TOP</a></li> <li><a href="product.html">PRODUCT</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="news.html">NEWS</a></li> <li><a href="contact.html">CONTACT</a></li> </ul><!--/.navi--> </nav> <div class="navToggle"> <span></span><span></span><span></span><span>menu</span> </div> </header> </div> </html>
/*共通部分*/ body{ margin:0; } li{ list-style:none; } .container{ max-width:850px; margin:0 auto; } a{ text-decoration:none; color:#fff; } /*ヘッダー*/ header{ height:900px; margin:auto; color:#fff; position:relative; } .menu{ padding:10px 0 10px 10px; font-size:15px; background-color:#fff; height:100px; } .menu p{ margin-top:0; } header .navi{ position:absolute; top:30px; right:30px; } header .logo{ position:absolute; top:30px; left:30px; } .header-img { display: block; margin:auto; } .img1 { position: absolute; top: 0; left: 0; right: 0; width:100%; } .logo p:first-child{ margin-top:0; font-size:30px; font-weight:bold; } .logo p:nth-child(2){ font-size:10px; } .logo p:nth-child(2){ display:inline-block; } .logo{ margin-left:89px; margin-top:29px; } header .navi{ display:flex; margin-top:49px; margin-right:16px; } header li{ margin-left:95px; } .navi li:hover{ border-bottom:2px solid #fff; padding-bottom:5px; } /*メディアクエリ スマホ*/ @media(max-width:559px){ /*ヘッダー*/ .header-img { overflow:hidden; } .img1,.img14,.img15,.img16,.img17 { top: 400px; } .menu p{ color:#13191B; } header .logo{ position:absolute; left:100px; top:200px; } header .navi{ display:none; } .logo p:first-child{ font-size:40px; margin-bottom:0; } .logo p:nth-child(2){ font-size:10px; margin-left:30px; } .menu{ height:80px; background-color:#fff; } /*ハンバーガーメニュー*/ nav.globalMenuSp { position: fixed; z-index: 2; top: 0; left: 0; background: #fff; color: #000; text-align: center; transform: translateY(-100%); transition: all 0.6s; width: 100%; } nav.globalMenuSp ul { background: #ccc; margin: 0 auto; padding: 0; width: 100%; } nav.globalMenuSp ul li { font-size: 1.1em; list-style-type: none; padding: 0; width: 100%; border-bottom: 1px dotted #333; } /* 最後はラインを描かない */ nav.globalMenuSp ul li:last-child { padding-bottom: 0; border-bottom: none; } nav.globalMenuSp ul li a { display: block; color: #000; padding: 1em 0; } /* このクラスを、jQueryで付与・削除する */ nav.globalMenuSp.active { transform: translateY(0%); } .navToggle { display: block; position: fixed; /* bodyに対しての絶対位置指定 */ right: 13px; top: 12px; width: 42px; height: 51px; cursor: pointer; z-index: 3; background: #666; text-align: center; } .navToggle span { display: block; position: absolute; /* .navToggleに対して */ width: 30px; border-bottom: solid 3px #eee; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; left: 6px; } .navToggle span:nth-child(1) { top: 9px; } .navToggle span:nth-child(2) { top: 18px; } .navToggle span:nth-child(3) { top: 27px; } .navToggle span:nth-child(4) { border: none; color: #eee; font-size: 9px; font-weight: bold; top: 34px; } /* 最初のspanをマイナス45度に */ .navToggle.active span:nth-child(1) { top: 18px; left: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /* 2番目と3番目のspanを45度に */ .navToggle.active span:nth-child(2), .navToggle.active span:nth-child(3) { top: 18px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } }
$(function() { $('.navToggle').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } }); });
2枚目の画像のコードをどう変えれば1枚目の画像のようにメニューが表示されるのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/01 05:22