Merge pull request #95 from crashRT/hamburger

ハンバーガーメニューの実装
crashRT · Nov 13, 2024 · 997a106 · 997a106
2 parents 70b39fd + eca610c
commit 997a106
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 35 deletions.
diff --git a/requirements.txt b/requirements.txt
diff --git a/static/css/style.css b/static/css/style.css
@@ -76,6 +76,7 @@
   --bs-link-hover-color: #b3505f;
   --bs-code-color: #d63384;
   --bs-highlight-bg: #fff3cd;
+  --easing: cubic-bezier(0.87, 0, 0.13, 1);
 }
 
 h2 {
@@ -133,6 +134,8 @@ h2 {
 
 .nav-item {
   margin-left: 1rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 html {
@@ -181,3 +184,105 @@ header {
   padding: 24px;
   background-color: var(--bs-body-bg);
 }
+
+.c-header__list-link:hover {
+  filter: opacity(0.6); /* カスタマイズしてください */
+}
+
+.c-hamburger-menu {
+  position: relative;
+}
+
+@media screen and (max-width: 1000px) {
+  .c-hamburger-menu__list {
+    background-color: var(--bs-body-bg); /* カスタマイズしてください */
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    left: 0;
+    padding: 2rem; /* カスタマイズしてください */
+    position: absolute;
+    transform: translateX(100%);
+    transition: 0s; /* カスタマイズしてください */
+    top: 100%;
+    width: 100%;
+    border-radius: 0.5rem;
+    box-shadow: 5px 5px 10px var(--shadow-color),
+      -5px -5px 10px var(--light-color), 2px 2px 2px var(--shadow-color),
+      -2px -2px 2px var(--light-color);
+  }
+
+  #hamburger:checked ~ .c-hamburger-menu__list {
+    transform: translateX(20%);
+    transition: 0.3s var(--easing);
+  }
+}
+
+.c-hamburger-menu__input {
+  display: none;
+}
+
+.c-hamburger-menu__bg {
+  background-color: var(--bs-body-bg); /* カスタマイズしてください */
+  cursor: pointer;
+  display: none;
+  height: 100vh;
+  left: 0;
+  opacity: 0.5; /* カスタマイズしてください */
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+#hamburger:checked ~ .c-hamburger-menu__bg {
+  display: block;
+}
+
+.c-hamburger-menu__button {
+  display: none;
+}
+
+@media screen and (max-width: 1000px) {
+  .c-hamburger-menu__button {
+    align-items: center;
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 7px; /* カスタマイズしてください */
+    height: 60px; /* カスタマイズしてください */
+    justify-content: center;
+    width: 60px; /* カスタマイズしてください */
+    border-radius: 100%;
+  }
+}
+
+.c-hamburger-menu__button-mark {
+  background-color: var(--bs-body-color); /* カスタマイズしてください */
+  display: block;
+  height: 3px; /* カスタマイズしてください */
+  transition: 0.3s var(--easing); /* カスタマイズしてください */
+  width: 30px; /* カスタマイズしてください */
+}
+
+@media screen and (max-width: 1000px) {
+  #hamburger:checked
+    ~ .c-hamburger-menu__button
+    .c-hamburger-menu__button-mark:nth-of-type(1) {
+    transform: translate(5px, -1px) rotate(45deg); /* カスタマイズしてください */
+    transform-origin: 0%; /* カスタマイズしてください */
+  }
+  #hamburger:checked
+    ~ .c-hamburger-menu__button
+    .c-hamburger-menu__button-mark:nth-of-type(2) {
+    opacity: 0;
+  }
+  #hamburger:checked
+    ~ .c-hamburger-menu__button
+    .c-hamburger-menu__button-mark:nth-of-type(3) {
+    transform: translate(5px, 1px) rotate(-45deg); /* カスタマイズしてください */
+    transform-origin: 0%; /* カスタマイズしてください */
+  }
+}
diff --git a/templates/info/about.html b/templates/info/about.html
@@ -8,12 +8,15 @@
 
 
 <header class="mb-4">
-    <div class="container d-flex flex-wrap justify-content-center py-3 px-5">
+    <div class="container d-flex flex-wrap justify-content-between py-3 px-5 a-humburger">
         <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
             <img src="/media/Logo/crashrt_alpha.png" alt="crashRT">
         </a>
+        <input type="checkbox" name="hamburger" id="hamburger"
+            class="c-hamburger-menu__input" /><!-- 追記 idはlabelのforと同じにする -->
+        <label for="hamburger" class="c-hamburger-menu__bg"></label><!-- 追記 ハンバーガーメニュを開いた時の背景 -->
 
-        <ul class="nav nav-pills">
+        <ul class="nav nav-pills c-hamburger-menu__list">
             <li class="nav-item"><a href={% url 'top' %} class="nav-link neu-shadow">Home</a></li>
             <li class="nav-item"><a href={% url 'worklist' %} class="nav-link neu-shadow">Graphics</a></li>
             <li class="nav-item"><a href={% url 'projectslist' %} class="nav-link neu-shadow">DevProjects</a>
@@ -22,6 +25,12 @@
             <li class="nav-item"><a href={% url 'about' %} class="nav-link active" aria-current="page">About</a></li>
             <li class="nav-item"><a href={% url 'contact' %} class="nav-link neu-shadow">Contact</a></li>
         </ul>
+        <label for="hamburger" class="c-hamburger-menu__button neu-shadow"><!-- 追記 ハンバーガーメニューのボタン -->
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+        </label>
+
     </div>
 </header>
 
@@ -44,7 +53,7 @@ <h1 class="fw-light"> About </h1>
                     </div>
                     <div class="col-lg-6">
                         <h2 class="display-5 fw-bold lh-1 mb-3">crashRT</h2>
-                        <p class="lead">Web / Network / Motion Graphics / 3DCG</p>
+                        <p class="lead"> Network / Web / 3DCG / Motion Graphics </p>
                         <p class="fs-5"> <a class="text-decoration-none" href="https://www.kmc.gr.jp/">京大マイコンクラブ
                                 (KMC)</a>
                             45代部員

diff --git a/templates/info/contact.html b/templates/info/contact.html
@@ -8,12 +8,15 @@
 
 
 <header class="mb-4">
-    <div class="container d-flex flex-wrap justify-content-center py-3 px-5">
+    <div class="container d-flex flex-wrap justify-content-between py-3 px-5 a-humburger">
         <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
             <img src="/media/Logo/crashrt_alpha.png" alt="crashRT">
         </a>
+        <input type="checkbox" name="hamburger" id="hamburger"
+            class="c-hamburger-menu__input" /><!-- 追記 idはlabelのforと同じにする -->
+        <label for="hamburger" class="c-hamburger-menu__bg"></label><!-- 追記 ハンバーガーメニュを開いた時の背景 -->
 
-        <ul class="nav nav-pills">
+        <ul class="nav nav-pills c-hamburger-menu__list">
             <li class="nav-item"><a href={% url 'top' %} class="nav-link neu-shadow">Home</a></li>
             <li class="nav-item"><a href={% url 'worklist' %} class="nav-link neu-shadow">Graphics</a></li>
             <li class="nav-item"><a href={% url 'projectslist' %} class="nav-link neu-shadow">DevProjects</a></li>
@@ -22,6 +25,11 @@
             <li class="nav-item"><a href={% url 'contact' %} class="nav-link active" aria-current="page">Contact</a>
             </li>
         </ul>
+        <label for="hamburger" class="c-hamburger-menu__button neu-shadow"><!-- 追記 ハンバーガーメニューのボタン -->
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+        </label>
     </div>
 </header>
 

diff --git a/templates/notes/header.html b/templates/notes/header.html
@@ -1,10 +1,13 @@
 <header class="mb-4">
-    <div class="container d-flex flex-wrap justify-content-center py-3 px-5">
+    <div class="container d-flex flex-wrap justify-content-between py-3 px-5 a-humburger">
         <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
             <img src="/media/Logo/crashrt_alpha.png" alt="crashRT">
         </a>
+        <input type="checkbox" name="hamburger" id="hamburger"
+            class="c-hamburger-menu__input" /><!-- 追記 idはlabelのforと同じにする -->
+        <label for="hamburger" class="c-hamburger-menu__bg"></label><!-- 追記 ハンバーガーメニュを開いた時の背景 -->
 
-        <ul class="nav nav-pills">
+        <ul class="nav nav-pills c-hamburger-menu__list">
             <li class="nav-item"><a href={% url 'top' %} class="nav-link neu-shadow">Home</a></li>
             <li class="nav-item"><a href={% url 'worklist' %} class="nav-link neu-shadow">Graphics</a></li>
             <li class="nav-item"><a href={% url 'projectslist' %} class="nav-link neu-shadow">DevProjects</a></li>
@@ -13,5 +16,10 @@
             <li class="nav-item"><a href={% url 'about' %} class="nav-link neu-shadow">About</a></li>
             <li class="nav-item"><a href={% url 'contact' %} class="nav-link neu-shadow">Contact</a></li>
         </ul>
+        <label for="hamburger" class="c-hamburger-menu__button neu-shadow"><!-- 追記 ハンバーガーメニューのボタン -->
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+        </label>
     </div>
 </header>
diff --git a/templates/projects/header.html b/templates/projects/header.html
@@ -1,10 +1,13 @@
 <header class="mb-4">
-    <div class="container d-flex flex-wrap justify-content-center py-3 px-5">
+    <div class="container d-flex flex-wrap justify-content-between py-3 px-5 a-humburger">
         <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
             <img src="/media/Logo/crashrt_alpha.png" alt="crashRT">
         </a>
+        <input type="checkbox" name="hamburger" id="hamburger"
+            class="c-hamburger-menu__input" /><!-- 追記 idはlabelのforと同じにする -->
+        <label for="hamburger" class="c-hamburger-menu__bg"></label><!-- 追記 ハンバーガーメニュを開いた時の背景 -->
 
-        <ul class="nav nav-pills">
+        <ul class="nav nav-pills c-hamburger-menu__list">
             <li class="nav-item"><a href={% url 'top' %} class="nav-link neu-shadow">Home</a></li>
             <li class="nav-item"><a href={% url 'worklist' %} class="nav-link neu-shadow">Graphics</a></li>
             <li class="nav-item"><a href={% url 'projectslist' %} class="nav-link active"
@@ -13,5 +16,10 @@
             <li class="nav-item"><a href={% url 'about' %} class="nav-link neu-shadow">About</a></li>
             <li class="nav-item"><a href={% url 'contact' %} class="nav-link neu-shadow">Contact</a></li>
         </ul>
+        <label for="hamburger" class="c-hamburger-menu__button neu-shadow"><!-- 追記 ハンバーガーメニューのボタン -->
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+        </label>
     </div>
 </header>
diff --git a/templates/top/index.html b/templates/top/index.html
@@ -8,12 +8,15 @@
 {% block content %}
 
 <header class="mb-4">
-    <div class="container d-flex flex-wrap justify-content-center py-3 px-5">
+    <div class="container d-flex flex-wrap justify-content-between py-3 px-5 a-humburger">
         <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
             <img src="/media/Logo/crashrt_alpha.png" alt="crashRT">
         </a>
+        <input type="checkbox" name="hamburger" id="hamburger"
+            class="c-hamburger-menu__input" /><!-- 追記 idはlabelのforと同じにする -->
+        <label for="hamburger" class="c-hamburger-menu__bg"></label><!-- 追記 ハンバーガーメニュを開いた時の背景 -->
 
-        <ul class="nav nav-pills">
+        <ul class="nav nav-pills c-hamburger-menu__list">
             <li class="nav-item"><a href={% url 'top' %} class="nav-link active" aria-current="page">Home</a>
             </li>
             <li class="nav-item"><a href={% url 'worklist' %} class="nav-link neu-shadow">Graphics</a></li>
@@ -22,6 +25,11 @@
             <li class="nav-item"><a href={% url 'about' %} class="nav-link neu-shadow">About</a></li>
             <li class="nav-item"><a href={% url 'contact' %} class="nav-link neu-shadow">Contact</a></li>
         </ul>
+        <label for="hamburger" class="c-hamburger-menu__button neu-shadow"><!-- 追記 ハンバーガーメニューのボタン -->
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+        </label>
     </div>
 </header>
 
@@ -33,7 +41,7 @@
                     width="300" height="300" loading="lazy">
                 <img>
                 <h1>crashRT</h1>
-                <p class="lead">Network / Web/ 3DCG / MotionGraphics</p>
+                <p class="lead">Network / Web / 3DCG / MotionGraphics</p>
 
             </div>
         </div>
@@ -42,24 +50,27 @@ <h1>crashRT</h1>
     <section>
         <div class="album py-5 my-3">
             <div class="container">
-                <a href="{% url 'worklist' %}" class=" text-reset text-decoration-none ">
-                    <h2 class="text-center">Graphics</h2>
+                <a href="{% url 'projectslist' %}" class=" text-reset text-decoration-none ">
+                    <h2 class="text-center">DevProjects</h2>
                 </a>
                 <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-                    {% for work in works_list%}
+                    {% for project in projects_list %}
                     <div class="col">
-                        <a href="/works/detail/{{work.pk}}">
-                            <div class="card neu-shadow">
-
-                                <img class="cart-body" width="100%" src="/media/works/thumbnail/{{work.thumbnail}}">
-
+                        <a href={% url 'projectsdetail' project.pk %} class="text-reset text-decoration-none">
+                            <div class="card neu-shadow h-100">
+                                <img class="cart-body" width="100%"
+                                    src="../../media/projects/thumbnail/{{project.thumbnail}}">
+                                <div class="card-body">
+                                    <h3>{{project.title}}</h3>
+                                    <p class="card-text">{{project.abstract}}</p>
+                                </div>
                             </div>
                         </a>
                     </div>
                     {% endfor %}
                 </div>
                 <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-                    <a href="{% url 'worklist' %}">
+                    <a href="{% url 'projectslist' %}">
                         <button class="btn btn-outline-secondary my-3" type="button">more</button>
                     </a>
                 </div>
@@ -69,27 +80,24 @@ <h2 class="text-center">Graphics</h2>
     <section>
         <div class="album py-5 my-3">
             <div class="container">
-                <a href="{% url 'projectslist' %}" class=" text-reset text-decoration-none ">
-                    <h2 class="text-center">DevProjects</h2>
+                <a href="{% url 'worklist' %}" class=" text-reset text-decoration-none ">
+                    <h2 class="text-center">Graphics</h2>
                 </a>
                 <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-                    {% for project in projects_list %}
+                    {% for work in works_list%}
                     <div class="col">
-                        <a href={% url 'projectsdetail' project.pk %} class="text-reset text-decoration-none">
-                            <div class="card neu-shadow h-100">
-                                <img class="cart-body" width="100%"
-                                    src="../../media/projects/thumbnail/{{project.thumbnail}}">
-                                <div class="card-body">
-                                    <h3>{{project.title}}</h3>
-                                    <p class="card-text">{{project.abstract}}</p>
-                                </div>
+                        <a href="/works/detail/{{work.pk}}">
+                            <div class="card neu-shadow">
+
+                                <img class="cart-body" width="100%" src="/media/works/thumbnail/{{work.thumbnail}}">
+
                             </div>
                         </a>
                     </div>
                     {% endfor %}
                 </div>
                 <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-                    <a href="{% url 'projectslist' %}">
+                    <a href="{% url 'worklist' %}">
                         <button class="btn btn-outline-secondary my-3" type="button">more</button>
                     </a>
                 </div>

diff --git a/templates/works/header.html b/templates/works/header.html
@@ -1,10 +1,13 @@
 <header class="mb-4">
-    <div class="container d-flex flex-wrap justify-content-center py-3 px-5">
+    <div class="container d-flex flex-wrap justify-content-between py-3 px-5 a-humburger">
         <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
             <img src="/media/Logo/crashrt_alpha.png" alt="crashRT">
         </a>
+        <input type="checkbox" name="hamburger" id="hamburger"
+            class="c-hamburger-menu__input" /><!-- 追記 idはlabelのforと同じにする -->
+        <label for="hamburger" class="c-hamburger-menu__bg"></label><!-- 追記 ハンバーガーメニュを開いた時の背景 -->
 
-        <ul class="nav nav-pills">
+        <ul class="nav nav-pills c-hamburger-menu__list">
             <li class="nav-item"><a href={% url 'top' %} class="nav-link neu-shadow">Home</a></li>
             <li class="nav-item"><a href={% url 'worklist' %} class="nav-link active" aria-current="page">Graphics</a>
             </li>
@@ -13,5 +16,10 @@
             <li class="nav-item"><a href={% url 'about' %} class="nav-link neu-shadow">About</a></li>
             <li class="nav-item"><a href={% url 'contact' %} class="nav-link neu-shadow">Contact</a></li>
         </ul>
+        <label for="hamburger" class="c-hamburger-menu__button neu-shadow"><!-- 追記 ハンバーガーメニューのボタン -->
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+            <span class="c-hamburger-menu__button-mark"></span>
+        </label>
     </div>
 </header>