Update menu.html

2fd13117 · HouTeng Chan · 9ebb63b0 · 2fd13117
Commit 2fd13117 authored 8 months ago by HouTeng Chan
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -3,36 +3,45 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Updated Navigation Bar with Centered Items and New Links</title>
+    <title>Enhanced Navigation Bar with Improved Design</title>
    <style>
      body {
          margin: 0;
-          font-family: 'Times New Roman', serif;
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+          background-color: #f0f0f0;
      }

      .my-nav {
-          background-color: #ffe4e1;
-          padding: 5px 0;
+          background-color: rgba(255, 228, 225, 0.95);
+          padding: 10px 0;
          position: fixed;
          width: 100%;
          top: 0;
          left: 0;
          z-index: 1000;
-          height: 50px;
-          border-radius: 20px;
+          height: 60px;
+          border-bottom: 2px solid #fa8072;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
          display: flex;
          justify-content: center;
+          transition: all 0.3s ease;
      }
+
      .logo-container {
          position: absolute;
-          top: 50px;
-          left: 10px;
+          top: 70px;
+          left: 20px;
          z-index: 1030;
+          transition: all 0.3s ease;
      }
+
      .navbar-logo {
-          height: 200px;
+          height: 180px;
          border-radius: 30px;
+          box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+          transition: all 0.3s ease;
      }
+
      .my-navbar {
          list-style-type: none;
          padding: 0;
@@ -42,50 +51,84 @@
          align-items: center;
          height: 100%;
      }
+
      .my-navbar > li {
          position: relative;
-          margin: 0 10px;
+          margin: 0 15px;
      }
+
      .my-navbar > li > a {
-          color: black;
+          color: #333;
          text-decoration: none;
-          padding: 5px 10px;
+          padding: 10px 15px;
          display: block;
-          border-radius: 15px;
-          transition: background-color 0.3s, color 0.3s;
+          border-radius: 20px;
+          transition: all 0.3s ease;
+          font-weight: 500;
+          letter-spacing: 0.5px;
      }
+
      .my-navbar > li > a:hover,
      .my-navbar > li > a.active {
          background-color: #fa8072;
          color: white;
+          transform: translateY(-2px);
+          box-shadow: 0 4px 10px rgba(250, 128, 114, 0.3);
      }
+
      .son {
          display: none;
          position: absolute;
-          background-color: #ffe4e1;
-          min-width: 180px; /* 增加寬度 */
-          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+          background-color: rgba(255, 255, 255, 0.95);
+          min-width: 200px;
+          box-shadow: 0 8px 16px rgba(0,0,0,0.1);
          z-index: 1;
          opacity: 0;
-          transition: opacity 0.3s;
+          transition: all 0.3s ease;
          top: 100%;
-          border-radius: 20px; 
+          border-radius: 10px;
+          overflow: hidden;
      }
+
      .son li a {
-          color: #2B5D6F;
-          padding: 12px 16px;
+          color: #333;
+          padding: 12px 20px;
          text-decoration: none;
          display: block;
-          border-radius: 20px; 
-          white-space: nowrap; /* 防止文本換行 */
+          transition: all 0.2s ease;
+          white-space: nowrap;
      }

      .son li a:hover {
-          background-color: #f1f1f1;
-          border-radius: 20px; 
+          background-color: #fa8072;
+          color: white;
      }
-     
-  </style>
+
+      @media (max-width: 768px) {
+          .my-nav {
+              height: auto;
+              padding: 10px;
+          }
+
+          .my-navbar {
+              flex-direction: column;
+              align-items: flex-start;
+          }
+
+          .my-navbar > li {
+              margin: 5px 0;
+          }
+
+          .logo-container {
+              position: static;
+              margin-bottom: 10px;
+          }
+
+          .navbar-logo {
+              height: 100px;
+          }
+      }
+    </style>
 </head>

 <body>
@@ -122,9 +165,8 @@
                    <li><a href="{{ url_for('pages', page='software') }}">Software</a></li>
                </ul>
            </li>
-
            <li onmouseover="over(this)" onmouseleave="leave(this)">
-                <a href="{{ url_for('pages', page='human-practices') }}"" style="cursor:default;">Human Practices</a>
+                <a href="{{ url_for('pages', page='human-practices') }}" style="cursor:default;">Human Practices</a>
                <ul class="son">
                    <li><a href="{{ url_for('pages', page='education') }}">Education</a></li>
                    <li><a href="{{ url_for('pages', page='entrepreneurship') }}">Entrepreneurship</a></li>
@@ -141,17 +183,16 @@
        </ul>
    </nav>

-
    <script>
        function over(el){
            el.children[0].classList.add('active');
            if (el.children.length > 1){
                let son = el.children[1];
                if (getComputedStyle(son,null)["display"]=="none"){
+                    son.style.display = "block";
                    setTimeout(function(){
                        son.style.opacity = 1;
-                    }, 1);
-                    son.style.display = "block";
+                    }, 10);
                }
            }
        }
@@ -163,12 +204,10 @@
                    son.style.opacity = 0;
                    setTimeout(function(){
                        son.style.display = "none";
-                    }, 350);
+                    }, 300);
                }
            } 
        }
-
-       
    </script>
 </body>
-</html>
+</html>
\ No newline at end of file