管理画面ヘッダーナビ CSS 整理

#783 の適用により、不可解な CSS であることが鮮明となったため整理する。既存の動作維持を原則とするが、以下は意図的に変更する。 - プルダウン第1階層の選択項目を示す背景着色(暗灰)は、第2階層を開いた後も維持する。(「デザイン管理」のどちらを開いているか分かりにくいため。) - 横並びのメニューの現在画面を示す背景着色(黄)は、プルダウンを開いている間は外す。(選択項目が分かりにくいため。)
EC-CUBE · Dec 19, 2024 · b0b337b · b0b337b
1 parent 8242526
commit b0b337b
Showing 1 changed file with 46 additions and 186 deletions.
diff --git a/html/user_data/packages/admin/css/admin.css b/html/user_data/packages/admin/css/admin.css
@@ -822,232 +822,92 @@ a {
 
 #navi {
     z-index: 90;
-    height: 28px;
     background: url('../img/header/navi_back.jpg') top left repeat-x;
     font-size: 100%;
     line-height: 100%;
+    * {
+        box-sizing: border-box;
+    }
 
     li {
         background: url('../img/header/navi_back_line.jpg') no-repeat right;
         display: block;
         float: left;
         cursor: pointer;
-        height: 28px;
         position: relative;
 
-        div {
+        > div {
             display: block;
             cursor: pointer;
+            text-decoration: none;
+        }
+    }
 
-            span {
-                display: block;
-                cursor: pointer;
-                padding: 7px 10px;
-                height: 15px;
-            }
+    > li {
+        height: 28px;
 
+        /* 横並びメニューのみ適用 */
+        > div {
             color: #2d2f39;
-            height: 28px;
             font-weight: bold;
-            text-decoration: none;
+            height: 100%;
+            padding: 7px 10px 0;
 
-            &:hover {
+            :not(:has(.sfhover)) .on > &,
+            .sfhover > & {
                 background: url('../img/header/navi_on.jpg') left 0 repeat-x;
-
-                span {
-                    background: url('../img/header/navi_on.jpg') left 0 repeat-x;
-                }
             }
         }
+    }
 
-        &.on div,
-        &.sfhover div {
-            background: url('../img/header/navi_on.jpg') left 0 repeat-x;
-
-            span {
-                background: url('../img/header/navi_on.jpg') left 0 repeat-x;
-            }
-        }
-
-        ul {
-            position: absolute;
-            top: 26px;
-            left: -9999px;
-            width: 14px;
-            font-weight: normal;
-            clear: both;
-        }
-
-        /*プルダウンメニュー 第1階層*/
-        li {
+    > li ul {
+        /* プルダウンメニュー 第1階層以下共通 */
+        position: absolute;
+        clear: both;
+        display: none;
+        > li {
+            margin-left: 0;
             display: block;
-            top: 2px;
             width: 180px;
             height: 27px;
             line-height: 24px;
-            color: #fff;
             background: url('../img/header/subnavi_bak.gif') top left no-repeat #787878;
-            font-weight: normal;
-
-            a,
-            div,
-            a span,
-            div span {
-                display: block;
-                top: 2px;
-                width: 180px;
-                height: 27px;
-                line-height: 24px;
-                color: #fff;
-                background: url('../img/header/subnavi_bak.gif') top left no-repeat #787878;
-                font-weight: normal;
-            }
-
-            border: solid #888;
-            border-width: 0 0 1px 0;
-
-            a span,
-            div span {
-                padding: 2px 0 0 8px;
-                text-indent: 8px;
-            }
-
-            a:hover,
-            div:hover {
-                background: url('../img/header/subnavi_bak_on.gif') top left no-repeat #474747;
-            }
-
-            a:hover span,
-            div:hover span {
-                background: #666;
-            }
-        }
-
-        &.on li a,
-        li.on a,
-        &.on li div,
-        li.on div,
-        &.sfhover li a,
-        li.sfhover a,
-        &.sfhover li div,
-        li.sfhover div {
-            background: transparent;
-
-            span {
-                background: transparent;
-            }
-        }
-
-        &.sfhover li {
-
-            a:hover,
-            div:hover {
-                background: url('../img/header/subnavi_bak_on.gif') top left no-repeat #474747;
-            }
-        }
-
-        li.sfhover {
-
-            a:hover,
-            div:hover {
+            text-indent: 8px;
+            &.sfhover {
                 background: url('../img/header/subnavi_bak_on.gif') top left no-repeat #474747;
             }
-        }
-
-        /*プルダウンメニュー 第2階層*/
-        ul.level2 {
-            position: absolute;
-            top: 27px;
-            left: -9999px;
-            width: 14px;
-            font-weight: normal;
-        }
-
-        li {
-
-            li,
             a,
-            li a span,
             div {
-                margin-left: 0;
-                display: block;
-                width: 180px;
-                top: 1px;
-                height: 27px;
-                line-height: 24px;
                 color: #fff;
-                background: #787878;
-                font-weight: normal;
-                background: url('../img/header/subnavi_bak.gif') top left no-repeat #787878;
-            }
-
-            li {
-                div span {
-                    margin-left: 0;
-                    display: block;
-                    width: 180px;
-                    top: 1px;
-                    height: 27px;
-                    line-height: 24px;
-                    color: #fff;
-                    background: #787878;
-                    font-weight: normal;
-                    background: url('../img/header/subnavi_bak.gif') top left no-repeat #787878;
-                }
-
-                &.sfhover {
-
-                    div:hover,
-                    a:hover {
-                        width: 180px;
-                        top: 1px;
-                        height: 27px;
-                        color: #fff;
-                        background: url('../img/header/ico_sub_navi.gif') no-repeat left #474747;
-                    }
-                }
-            }
-        }
-
-        ul ul {
-            margin: -28px 0 0 180px;
-        }
-
-        &.sfhover ul {
-            ul {
-                left: -9999px;
-
-                ul {
-                    left: -9999px;
-                }
+                display: block;
+                padding: 2px 0 0 8px;
             }
-
-            left: auto;
         }
-
-        li {
-
-            &.sfhover ul,
-            li.sfhover ul {
-                left: auto;
-            }
+        .sfhover > & {
+            display: block;
         }
     }
 
-    ul.level1 li.on_level2 {
-        background: url('../img/header/subnavi_bak_l2.gif') top left no-repeat #787878;
+    > li > ul {
+        /* プルダウンメニュー 第1階層 */
+        z-index: 91;
+        top: 28px;
 
-        a:hover,
-        div:hover {
-            background: url('../img/header/subnavi_bak_l2_on.gif') top left no-repeat #787878;
+        > li {
+            border: solid #888;
+            border-width: 0 0 1px 0;
+            &:has(ul) > div {
+                /* 既存画像を使いまわしたためトリッキー */
+                background: url('../img/header/subnavi_bak_l2_on.gif') top left no-repeat;
+                mix-blend-mode: lighten;
+            }
         }
 
-        ul.level2 li {
-
-            a:hover,
-            div:hover {
-                background: url('../img/header/subnavi_bak_on.gif') top left no-repeat #474747;
-            }
+        /* プルダウンメニュー 第2階層 */
+        > li > ul {
+            z-index: 92;
+            top: 0;
+            left: 180px;
         }
     }
 }