From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 30 Dec 2015 15:30:05 +0000 (+0100)
Subject: Using generic classes for menus
X-Git-Tag: 3.0.0_Beta_1~2030^2~188
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0b2fbbb53ce1d2ec51efd993213fad53c75cb269;p=GitHub%2FWoltLab%2FWCF.git

Using generic classes for menus
---

diff --git a/com.woltlab.wcf/templates/__menu.tpl b/com.woltlab.wcf/templates/__menu.tpl
index e0f64650a7..c7c049dcf5 100644
--- 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 3e99265130..68f0d69b27 100644
--- 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%;