[update] : スマホ用メニューを改善

diff --git a/buildmydist-2/commonhtml/header.php b/buildmydist-2/commonhtml/header.php
index 4a7630c..77c0a71 100644 (file)
--- a/buildmydist-2/commonhtml/header.php
+++ b/buildmydist-2/commonhtml/header.php
@@ -1,6 +1,5 @@
-
+<i class="fas fa-align-justify fa-3x" id="open-sp-menu"></i>
 <header id="header">
-        <i class="fas fa-align-justify fa-3x" id="open-sp-menu" style="position: fixed; top:0; left: 0;padding-top: 1%;padding-left: 1%;"></i>
         <h1 class="bar-logo">
             <a href="/buildmydist-2/index.php">オリジナルLinuxディストリを自作しよう <?php echo "${title}" ?></a>
         </h1>

diff --git a/buildmydist-2/script/header.js b/buildmydist-2/script/header.js
index 33725d8..0018aa7 100644 (file)
--- a/buildmydist-2/script/header.js
+++ b/buildmydist-2/script/header.js
@@ -14,23 +14,58 @@ window.addEventListener("load", SetCurrentPage);
 
 
 // メニュー開閉
-function SwitchMenu (){
+function SwitchMenu (command){
     var open = "";
     var close = "";
 
     var menu = document.getElementById("bar-container");
     var button = document.getElementById("open-sp-menu");
 
-    if(menu.classList.contains("show-menu")){
+    function NemuClose() {
+        //console.log("Close!")
         menu.classList.replace("show-menu", "hide-menu");
         button.textContent = open;
-    }else if(menu.classList.contains("hide-menu")){
+    }
+
+    function MenuOpen() {
+        //console.log("Open!")
         menu.classList.replace("hide-menu", "show-menu");
         button.textContent = close;
+    }
+
+    if (command){
+        if(command == "open"){
+            MenuOpen();
+            return;
+        }else if(command == "close"){
+            NemuClose();
+            return;
+        }
+    }
+    if(menu.classList.contains("show-menu")){
+        NemuClose();
+    }else if(menu.classList.contains("hide-menu")){
+        MenuOpen();
     }else{
         menu.classList.add("show-menu")
-        button.textContent = open;
     }
+
+
+
 }
 document.getElementById("open-sp-menu").addEventListener("click", SwitchMenu);
 document.getElementById("open-sp-menu").addEventListener("load", SwitchMenu);
+
+window.addEventListener("load", function () {
+    // スマホCSSが適用されてる場合の処理
+    if (document.body.clientWidth < 799){
+        $("main").css({
+            paddingTop: $("header").outerHeight() + "px"
+        })
+        document.body.addEventListener("click", (e) => {
+            if(! (e.target.closest("#header") || e.target.closest("#open-sp-menu") )&& document.getElementById("bar-container").classList.contains("show-menu") ){
+                SwitchMenu("close");
+            }
+        })
+    }
+})

diff --git a/buildmydist-2/style/sp.css b/buildmydist-2/style/sp.css
index 26cfeab..c4c602f 100644 (file)
--- a/buildmydist-2/style/sp.css
+++ b/buildmydist-2/style/sp.css
@@ -32,10 +32,36 @@
 .show-menu{
     display: inline-block !important;
 }
+
+#header{
+    position: fixed;
+    top: 0;
+}
+
+#open-sp-menu{
+    position: fixed;
+    top:0;
+    left: 0;
+    padding-top: 1%;
+    padding-left: 1%;
+    z-index: 1000;
+    color: white;
+}
 /* === ここまでメニューバー === */
 
+
 /* === ここからサイドメニュー === */
 #sidemenu-right{
  display: none;
 }
 /* === ここまでサイドメニュー === */
+
+
+/* === ここから本文 === */
+main{
+    /* メインコンテンツの横の余白 */
+    padding-left: 1%;
+    padding-right: 1%;
+    margin: 1%;
+}
+/* === ここまで本文 === */
\ No newline at end of file