質問編集履歴

JSの分割

2019/11/29 02:09

投稿

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -22,6 +22,10 @@
 ```html
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン
 <div class="hamburger">
             <div class="Toggle">
@@ -296,9 +300,9 @@
-```Javascript
+```javascript
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン
+//hambuger.js
@@ -320,66 +324,52 @@
         }
-        $('#nav a').on('click', function() {
-            $('#nav').toggleClass('active');
-            $(".Toggle").toggleClass('active');
-        })
     });
 });
+```
+```javascript
-//Hamburger
+//scroll.js
-$(function(){
+$(function () {
     $('a[href^=#]').click(function() {
-        var speed = 400;
+        var speed = 400;
         var href= $(this).attr("href");
         var target = $(href == "#" || href == "" ? 'html' : href);
         var position = target.offset().top;
         $('body,html').animate({scrollTop:position}, speed, 'swing');
+        $('.NavMenu').removeClass('open');
+        $('.NavMenu').removeClass('active');
+        $(".Toggle").removeClass('active');
         return false;
     });
 });
-//scroll
 ```

Hamburger.cssの追加

2019/11/29 02:09

投稿

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -174,6 +174,124 @@
 }
+//scroll.css
+nav.NavMenu {
+    position: fixed; /*表示位置を固定*/
+    z-index: 2; /*重ね順を変更*/
+    top: 0; /*表示位置を指定*/
+    left: 0; /*表示位置を指定*/
+    background: transparent; /*背景を透明にする*/
+    color: #000; /*文字色を白にする*/
+    text-align: center; /*テキストを中央揃え*/
+    width: 100%; /*全幅表示*/
+    transform: translateY(-100%); /*ナビを上に隠す*/
+    transition: all 0.6s; /*アニメーションの時間を指定*/
+}
+.open.NavMenu {
+    top: 60px;
+}
+nav.NavMenu ul {
+    background: #ccc; /*背景をグレーにする*/
+    width: 100%;
+    margin: 0 auto;
+    padding: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.9);
+}
+nav.NavMenu ul li {
+    font-size: 1.1em;
+    list-style-type: none;
+    padding: 0;
+    width: 100%;
+}
+nav.NavMenu ul li:last-child {
+    padding-bottom: 0;
+    border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
+}
+nav.NavMenu ul li a {
+    display: block; /*クリックできる領域を広げる*/
+    color: #ffffff;
+    padding: 1em 0;
+    text-decoration: none;
+}
+nav.NavMenu.active {
+    transform: translateY(0%);
+}
+//Hamburger.css
 ```

CSSの追記

2019/11/28 22:31

投稿

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -68,6 +68,116 @@
 ```
+```CSS
+.Toggle {
+    /* display: inline-block; */
+    position: relative;
+    /* right: 13px; */
+    /* top: 12px; */
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    z-index: 3;
+    /* text-align: right; */
+}
+.Toggle span {
+    display: block;
+    position: absolute;
+    width: 30px;
+    border-bottom: solid 5px #ff8c00;
+    -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
+    -moz-transition: .35s ease-in-out; /*変化の速度を指定*/
+    transition: .35s ease-in-out; /*変化の速度を指定*/
+    left: 6px;
+}
+.Toggle span:nth-child(1) {
+    top: 9px;
+}
+.Toggle span:nth-child(2) {
+    top: 18px;
+}
+.Toggle span:nth-child(3) {
+    top: 27px;
+}
+.Toggle.active span:nth-child(1) {
+    top: 18px;
+    left: 6px;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+.Toggle.active span:nth-child(2),
+.Toggle.active span:nth-child(3) {
+    top: 18px;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+```
 ```Javascript
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン

書式の改善

2019/11/28 06:40

投稿

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -70,7 +70,7 @@
 ```Javascript
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>//jQueryのバージョン

jQueryのバージョンを記述

2019/11/28 05:02

投稿

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -70,7 +70,7 @@
 ```Javascript
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

div抜け等の修正

2019/11/28 05:01

投稿

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -22,7 +22,7 @@
 ```html
-div class="hamburger">
+<div class="hamburger">
             <div class="Toggle">
@@ -108,7 +108,7 @@
 });
-<!--Hamburger -->
+//Hamburger
@@ -146,7 +146,7 @@
 });
-<!-- scroll -->
+//scroll