Some simplification

The main-menu-submenu is now inherited from the "wcf-menu"-CSS-class.
The menu now stretches to fit an unlimited number of items.

diff --git a/com.woltlab.wcf/template/mainMenuSubMenu.tpl b/com.woltlab.wcf/template/mainMenuSubMenu.tpl
index c7d7ee5b7e8ca3271702e62307d9e5b976707513..cfc498d69bd819320e3171e63554a80606ae2c01 100644 (file)
--- a/com.woltlab.wcf/template/mainMenuSubMenu.tpl
+++ b/com.woltlab.wcf/template/mainMenuSubMenu.tpl
@@ -1,9 +1,11 @@
 {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
        {if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0}
-               <ul class="wcf-subMenu">
-                       {foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
-                               <li><a href="{$subMenuItem->getProcessor()->getLink()}" title="{lang}{$subMenuItem->menuItem}{/lang}">{lang}{$subMenuItem->menuItem}{/lang}</a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
-                       {/foreach}
-               </ul>
+               <div class="wcf-menu">
+                       <ul>
+                               {foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
+                                       <li><a href="{$subMenuItem->getProcessor()->getLink()}" title="{lang}{$subMenuItem->menuItem}{/lang}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
+                               {/foreach}
+                       </ul>
+               </div>
        {/if}
 {/foreach}
\ No newline at end of file

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index 91e687b8c3e23ecc4cffb4109b6ebf6084ec3cdc..3cf482d4c98e7f8f06347b9c445ad4fbe14f21c9 100644 (file)
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -743,7 +743,9 @@ nav.wcf-topMenu {
 
 
 
-/* -- -- -- Header/Footer Navigation & Main Menu Sub Menu -- -- -- */
+/* -- -- -- Header/Footer Navigation -- -- -- */
+
+/* Menu Bars */
 
 .wcf-headerNavigation {
        background-color: #e7f2fd;
@@ -793,41 +795,43 @@ nav.wcf-topMenu {
        clear: both;
 }
 
-.wcf-headerNavigation ul,
-.wcf-footerNavigation ul {
-       display: block;
+/* Icon Menus */
+
+.wcf-headerNavigation > div > ul,
+.wcf-footerNavigation > div > ul {
+       float: right;
 }
 
-.wcf-headerNavigation ul li,
-.wcf-footerNavigation ul li {
+.wcf-headerNavigation > div > ul > li,
+.wcf-footerNavigation > div > ul > li {
        cursor: pointer;
        margin: 0 3px;
        float: right;
 }
 
-.wcf-headerNavigation ul li a,
-.wcf-footerNavigation ul li a {
+.wcf-headerNavigation > div > ul > li a,
+.wcf-footerNavigation > div > ul > li a {
        padding: 3px;
        display: inline-block;
 }
 
-.wcf-headerNavigation ul li a:hover,
-.wcf-footerNavigation ul li a:hover {
+.wcf-headerNavigation > div > ul > li a:hover,
+.wcf-footerNavigation > div > ul > li a:hover {
        text-decoration: none;
        background-color: #d8e7f5;
 }
 
-.wcf-headerNavigation ul li a:hover:active,
-.wcf-headerNavigation ul li a:hover:focus,
-.wcf-footerNavigation ul li a:hover:active,
-.wcf-footerNavigation ul li a:hover:focus {
+.wcf-headerNavigation > div > ul > li a:hover:active,
+.wcf-headerNavigation > div > ul > li a:hover:focus,
+.wcf-footerNavigation > div > ul > li a:hover:active,
+.wcf-footerNavigation > div > ul > li a:hover:focus {
        background-color: #fff9f4;
 }
 
 /* Special */
 
-#tplLogin .wcf-pageHeader .wcf-headerNavigation ul li.toBottomLink,
-#tplLogin .wcf-pageFooter .wcf-footerNavigation ul li.toTopLink {
+#tplLogin .wcf-pageHeader .wcf-headerNavigation > ul > li.toBottomLink,
+#tplLogin .wcf-pageFooter .wcf-footerNavigation > ul > li.toTopLink {
        /* Removes the to-bottom-link on the log-in page */
        position: absolute;
        left: -9000px;
@@ -837,17 +841,20 @@ nav.wcf-topMenu {
 
 /* Special: Sub Menu */
 
-.wcf-headerNavigation .wcf-subMenu {
-       float: left;
+.wcf-headerNavigation .wcf-menu {
+       display: inline;
+       max-width: 75%;
 }
 
-.wcf-headerNavigation .wcf-subMenu > li {
-       line-height: 1.25;
+.wcf-headerNavigation .wcf-menu > ul {
+       text-align: left;
+       top: -3px;
+       display: inline;
+       position: relative;
 }
 
-.wcf-headerNavigation .wcf-subMenu > li > a {
-       padding-right: 5px;
-       padding-left: 5px;
+.wcf-headerNavigation .wcf-menu > ul > li {
+       margin-top: 7px;
 }
 
 
@@ -1512,7 +1519,7 @@ table .wcf-label {
 
 
 
-/* ############## ToDo: Dropdown Global ############## */
+/* ############## ToDo: Dropdown ############## */
 
 /* Dropdown Caption */
 
@@ -2692,23 +2699,12 @@ input[type='button'],
 
 
 
-/* ############## Pill Menu ############## */
+/* ############## Menu ############## */
 
 /* Standard */
 
 .wcf-menu {
        color: rgba(102, 102, 102, 1);
-       border-bottom: 1px solid #ccc;
-       margin: -15px -23px 0;
-       padding: 0 7px 10px;
-}
-
-.wcf-tabMenuContent > .wcf-menu {
-       background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-       background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-       background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-       background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-       background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
 }
 
 .wcf-menu ul {
@@ -2765,7 +2761,7 @@ input[type='button'],
        background-color: rgba(0, 0, 0, .5);
 }
 
-/* Special */
+/* Special -> Menu within box-title  */
 
 .wcf-boxTitle > .wcf-menu {
        color: rgba(255, 255, 255, 1);
@@ -2779,20 +2775,9 @@ input[type='button'],
 }
 
 .wcf-boxTitle > .wcf-menu ul li a {
-       font-size: 85%;
-       text-decoration: none;
-       text-shadow: 0 -1px 0 #000;
+       text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
        color: #eee !important;
-       border: 1px solid rgba(0, 0, 0, .3);
-       border-radius: 13px;
        background-color: rgba(0, 0, 0, .1);
-       padding: 2px 10px;
-       
-       -webkit-transition: color .1s linear;
-       -moz-transition: color .1s linear;
-       -ms-transition: color .1s linear;
-       -o-transition: color .1s linear;
-       transition: color .1s linear;
 }
 
 .wcf-boxTitle > .wcf-menu ul li a:hover {
@@ -2817,6 +2802,22 @@ input[type='button'],
        color: #369 !important;
 }
 
+/* Special: Menu below tab-menu */
+
+.wcf-tabMenuContainer > .wcf-menu {
+       border-bottom: 1px solid #ccc;
+       margin: -15px -23px 0;
+       padding: 0 7px 10px;
+}
+
+.wcf-tabMenuContainer > .wcf-menu {
+       background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+       background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+}
+
 
 
 /* ############## Bread Crumbs ############## */