Using generic classes for menus

diff --git a/com.woltlab.wcf/templates/__menu.tpl b/com.woltlab.wcf/templates/__menu.tpl
index e0f64650a70f7349d13f73d193a30d9517c2fac3..c7c049dcf5dca7768472aa6ea357cf3d8e7f9853 100644 (file)
--- a/com.woltlab.wcf/templates/__menu.tpl
+++ b/com.woltlab.wcf/templates/__menu.tpl
@@ -1,10 +1,10 @@
-<nav id="mainMenu" class="mainMenu">
-       <ol>
+<nav>
+       <ol class="boxMenu">
                {foreach from=$menuItemNodeList item=menuItemNode}
-                       <li{if $menuItemNode->hasChildren()} class="subMenuItems"{/if}>
+                       <li{if $menuItemNode->hasChildren()} class="boxMenuHasChildren"{/if}>
                                <a href="{$menuItemNode->getMenuItem()->getURL()}">{lang}{$menuItemNode->getMenuItem()->title}{/lang}</a>
                                
-                               {if $menuItemNode->hasChildren()}<ol class="subMenu">{else}</li>{/if}
+                               {if $menuItemNode->hasChildren()}<ol class="boxMenuDepth{@$menuItemNode->getDepth()}">{else}</li>{/if}
                                        
                                {if !$menuItemNode->hasChildren() && $menuItemNode->isLastSibling()}
                                        {@"</ol></li>"|str_repeat:$menuItemNode->getOpenParentNodes()}

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 3e9926513094ea57bd7f129315c47a548cd15720..68f0d69b27fc8412637a3569cc8785d9f89982ef 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -44,7 +44,7 @@
 .mainMenu {
        flex: 0 50%;
        
-       > ol {
+       .boxMenu {
                display: flex;
                
                > li {
@@ -68,75 +68,73 @@
                                color: $wcfHeaderLinkActive;
                        }
                }
-       }
-}
-
-.subMenuItems {
-       position: relative;
-       
-       &:hover {
-               > a::after {
-                       transform: rotateX(180deg);
-               }
                
-               > .subMenu {
-                       opacity: 1;
-                       transition-delay: 0s;
-                       visibility: visible;
+               > .boxMenuHasChildren {
+                       position: relative;
+                       
+                       &:hover {
+                               > a::after {
+                                       transform: rotateX(180deg);
+                               }
+                               
+                               .boxMenuDepth1 {
+                                       opacity: 1;
+                                       transition-delay: 0s;
+                                       visibility: visible;
+                               }
+                       }
+                       
+                       > a {
+                               padding-right: 15px;
+                               
+                               &::after {
+                                       content: $fa-var-caret-down;
+                                       display: block;
+                                       font-family: FontAwesome;
+                                       position: absolute;
+                                       right: 0;
+                                       top: 1px;
+                                       transition: transform .12s ease-out;
+                               }
+                       }
                }
-       }
-       
-       > a {
-               padding-right: 15px;
                
-               &::after {
-                       content: $fa-var-caret-down;
-                       display: block;
-                       font-family: FontAwesome;
+               .boxMenuDepth1 {
+                       background-color: $wcfHeaderMenuBackground;
+                       border: 1px solid $wcfHeaderMenuBorder;
+                       opacity: 0;
+                       padding: 3px 0;
                        position: absolute;
-                       right: 0;
-                       top: 1px;
-                       transition: transform .12s ease-out;
-               }
-       }
-}
-
-.subMenu {
-       background-color: $wcfHeaderMenuBackground;
-       border: 1px solid $wcfHeaderMenuBorder;
-       opacity: 0;
-       padding: 3px 0;
-       position: absolute;
-       transition: visibility .2s linear .2s, opacity .2s linear;
-       visibility: hidden;
-       
-       @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
-       
-       > li {
-               > a {
-                       color: $wcfHeaderMenuLink;
-                       display: block;
-                       padding: 5px 20px;
-                       white-space: nowrap;
+                       transition: visibility .2s linear .2s, opacity .2s linear;
+                       visibility: hidden;
                        
-                       @extend .wcfFontDefault;
-               }
-               
-               &.active > a,
-               > a:hover {
-                       background-color: $wcfHeaderMenuBackgroundActive;
-                       color: $wcfHeaderMenuLinkActive;
-                       text-decoration: none;
-               }
-               
-               &.active > a {
-                       cursor: default;
+                       @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
+                       
+                       > li {
+                               > a {
+                                       color: $wcfHeaderMenuLink;
+                                       display: block;
+                                       padding: 5px 20px;
+                                       white-space: nowrap;
+                                       
+                                       @extend .wcfFontDefault;
+                               }
+                               
+                               &.active > a,
+                               > a:hover {
+                                       background-color: $wcfHeaderMenuBackgroundActive;
+                                       color: $wcfHeaderMenuLinkActive;
+                                       text-decoration: none;
+                               }
+                               
+                               &.active > a {
+                                       cursor: default;
+                               }
+                       }
                }
        }
 }
 
-
-
 /* USER PANEL */
 #topMenu {
        flex: 0 50%;