From: Luzifr <szekely@woltlab.com>
Date: Fri, 13 Jan 2012 20:04:05 +0000 (+0100)
Subject: Sub Menu & Breadcrumbs
X-Git-Tag: 2.0.0_Beta_1~1425^2~13
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=11402955bb122def2f563839700078af44ee8dc3;p=GitHub%2FWoltLab%2FWCF.git

Sub Menu & Breadcrumbs
---

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index bd72b1b4bd..feb22b2994 100644
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -677,22 +677,9 @@ nav.topMenu {
 	box-shadow: 0 0 1px rgba(255, 255, 255, 1);
 }
 
-.mainMenu > ul > li > ul {
-	position: absolute;
-	bottom: -18px;
-	z-index: 1000;
-	white-space: nowrap;
-	font-size: 75%;
-}
-
-.mainMenu > ul > li > ul > li {
-	padding: 0 4px;
-	display: inline-block;
-}
-
 
 
-/* -- -- -- Header/Footer Navigation -- -- -- */
+/* -- -- -- Header/Footer Navigation & Main Menu Sub Menu -- -- -- */
 
 .headerNavigation {
 	background-color: #e7f2fd;
@@ -755,6 +742,7 @@ nav.topMenu {
 
 .headerNavigation ul li a:hover,
 .footerNavigation ul li a:hover {
+	text-decoration: none;
 	background-color: #d8e7f5;
 }
 
@@ -767,6 +755,21 @@ nav.topMenu {
 	width: 0;
 }
 
+/* Sub Menu */
+
+.headerNavigation .subMenu {
+	float: left;
+}
+
+.headerNavigation .subMenu > li {
+	line-height: 1.25;
+}
+
+.headerNavigation .subMenu > li > a {
+	padding-right: 5px;
+	padding-left: 5px;
+}
+
 
 
 /* ############## Main ############## */
@@ -2666,16 +2669,27 @@ input[type='button'],
 	overflow: hidden;
 }
 
-.breadcrumbs ul li {
+.breadcrumbs > ul > li {
 	font-size: 85%;
 	list-style: none;
 	float: left;
 	position: relative;
+	max-width: 30%;
+	
+	-webkit-transition: max-width .2s linear;
+	-moz-transition: max-width .2s linear;
+	-ms-transition: max-width .2s linear;
+	-o-transition: max-width .2s linear;
+	transition: max-width .2s linear;
+}
+
+.breadcrumbs > ul > li:hover {
+	max-width: 100%;
 }
 
 /* Arrow */
 
-.breadcrumbs ul li > span {
+.breadcrumbs > ul > li > span {
 	border-width: 15px;
 	border-style: solid none solid solid;
 	border-color: transparent transparent transparent #ccc;
@@ -2688,7 +2702,7 @@ input[type='button'],
 	z-index: 100;
 }
 
-.breadcrumbs ul li > .pointer > span {
+.breadcrumbs > ul > li > .pointer > span {
 	text-indent: -9000px;
 	border-width: 15px;
 	border-style: solid none solid solid;
@@ -2704,7 +2718,7 @@ input[type='button'],
 
 /* Caption */
 
-.breadcrumbs ul li a {
+.breadcrumbs > ul > li a {
 	text-decoration: none;
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
 	color: rgba(153, 153, 153, 1);
@@ -2717,7 +2731,7 @@ input[type='button'],
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
 	
-	.breadcrumbs ul li a {
+	.breadcrumbs > ul > li a {
 		max-width: 250px;
 	}
 	
@@ -2725,13 +2739,13 @@ input[type='button'],
 
 @media screen and (max-width: 480px), screen and (max-device-width: 480px) {
 	
-	.breadcrumbs ul li a {
+	.breadcrumbs > ul > li a {
 		max-width: 100px;
 	}
 	
 }
 
-.breadcrumbs ul li:first-child a {
+.breadcrumbs > ul > li:first-child a {
 	border-radius: 5px 0 0 5px;
 	background-image: url('../../icon/home1.svg');
 	background-position: 7px center;
@@ -2740,14 +2754,14 @@ input[type='button'],
 	padding-left: 30px;
 }
 
-.breadcrumbs ul li:hover a {
+.breadcrumbs > ul > li:hover a {
 	color: rgba(102, 102, 102, 1);
 	background-color: #f9f9f9;
 	position: relative;
 	z-index: 90;
 }
 
-.breadcrumbs ul li:hover > .pointer > span {
+.breadcrumbs > ul > li:hover > .pointer > span {
 	border-color: transparent transparent transparent #f9f9f9;
 }