[update] : 現在のページを強調

diff --git a/buildmydist-2/commonhtml/head.php b/buildmydist-2/commonhtml/head.php
index 8714fbe..03c65ed 100644 (file)
--- a/buildmydist-2/commonhtml/head.php
+++ b/buildmydist-2/commonhtml/head.php
@@ -19,5 +19,11 @@
 <link rel="stylesheet" href="/buildmydist-2/style/sp.css" media="screen and (max-width: 799px)">
 <link rel="stylesheet" href="/buildmydist-2/style/pc.css" media="screen and (min-width: 800px)">
 
+<!-- ページ設定をJSに渡す -->
+<script>
+    var distro = "<?php echo "${distro}";?>";
+    var title = "<?php echo "${title}";?>";
+</script>
+
 <title><?php echo "${_GET["title"]}" ?> | オリジナルLinuxディストリを自作しよう2</title>
 

diff --git a/buildmydist-2/commonhtml/header.php b/buildmydist-2/commonhtml/header.php
index c36c327..2822d30 100644 (file)
--- a/buildmydist-2/commonhtml/header.php
+++ b/buildmydist-2/commonhtml/header.php
@@ -9,13 +9,13 @@
 
         <p>
             <ul id="bar-container">
-                <li class="bar-item-left"><a href="/buildmydist-2/">トップ</a></li>
-                <li class="bar-item-left"><a href="/buildmydist-2/pages/ubuntu1804/">Ubuntu 18.04</a></li>
-                <li class="bar-item-left"><a href="/buildmydist-2/pages/ubuntu2004/">Ubuntu 20.04</a></li>
-                <li class="bar-item-left"><a href="/buildmydist-2/pages/fedora33/">Fedora 33</a></li>
-                <li class="bar-item-left"><a href="/buildmydist-2/pages/archiso/">Arch Linux</a></li>
-                <li class="bar-item-left"><a href="/buildmydist-2/pages/alteriso3/">Alter Linux</a></li>
-                <li class="bar-item-left"><a href="/buildmydist-2/pages/misc/">その他の雑学</a></li>
+                <li class="bar-item-left" data-pagename="top"><a href="/buildmydist-2/">トップ</a></li>
+                <li class="bar-item-left" data-pagename="ubuntu1804"><a href="/buildmydist-2/pages/ubuntu1804/">Ubuntu 18.04</a></li>
+                <li class="bar-item-left" data-pagename="ubuntu2004"><a href="/buildmydist-2/pages/ubuntu2004/">Ubuntu 20.04</a></li>
+                <li class="bar-item-left" data-pagename="fedora33"><a href="/buildmydist-2/pages/fedora33/">Fedora 33</a></li>
+                <li class="bar-item-left" data-pagename="archiso"><a href="/buildmydist-2/pages/archiso/">Arch Linux</a></li>
+                <li class="bar-item-left" data-pagename="alteriso3"><a href="/buildmydist-2/pages/alteriso3/">Alter Linux</a></li>
+                <li class="bar-item-left" data-pagename="misc"><a href="/buildmydist-2/pages/misc/">その他の雑学</a></li>
             </ul>
         </p>
 

diff --git a/buildmydist-2/index.php b/buildmydist-2/index.php
index c8c062c..875ec0b 100644 (file)
--- a/buildmydist-2/index.php
+++ b/buildmydist-2/index.php
@@ -5,6 +5,7 @@
         // ページ設定
         $_GET["title"] = "トップページ";
         $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+        $distro = "top";
 
         // 共通ファイルを読み込み
         $domain = $_SERVER['HTTP_HOST'];

diff --git a/buildmydist-2/pages/alteriso3/index.php b/buildmydist-2/pages/alteriso3/index.php
index 9b4a111..58d5684 100644 (file)
--- a/buildmydist-2/pages/alteriso3/index.php
+++ b/buildmydist-2/pages/alteriso3/index.php
@@ -4,8 +4,9 @@
 
     <?php
         // ページ設定
-        $_GET["title"] = "Alter Linux - トップ";
+        $title = "Alter Linux - トップ";
         $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+        $distro = "alteriso3";
 
         // 共通ファイルを読み込み
         $domain = $_SERVER['HTTP_HOST'];

diff --git a/buildmydist-2/pages/archiso/index.php b/buildmydist-2/pages/archiso/index.php
index c044fe7..dbb66ee 100644 (file)
--- a/buildmydist-2/pages/archiso/index.php
+++ b/buildmydist-2/pages/archiso/index.php
@@ -4,8 +4,9 @@
 
     <?php
         // ページ設定
-        $_GET["title"] = "Arch Linux - トップ";
+        $title = "Arch Linux - トップ";
         $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+        $distro = "archiso";
 
         // 共通ファイルを読み込み
         $domain = $_SERVER['HTTP_HOST'];

diff --git a/buildmydist-2/pages/fedora33/index.php b/buildmydist-2/pages/fedora33/index.php
index 5174a2f..edba155 100644 (file)
--- a/buildmydist-2/pages/fedora33/index.php
+++ b/buildmydist-2/pages/fedora33/index.php
@@ -4,8 +4,9 @@
 
     <?php
         // ページ設定
-        $_GET["title"] = "Fedora 33 - トップ";
+        $title = "Fedora 33 - トップ";
         $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+        $distro = "fedora33";
 
         // 共通ファイルを読み込み
         $domain = $_SERVER['HTTP_HOST'];

diff --git a/buildmydist-2/pages/misc/index.php b/buildmydist-2/pages/misc/index.php
index 8cd52c6..6b77c81 100644 (file)
--- a/buildmydist-2/pages/misc/index.php
+++ b/buildmydist-2/pages/misc/index.php
@@ -4,8 +4,9 @@
 
     <?php
         // ページ設定
-        $_GET["title"] = "その他の雑学";
+        $title = "その他の雑学";
         $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+        $distro = "misc";
 
         // 共通ファイルを読み込み
         $domain = $_SERVER['HTTP_HOST'];

diff --git a/buildmydist-2/pages/template/index.php b/buildmydist-2/pages/template/index.php
index 034267c..bce6cab 100644 (file)
--- a/buildmydist-2/pages/template/index.php
+++ b/buildmydist-2/pages/template/index.php
@@ -4,8 +4,9 @@
 
     <?php
         // ページ設定
-        $_GET["title"] = "OS名 - トップ";
+        $title = "OS名 - トップ";
         $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+        $distro = "osname";
 
         // 共通ファイルを読み込み
         $domain = $_SERVER['HTTP_HOST'];

diff --git a/buildmydist-2/pages/ubuntu1804/index.php b/buildmydist-2/pages/ubuntu1804/index.php
index 71992d0..91ca8d2 100644 (file)
--- a/buildmydist-2/pages/ubuntu1804/index.php
+++ b/buildmydist-2/pages/ubuntu1804/index.php
@@ -4,8 +4,9 @@
 
     <?php
         // ページ設定
-        $_GET["title"] = "Ubuntu 18.04 - トップ";
+        $title = "Ubuntu 18.04 - トップ";
         $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+        $distro = "ubuntu1804";
 
         // 共通ファイルを読み込み
         $domain = $_SERVER['HTTP_HOST'];

diff --git a/buildmydist-2/pages/ubuntu2004/index.php b/buildmydist-2/pages/ubuntu2004/index.php
index 71ddf18..a3220bd 100644 (file)
--- a/buildmydist-2/pages/ubuntu2004/index.php
+++ b/buildmydist-2/pages/ubuntu2004/index.php
@@ -4,8 +4,9 @@
 
     <?php
         // ページ設定
-        $_GET["title"] = "Ubuntu 20.04 - トップ";
+        $title = "Ubuntu 20.04 - トップ";
         $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+        $distro = "ubuntu2004";
 
         // 共通ファイルを読み込み
         $domain = $_SERVER['HTTP_HOST'];

diff --git a/buildmydist-2/script/header.js b/buildmydist-2/script/header.js
index e69de29..ee924b7 100644 (file)
--- a/buildmydist-2/script/header.js
+++ b/buildmydist-2/script/header.js
@@ -0,0 +1,14 @@
+
+
+function SetCurrentPage(){
+    var distroBar = document.getElementById("bar-container");
+    //var barItemCount = distroBar.childElementCount;
+    var barItemList = distroBar.children
+    Array.from(barItemList).forEach(element => {
+        if (element.dataset.pagename == distro ){
+            element.classList.add("currentdistro");
+        }
+    });
+}
+
+window.addEventListener("load", SetCurrentPage);
\ No newline at end of file

diff --git a/buildmydist-2/style/common.css b/buildmydist-2/style/common.css
index 7265cc2..c8373c5 100644 (file)
--- a/buildmydist-2/style/common.css
+++ b/buildmydist-2/style/common.css
@@ -80,6 +80,11 @@ header{
     padding-right: 5%;
     margin: 0;
 }
+
+/* 現在選択されているディストロ */
+.currentdistro{
+    background-color: var(--black-2);
+}
 /* === ここまでメニューバー === */
 
 

diff --git a/buildmydist-2/style/var.css b/buildmydist-2/style/var.css
index 5101f02..04da468 100644 (file)
--- a/buildmydist-2/style/var.css
+++ b/buildmydist-2/style/var.css
@@ -1,6 +1,7 @@
 *{
     --red-1: #e74c3c;
     --black-1: #2c3e50;
-    --white-1: #ecf0f1; 
+    --black-2: #576574;
+    --white-1: #ecf0f1;
 
 }
\ No newline at end of file