From 25aaab21e575422ea60caa7c128a4acb68681da2 Mon Sep 17 00:00:00 2001
From: ken <poopooken11@gmail.com>
Date: Thu, 21 Aug 2025 13:42:24 +0800
Subject: [PATCH] 'menu'

---
 assets/stylesheets/template/modules/menu.scss | 385 +++++++-----------
 1 file changed, 137 insertions(+), 248 deletions(-)

diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss
index 271b22b..55212c0 100644
--- a/assets/stylesheets/template/modules/menu.scss
+++ b/assets/stylesheets/template/modules/menu.scss
@@ -2,79 +2,6 @@
 
 @import "../initial";
 
-// // 選單樣式2
-// .modules-menu .modules-menu-level-1 > li:hover, .modules-menu .modules-menu-level-1 > li.hover-class{
-//   background-color: transparent!important;
-//   >a{
-//     text-decoration: underline;
-//   }
-// }
-// .modules-menu{
-//     @media (min-width: $screen-sm){
-//       li{
-//           padding-left: 0!important;
-//       }
-//       .modules-menu-level-1 > li > a{
-//         color: $theme-color-second!important;
-//       }
-//     }
-//   .modules-menu-level-0 > li{
-//     @media (min-width: $screen-sm){
-//       position: static!important;
-//     }
-//   }
-//
-//   .modules-menu-level-1{
-//
-//     @media (min-width: $screen-sm){
-//       min-width:unset;
-//       flex-wrap: wrap;
-//       justify-content: flex-start;
-//       display: flex!important;
-//       visibility: hidden;
-//       opacity: 0;
-//       width: 100vw!important;
-//       box-shadow: 2px 2px 5px #00000033;
-//       margin:0;
-//       padding:1em 13% 3em!important;
-//       transition-duration: 0.5s;
-//       background: #f0f0f0;
-//     }
-//   }
-//   .modules-menu-level-0 > li:hover .modules-menu-level-1, .modules-menu .modules-menu-level-0 > li.hover-class .modules-menu-level-1{
-//     visibility: visible!important;
-//     opacity: 1!important;
-//   }
-//
-//   .modules-menu-level-2 {
-//     right:auto!important;
-//     display: block;
-//     top: auto!important;
-//     left: auto!important;
-//     background-color: transparent!important;
-//     position: relative!important;
-//   }
-//   .modules-menu-level-1{
-//     @media (min-width: $screen-sm) {
-//       & > li {
-//         width: 25%;
-//         & > a {
-//           padding-left: 1em;
-//           padding: 5px 0;
-//         }
-//
-//         &:hover {
-//           .modules-menu-level-2 {
-//             display: block;
-//           }
-//         }
-//       }
-//       .modules-menu-level-2{
-//         display: block;
-//       }
-//     }
-//   }
-// }
 
 //固定選單
 .navFixed {
@@ -94,7 +21,7 @@
   min-width: 100%;
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   backdrop-filter: saturate(180%) blur(20px);
-  background-color: #fff;
+  background-color: #ffffffd9;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -ms-transition: all .3s ease;
@@ -102,69 +29,6 @@
   transition: all .3s ease;
 }
 
-// //直式選單更改css
-// .navbar-brand{
-//   h1{
-//     @media(min-width: 769px){
-//       margin-top:0.5em;
-//     }
-//   }
-// }
-// #layout-navigation{
-//   @media(min-width: 769px){
-//     position: absolute;
-//     width: 20%!important;
-//     left: 0;
-//     background-color: #fff;
-//     margin-top: 5em;
-//     padding-right: 0;
-//     #main-nav{
-//       padding: 0;
-//     }
-//     .modules-menu-level-0{
-//       width: 100%!important;
-//     }
-//     .modules-menu-level-0 > li{
-//       width: 100%;
-//     }
-//     .modules-menu-level-1{
-//       min-width: 100%;
-//       left: 100%;
-//       top: 0;
-//     }
-//   }
-// }
-// .verticalhome{
-//   .layout-content{
-//     @media(min-width: 769px){
-//       float: right!important;
-//       width: 80%!important;
-//     }
-//   }
-// }
-// .homebanner{
-//   @media(min-width: 769px){
-//     float: right!important;
-//     width: 80%!important;
-//     .ba-banner-widget-0 img{
-//       transform: none!important;
-//     }
-//   }
-// }
-// .container{
-//   @media(min-width: 1200px){
-//     width: 95%!important;
-//     max-width: unset!important;
-//   }
-// }
-// .layout-header .navbar-header .navbar-brand{
-//   @media(min-width: 1200px){
-//     padding-left: 0;
-//   }
-// }
-
-
-
 
 
 
@@ -183,8 +47,11 @@
   z-index: 1020;
 
   li {
-    padding: 1em;
+    white-space: nowrap;
     list-style: none;
+    @media(max-width: 768px){
+      padding: 1em;
+    }
   }
   .menu-drop.opened {
     transform: rotateX(180deg);
@@ -193,20 +60,18 @@
   .modules-menu-level-0 {
       width: 100%;
       padding: 0;
-      @media (min-width:769px)and(max-width: 1024px){
-        display: flex;
-        flex-wrap: wrap;
-        justify-content:space-between;
-        padding: 0;
-        width: 100%;
-      }
-    @media (min-width:1025px) {
-      margin: 0;
+    @media (min-width:769px) {
+      margin: 0 0 0.8em 0;
+      -webkit-flex-flow: row wrap;
       list-style: none;
+      float: left !important;
+      padding-top: 10px;
       display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      width: 65%;
+      width: 100%;
+      justify-content: start;
+      padding-left: 0;
+      padding-left: 6em;
+      padding-right: 3em;
       }
     .has-dropdown.level-1.active {
       .modules-menu-level-1 {
@@ -244,7 +109,7 @@
       text-align: center;
       border-radius: 0.13em;
       top: 2em;
-      @media(max-width: 769px){
+      @media(max-width: 768px){
         top: 1em;
         font-size: 1em;
       }
@@ -264,12 +129,21 @@
       margin: 0;
       padding: 0.5em;
       border-bottom: 0.0625em solid lighten($theme-gray, 5%);
-
+      i{
+            color: #fff;
+            @media(max-width: 768px){
+              color: $theme-color-main;
+            }
+      }
       & > a {
         display: block;
-        padding: 1em;
+        padding: 1.125em 0;
         font-family: $main-font;
         font-size: 1.1em;
+        color: #fff;
+        @media(max-width: 768px){
+          color: $theme-color-main;
+        }
         &:after{
           content:'';
           position:absolute;
@@ -287,7 +161,7 @@
           bottom:0;
         }
         &.active {
-          color: $theme-color-second;
+          text-decoration: revert;
           background: none;
           &:after{
             width:100%;
@@ -298,7 +172,7 @@
 
       &:hover {
         & > a {
-          color: $theme-color-second;
+          text-decoration: revert;
           background: transparent;
           box-shadow:none;
           &:after{
@@ -309,37 +183,21 @@
         }
 
         @media (min-width: $screen-sm) {
-          // background-color: $theme-color-second;
+          // background-text-decoration: revert;
           // border-radius: 0.5em;
         }
       }
-      @media (min-width: $screen-sm)and(max-width: 1439px){
-        &:last-child{
-          .modules-menu-level-1 {
-            right: 0;
-           }
-        }
-        &:nth-last-child(2){
-          .modules-menu-level-1 {
-            right: 0;
-          }
-        }
 
-      }
       @media (min-width: $screen-sm) {
         margin: 0;
         padding: 0;
         border-bottom: none;
+        width: 30%;
 
         &:first-child {
           margin-left: 0;
         }
-        &:nth-last-child(2){
-          .modules-menu-level-2 {
-            right: 100%;
-            left: auto;
-          }
-        }
+
         &:last-child {
           margin-right: 0;
 
@@ -352,8 +210,6 @@
             }
 
             & > li {
-              padding-right: 1em;
-              padding-left: 1em;
 
               & > a {
                 padding-left: 0;
@@ -368,10 +224,12 @@
         }
 
         & > a {
-          font-size:1.1em;
-          color:#686868;
-          font-weight: bold;
+          font-size:1.2em;
+          color:#fff;
+          font-weight: 900;
           position: relative;
+          border-bottom: 2px solid #f8f9fa;
+          margin-right: 1em;
         }
 
         &:hover {
@@ -386,18 +244,15 @@
   }
 
   .modules-menu-level-1 {
-    display: none;
     list-style: none;
     z-index: 1;
     padding:0;
     left: auto;
     @media(min-width:769px){
-      min-width: 200px;
-      width:max-content;
-      box-shadow: 2px 2px 5px #00000033;
+      display: block !important;
       margin:0;
       transition-duration: 0.5s;
-      background: #f0f0f0;
+      padding-right: 1em;
       & > a {
         padding: 1em 1.5em;
       }
@@ -405,7 +260,9 @@
 
     & > li {
       position: relative;
-      padding: 1em;
+      padding-top: 1em;
+      padding-left: 0;
+          list-style: none;
       // & + li {
       //   border-top: 0.0625em solid lighten($theme-gray, 5%);
       // }
@@ -414,25 +271,22 @@
         display: block;
         font-family: $main-font;
         font-weight: 600;
-        color: #686868;
+        color: #fff;
         font-size: 1.1em;
+        @media(max-width: 768px){
+          color: $theme-color-main;
+        }
       }
 
       &:hover {
-/*        background-color: $theme-color-second;*/
-        @media(max-width: 769px){
-          a,i {
-           color:$theme-color-second;
-         }
-        }
-         &>a {
-          color:$theme-color-second;
+        // background-text-decoration: revert;
+        & > a {
+          text-decoration: revert;
         }
       }
     }
 
     @media (min-width: $screen-sm) {
-      position: absolute;
 
       & > li {
         & > a {
@@ -441,8 +295,7 @@
 
         &:hover {
           .modules-menu-level-2 {
-            display: block;
-            position: absolute;
+
           }
         }
       }
@@ -453,35 +306,34 @@
     margin: 0;
     padding: 0;
     list-style: none;
-    display: none;
 
     & > li {
       & + li {
+        list-style: none;
         // border-top: 0.0625em solid lighten($theme-gray, 5%);
       }
 
       & > a {
         display: block;
-        font-family: $main-font;
-        color:#686868;
+        color:#fff;
         font-weight: 500;
         font-weight: bold;
+        padding-top: 1em;
+        @media(max-width: 768px){
+          color: $theme-color-main;
+        }
       }
       &:hover {
         a{
           transition: all 0.3s ease-in-out;
-          color: $theme-color-second;
+          text-decoration: revert;
           margin-left: 0.5rem;
         }
       }
     }
 
     @media (min-width: $screen-sm) {
-      top: 0;
-      left: 100%;
-      background-color: #dbdbdb;
-      position: absolute;
-      min-width: 150px;
+
     }
   }
 }
@@ -507,7 +359,14 @@
     padding: 0;
   }
 }
-
+.navbar-toggle{
+  @media(min-width: 769px){
+    margin-top: 1em;
+    right:6%;
+    position: absolute;
+    display: block;
+  }
+}
 //mobile
 .mobile-menu {
   z-index: 1051;
@@ -523,30 +382,57 @@
   }
 
   .modules-menu {
-    width: 80%;
+    width: 100%;
     position: absolute;
     right: 0;
-    background: #ffffff;
+    background: #222222a6;
     height: 100%;
-    top: 0;
-    padding-top: 40px;
+    top: 40px;
+    padding-top: 0;
+    @media(max-width: 768px){
+      width: 80%;
+      position: absolute;
+      right: 0;
+      background: #ffffff;
+      height: 100%;
+      top: 0;
+      padding-top: 40px;
+    }
   }
   .modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 ,.modules-menu .modules-menu-level-0 > li {
     font-weight:bold;
   }
 .menu-drop{
-
+  font-size: 10px ;
 }
   .navbar-toggle {
-    position: absolute;
-    left: 0;
-    background: transparent;
-    top: 40px;
-    z-index: 1;
-    height: 100vh;
-    margin: 0;
-    width: 20%;
-    border: 0;
+
+    @media(max-width: 768px){
+      display: block!important;
+      position: absolute;
+      left: 0;
+      background: transparent;
+      top: 40px;
+      z-index: 1;
+      height: 100vh;
+      margin: 0;
+      width: 20%;
+      border: 0;
+    }
+    @media(min-width: 769px){
+      position: absolute;
+      right: 3%;
+      background: transparent;
+      top: 3.5em;
+      z-index: 11111;
+      height: 40px;
+      margin: 0;
+      border: 0;
+      -webkit-transition: -webkit-transform 0.3s;
+      transition: -webkit-transform 0.3s;
+      transition: transform 0.3s;
+      transition: transform 0.3s, -webkit-transform 0.3s;
+    }
   }
   .cover {
     position: fixed;
@@ -575,20 +461,20 @@
   transition-property:transform;
 }
 .mobile-menu .modules-menu.collapse.in {
-  transform: translateX(0%);
-  -webkit-transition-timing-function:ease;
-  -o-transition-timing-function:ease;
-  transition-timing-function:ease;
-  -webkit-transition-duration:.35s;
-  -o-transition-duration:.35s;
-  transition-duration:.35s;
-  -webkit-transition-property:transform;
-  -o-transition-property:transform;
-  transition-property:transform;
+  transform: translateX(100%);
+  -webkit-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  transition-timing-function: ease;
+  -webkit-transition-duration: .35s;
+  -o-transition-duration: .35s;
+  transition-duration: .35s;
+  -webkit-transition-property: transform;
+  -o-transition-property: transform;
+  transition-property: transform;
 }
 
 .mobile-menu .collapse.navbar-collapse.modules-menu {
-      overflow-y: scroll;
+  transform: translateX(0%);
 }
 .display-on{
    display:block!important;
@@ -605,7 +491,7 @@
     align-self: center;
     margin-left: 10px;
     z-index: 999;
-    @media(max-width: 769px){
+    @media(max-width: 768px){
       position: absolute;
       right: 0.3em;
       width: 2.5em;
@@ -628,23 +514,26 @@
   display: block!important;
   visibility: visible!important;
 }
-.mobile-menu2{
-  &>a{
-      padding-right: 1em;
-  }
-  .menu-drop{
-    top: 0.6em!important;
+.mobile-menu .collapse.navbar-collapse.modules-menu{
+  @media(min-width: 769px){
+    // overflow-y: scroll !important;
+    height: 100% !important;
+    padding: 0;
   }
 }
-html[lang="en"]{
-  .modules-menu .modules-menu-level-0{
-    @media (min-width: 1025px){
-      width: 50%;
-    }
-  }
-  .modules-menu-level-1{
-    @media(min-width:769px){
-      min-width: 220px!important;
+.mobile-menu1{
+  @media(min-width: 769px){
+    &>.menu-drop{
+      display: none;
     }
   }
 }
+.navbar-toggle0{
+  @media(min-width: 769px){
+    position: absolute;
+    right: 0;
+    .navbar-toggle{
+      transform: translateX(-100%);
+    }
+  }
+}
\ No newline at end of file