[update] : スマホ用のメニューを追加

diff --git a/buildmydist-2/commonhtml/head.php b/buildmydist-2/commonhtml/head.php
index 03c65ed..9ff5512 100644 (file)
--- a/buildmydist-2/commonhtml/head.php
+++ b/buildmydist-2/commonhtml/head.php
@@ -16,7 +16,8 @@
 <link rel="stylesheet" href="/buildmydist-2/style/common.css">
 <link rel="stylesheet" href="/buildmydist-2/style/var.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
-<link rel="stylesheet" href="/buildmydist-2/style/sp.css" media="screen and (max-width: 799px)">
+<link rel="stylesheet" href="/buildmydist-2/style/tablet.css" media="screen and (max-width: 799px)">
+<link rel="stylesheet" href="/buildmydist-2/style/sp.css" media="screen and (max-width: 640px)">
 <link rel="stylesheet" href="/buildmydist-2/style/pc.css" media="screen and (min-width: 800px)">
 
 <!-- ページ設定をJSに渡す -->

diff --git a/buildmydist-2/commonhtml/header.php b/buildmydist-2/commonhtml/header.php
index 8305009..834bea4 100644 (file)
--- a/buildmydist-2/commonhtml/header.php
+++ b/buildmydist-2/commonhtml/header.php
@@ -6,6 +6,7 @@
             様々なディストリビューションの開発の仕方を紹介します。
         </p>
         
+        <p id="open-sp-menu">メニューを開く</p>
 
         <p>
             <ul id="bar-container">

diff --git a/buildmydist-2/script/header.js b/buildmydist-2/script/header.js
index ee924b7..6c9844c 100644 (file)
--- a/buildmydist-2/script/header.js
+++ b/buildmydist-2/script/header.js
@@ -1,5 +1,4 @@
-
-
+// 現在のページ
 function SetCurrentPage(){
     var distroBar = document.getElementById("bar-container");
     //var barItemCount = distroBar.childElementCount;
@@ -11,4 +10,18 @@ function SetCurrentPage(){
     });
 }
 
-window.addEventListener("load", SetCurrentPage);
\ No newline at end of file
+window.addEventListener("load", SetCurrentPage);
+
+
+// メニュー開閉
+document.getElementById("open-sp-menu").addEventListener("click", function(){
+    console.log("実行された")
+    var menu = document.getElementById("bar-container");
+    if(menu.classList.contains("show-menu")){
+        menu.classList.replace("show-menu", "hide-menu");
+    }else if(menu.classList.contains("hide-menu")){
+        menu.classList.replace("hide-menu", "show-menu");
+    }else{
+        menu.classList.add("show-menu")
+    }
+})
\ No newline at end of file

diff --git a/buildmydist-2/style/common.css b/buildmydist-2/style/common.css
index c8373c5..8371ec4 100644 (file)
--- a/buildmydist-2/style/common.css
+++ b/buildmydist-2/style/common.css
@@ -38,18 +38,6 @@ header{
     text-decoration: none;
 }
 
-.bar-logo{
-    font-size: larger;
-    font-weight: 900;
-    float: left;
-    margin-right: 2%;
-}
-
-
-.description, .bar-logo{
-    padding: 0.5%;
-}
-
 /* クリックされたときの色 */
 .bar-item-left:active, .bar-logo:active{
     /* 文字色を設定 */
@@ -59,27 +47,6 @@ header{
     user-select: none;
 }
 
-#bar-container{
-    /* 
-    flexboxでいい感じに配置する
-    参考サイト
-    https://guillemot.jp/web/365
-    https://knowledge.cpi.ad.jp/tech/169/
-    */
-
-    display: flex;
-    justify-content: space-between;
-
-    /* 回り込み解除 */
-    clear: both;
-
-    /* 余白設定 */
-    padding-top: 1%;
-    padding-bottom: 1%;
-    padding-left: 5%;
-    padding-right: 5%;
-    margin: 0;
-}
 
 /* 現在選択されているディストロ */
 .currentdistro{

diff --git a/buildmydist-2/style/pc.css b/buildmydist-2/style/pc.css
index e69de29..0dfdbde 100644 (file)
--- a/buildmydist-2/style/pc.css
+++ b/buildmydist-2/style/pc.css
@@ -0,0 +1,38 @@
+#bar-container{
+    /* 
+    flexboxでいい感じに配置する
+    参考サイト
+    https://guillemot.jp/web/365
+    https://knowledge.cpi.ad.jp/tech/169/
+    */
+
+    display: flex;
+    justify-content: space-between;
+
+    /* 回り込み解除 */
+    clear: both;
+
+    /* 余白設定 */
+    padding-top: 1%;
+    padding-bottom: 1%;
+    padding-left: 5%;
+    padding-right: 5%;
+    margin: 0;
+}
+
+.bar-logo{
+    font-size: larger;
+    font-weight: 900;
+    float: left;
+    margin-right: 2%;
+}
+
+
+.description, .bar-logo{
+    padding: 0.5%;
+}
+
+/* スマホ用ボタンを隠す */
+#open-sp-menu{
+    display: none;
+}
\ No newline at end of file

diff --git a/buildmydist-2/style/sp.css b/buildmydist-2/style/sp.css
index e69de29..13f91ad 100644 (file)
--- a/buildmydist-2/style/sp.css
+++ b/buildmydist-2/style/sp.css
@@ -0,0 +1,33 @@
+.bar-logo{
+    font-size: medium;
+    font-weight: 900;
+    margin-right: 2%;
+}
+
+.description{
+    font-size: small;
+    text-align: center;
+}
+
+#bar-container{
+    justify-content: space-between;
+
+    /* 回り込み解除 */
+    clear: both;
+
+    text-align: center;
+
+    width: 100%;
+    padding-left: 0;
+
+    /* 初期状態で消す */
+    display: none;
+}
+
+.hide-menu{
+    display: none !important;
+}
+
+.show-menu{
+    display: inline-block !important;
+}
\ No newline at end of file