Hallo liebes Wordpress-Forum,
ich habe auf meiner Homepage http://www.waller-fangen.de/ welche mit Word-Press läuft ein Dropdown Menü, welches sich nur durch klicken des Pfeiles öffnet. Zur Verbesserung der Bedienbarkeit würde ich dieses Menü gerne so umstellen, dass beim Öffnen einer Seite, welche Unterseiten hat, die Unterseiten im Menü gleich mit ausgeklappt werden. Gibt es hier eine Möglichkeit dies umzustellen?
Ich denke das Problem sollte sich in diesem Teil des Codes befinden:
## Menus
--------------------------------------------------------------*/
.main-navigation {
clear: both;
display: block;
width: 100%;
margin: 2.5rem 0 0 0;
background: #1c2a43; }
.main-navigation ul {
list-style: none; }
.main-navigation ul.menu {
display: none;
margin: 0; }
.main-navigation ul.sub-menu {
display: none;
margin: 0.5rem 0 0 0;
padding: 0 0 0 2rem;
font-size: 14px;
font-size: 0.875rem; }
.main-navigation ul.sub-menu {
display: ;
margin: 0.5rem 0 0 0;
padding: 0 0 0 2rem;
font-size: 14px;
font-size: 0.875rem; }
.main-navigation li {
padding: 0.5rem 0; }
.main-navigation li .menu-item-description {
font-size: 14px;
font-size: 0.875rem;
font-style: italic;
font-weight: 300; }
.main-navigation .current-menu-item a {
color: #e4f1fe; }
/* Menu toggle. */
.menu-toggle {
display: inline-block;
width: 100%;
padding: 15px 15px;
border: none;
box-shadow: none;
border-radius: 0;
z-index: 5000;
background-color: #303030; }
.menu-toggle .menu-text {
float: left;
opacity: 0.8;
-webkit-transition: 0.25s;
transition: 0.25s;
font-size: 14px;
font-size: 0.875rem; }
.menu-toggle .lines {
display: block;
position: relative;
float: right;
width: 15px;
height: 2px;
bottom: -5px;
-webkit-transition: 0.25s;
transition: 0.25s;
opacity: 0.8;
background-color: #fff; }
.menu-toggle .lines:before,
.menu-toggle .lines:after {
content: "";
display: block;
position: absolute;
width: 15px;
height: 2px;
-webkit-transition: 0.125s;
transition: 0.125s;
background-color: #fff; }
.menu-toggle .lines:before {
top: -5px; }
.menu-toggle .lines:after {
top: 5px; }
.menu-toggle:hover .lines,
.menu-toggle:hover .lines:before,
.menu-toggle:hover .lines:after,
.menu-toggle:hover .menu-text {
-webkit-transition: 0.25s;
transition: 0.25s;
opacity: 1; }
.menu-toggle:focus {
border-color: transparent;
box-shadow: none; }
.menu-toggle:hover, .menu-toggle:focus {
background-color: #303030; }
.toggled .menu-toggle .menu-text {
color: white; }
.toggled .menu-toggle .lines {
bottom: -6px;
background-color: transparent; }
.toggled .menu-toggle .lines:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 0; }
.toggled .menu-toggle .lines:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 0; }
/* Dropdown menu toggle. */
.dropdown-toggle {
float: right;
width: 24px;
height: 24px;
padding: 0;
border: 0;
-webkit-transition: 0.25s;
transition: 0.25s;
box-sizing: border-box;
background: transparent; }
.dropdown-toggle:hover, .dropdown-toggle:focus {
background: #2e456d; }
.dropdown-toggle:after {
display: inline-block;
position: relative;
top: 0;
left: 0;
font-family: 'Genericons';
font-size: 16px;
line-height: 24px;
width: 24px;
content: '\f431';
opacity: 0.8;
-webkit-transition: 0.25s;
transition: 0.25s;
color: #fff; }
.dropdown-toggle:focus:hover, .dropdown-toggle:focus:after {
opacity: 1; }
.dropdown-toggle.toggle-on:after {
content: '\f432'; }
Media (min-width: 640px) {
.menu-toggle {
padding: 15px 25px; } }
Media (min-width: 960px) {
.menu-toggle {
display: none; }
.main-navigation {
margin-bottom: 2.5rem;
padding-top: 10px;
padding-bottom: 10px; }
.main-navigation ul.menu {
display: block !important; } }
Wäre echt super wenn ihr mir weiter helfen könntet.
Gruß und vielen Dank schonmal im Vorraus
Oli