Q&A
前提・実現したいこと
下記のwebサイトからコードをコピペして実装したいのですが、どうやら反映されていないようです。
webサイトのコードは何故かHTMLがslimで、cssがscssで記述されているため、変換前と変換後のソースを貼ります。
javascriptは未経験で、文法などが分かりません。
ですが、javaを3年ほどやっているので配列や繰り返しなど共通の基本概念はわかります。
反映されない原因が分かる方、ご教授願えないでしょうか？
すべてのファイル(HTML・CSS・JS)は同じ階層にあるのでパス指定ミスではないと思います。
また、SCSSの@importで読み込んでいるフォントですが、CSSの方では消しています。
該当のサイト
このサイトの 4:フルスクリーンメニュー>Fullscreen Menu Flexbox Method です。
slimのコード
slim
1.plus-btn-pos 2 .plus-btn 3 .r1 4 .r2 5.content 6 div 7 h1 Fullscreen Menu 8 h2 Flexbox Style 9.menu-container 10 - for i in (1..3) 11 .menu-sliders 12 .menu 13 ul 14 li 15 a Home 16 li 17 a About 18 li 19 a Work 20 li 21 a Contact 22
scssのコード
scss
1@import url(https://fonts.googleapis.com/css?family=Roboto:300,100); 2 3.content { 4 display:flex; 5 justify-content: center; 6 align-items: center; 7 position: absolute; 8 height: 100vh; 9 width: 100vw; 10 z-index: 1; 11 text-align:center; 12 font-family: 'Roboto', sans-serif; 13 color: black; 14 h1 { 15 font-size: 60px; 16 margin-bottom: 15px; 17 font-weight: 300; 18 } 19 h2 { 20 font-size: 42px; 21 font-weight: 100; 22 } 23} 24 25.menu-container { 26 z-index: 2; 27 position: relative; 28 display:flex; 29 align-items: stretch; 30 overflow: hidden; 31 height: 100vh; 32 width: 100vw; 33 pointer-events:none; 34} 35 36.menu { 37 display:flex; 38 justify-content: center; 39 align-items: center; 40 position: absolute; 41 height: 100vh; 42 width: 100vw; 43 z-index: 3; 44 top: 0; 45 left: 0; 46 right: 0; 47 bottom: 0; 48 transform: translateY(-100%); 49 transition: transform 0.5s; 50 transition-delay:0.5s; 51 visibility: hidden; 52 ul { 53 li { 54 font-family: 'Roboto', sans-serif; 55 font-weight: 100; 56 font-size: 45px; 57 color: white; 58 min-height: 45px; 59 padding: 15px; 60 text-align: center; 61 a{ 62 cursor:pointer; 63 } 64 } 65 } 66} 67 68.menu-sliders { 69 flex: 1; 70 display: flex; 71 justify-content: center; 72 align-items: center; 73 transition: flex 0.45s; 74 &:nth-child(2) { 75 flex:1 0 100%; 76 background: transparent; 77 } 78 &:nth-child(odd){ 79 background: darken(dodgerblue,20%); 80 } 81} 82 83.plus-btn-pos { 84 position: absolute; 85 top: 20px; 86 right: 20px; 87 z-index: 5; 88} 89 90.plus-btn { 91 width: 40px; 92 height: 40px; 93 border-radius: 40px; 94 background: white; 95 position: relative; 96 box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 97 cursor:pointer; 98 div{ 99 position: absolute; 100 top: 50%; 101 left: 50%; 102 width: 16px; 103 height: 3px; 104 background: rgba(2, 89, 165, 1); 105 transition: transform 0.3s; 106 transition-delay: 0.5s; 107 } 108 .r1{ 109 transform: translateX(-50%)translateY(-50%)rotate(-90deg); 110 } 111 .r2{ 112 transform: translateX(-50%)translateY(-50%)rotate(-180deg); 113 } 114 115 &:hover{ 116 background: rgba(2, 89, 165, 1); 117 div{ 118 background: white; 119 } 120 } 121 &:active{ 122 box-shadow: none; 123 } 124} 125 126body.menu-open { 127 .menu-sliders:nth-child(2) { 128 flex:0 0 0%; 129 } 130 .menu { 131 transform: translateY(0%); 132 visibility: visible; 133 pointer-events:all; 134 } 135 .plus-btn { 136 .r1{ 137 transform: translateX(-50%)translateY(-50%)rotate(-45deg); 138 } 139 .r2{ 140 transform: translateX(-50%)translateY(-50%)rotate(-135deg); 141 } 142 } 143}
javascriptのコード
javascript
1$('.plus-btn').click(function(){ 2 $('body').toggleClass('menu-open'); 3})
変換後に埋め込んだHTML
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="shortcut icon" type="image/x-icon" href="ImageMaterial\Ristuka_ImageMaterial\favicon.ico"> 9 <link rel="stylesheet" href="index.css"> 10 11 <title>リツカ Official</title> 12</head> 13 14<body> 15 <!-- ここよりヘッダー --> 16 <div> 17 <div class="plus-btn-pos"> 18 <div class="plus-btn"> 19 <div class="r1"></div> 20 <div class="r2"></div> 21 </div> 22 </div> 23 24 <div class="content"> 25 <div> 26 <h1> 27 Fullscreen Menu 28 </h1> 29 <h2> 30 Flexbox Style 31 </h2> 32 </div> 33 </div> 34 35 <div class="menu-container"> 36 <div class="menu-sliders"></div> 37 <div class="menu-sliders"></div> 38 <div class="menu-sliders"></div> 39 <div class="menu"> 40 <ul> 41 <li> 42 <a>text</a> 43 </li> 44 <li> 45 <a>text</a> 46 </li> 47 <li> 48 <a>text</a> 49 </li> 50 <li> 51 <a>text</a> 52 </li> 53 </ul> 54 </div> 55 </div> 56 </header> 57 <!-- ここまでヘッダー --> 58 59 <!-- JavaScript読み込み --> 60 <script src="index.js"></script> 61</body> 62 63</html>
変換後に埋め込んだCSS
CSS
1.content { 2 display: -webkit-box; 3 display: -ms-flexbox; 4 display: flex; 5 -webkit-box-pack: center; 6 -ms-flex-pack: center; 7 justify-content: center; 8 -webkit-box-align: center; 9 -ms-flex-align: center; 10 align-items: center; 11 position: absolute; 12 height: 100vh; 13 width: 100vw; 14 z-index: 1; 15 text-align: center; 16 color: black; 17} 18 19.content h1 { 20 font-size: 60px; 21 margin-bottom: 15px; 22 font-weight: 300; 23}
埋め込んだJavaScript
JavaScript
1$('.plus-btn').click(function(){ 2 $('body').toggleClass('menu-open'); 3})
回答1件
0
ベストアンサー
jQuery を読み込みましょう。
【【最新版】jQueryのcdnを読み込む方法【超簡単です！】 | クリ★スタ】
https://crestadesign.org/jquery-cdn/
【jQuery CDN】
https://code.jquery.com/
投稿2021/07/03 14:42
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/03 14:58