Dropdown menu in 2 kolommen splitsen.

rvklink49
(@rvklink49)

9 jaren, 8 maanden geleden
Goedemorgen mede WordPress gebruikers,

Voor een website waar ik nu mee bezig ben heb ik een menu bestaande uit 3 knoppen. Als je op een van de knoppen gaat staan komen er 13 subpagina’s in een verticale rij tevoorschijn. Nu wil ik deze graag opsplitsen in 2 rijen. Een van 7 en de ander 6.

De code die nu in header.php staat omtrent het menu is.
```
<?php wp_nav_menu( array(
'show_home' => '0',
'sort_column' => 'menu_order',
'container_class' => 'menu',
'menu_class' => 'nav',
'theme_location' => 'header_menu',
'fallback_cb' => 'unisphere_header_navigation',
'walker' => new unisphere_menu_walker() ) ); ?>
```
Wie o wie kan mij helpen?

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)

Guido

(@guido07111975)

9 jaren, 7 maanden geleden

Hallo,

Voor zover ik weet kun je dit alleen voor elkaar krijgen via css… wat is de css van je menu?

Guido

Alain Lankers

(@alain-lankers)

9 jaren, 7 maanden geleden

Of je kan het via een plugin realiseren: http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703

Thread starter

rvklink49

(@rvklink49)

9 jaren, 7 maanden geleden

Css van mijn menu is:

/* Header menu */
.menu { float: right; }
.nav { margin: 0; padding: 0; }
.nav, .nav * { list-style: none; }
.nav li { float: left; padding: 0; position: relative; }
.nav > li { padding: 0; }
.nav ul li { width: 100%; }

.nav > li > a {  display: block; position: relative; margin: 0; padding: 13px 15px 11px 15px; line-height: 21px; }
.nav > li > a:hover { text-decoration: none;  }

/* Hides items under top menu */
.nav ul { position: absolute; top: -9999em; width: 20em; /* left offset of submenus need to match (see below) */ margin-top: 0; padding: 0; }

/* Shows submenus */
.nav li:hover ul,
.nav li.nav-hover ul {left: 0; top: 45px; /* match top ul list item height */ z-index: 92; margin-left:-10px;margin-top:4px; border-top:#FFF solid; width:300px; }

/* Hides all sub items (4 levels deep) */
.nav li:hover li ul,
.nav li.nav-hover li ul,
.nav li li:hover li ul,
.nav li li.nav-hover li ul,
.nav li li li:hover li ul,
.nav li li li.nav-hover li ul { top: -999em;}

/* On :hover, displays all sub items (4 levels deep) */
.nav li li:hover ul,
.nav li li.nav-hover ul,
.nav li li li:hover ul,
.nav li li li.nav-hover ul,
.nav li li li li:hover ul,
.nav li li li li.nav-hover ul { left: 20em; /* match .nav ul width */ top: 0; margin: 0; }

/* Default Skin for the Menu */
.nav ul li { padding: 0;}
.nav ul a {  font-weight: normal; text-align:center; font-size: 13px; padding: 8px 13px!important; letter-spacing: 0; display: block; line-height: 21px; }
.nav a:hover { text-decoration: none; border-width: 0; }

/* Menu bugfix */
.msie-7 .nav:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }

/* Hide mobile menu by default */
#menu-bg .mobile-menu { display: none; }

Guido

(@guido07111975)

9 jaren, 7 maanden geleden

Hallo,

Vaak best lastig om mooi te krijgen.

Kort door de bocht, je moet de breedte van de 2e li op 50% zetten en links uitlijnen:

ul ul li {width:50%; float:left;}

(1e ul is hoofdmenu > 2e ul is submenu > li zijn de submenu items)

In jouw code staat het niet in die volgorde maar het gaat om de li die hieronder valt:

.nav li.nav-hover ul

Niet getest:

.nav li.nav-hover ul li {width:50%; float:left;}

Werkt dit niet, dan moet je naam theme even doorgeven.

Guido

Thread starter

rvklink49

(@rvklink49)

9 jaren, 7 maanden geleden

Guido,
Naam van de theme die ik geïnstalleerd heb is Mural.
Heb het een en ander geprobeerd met de code welke je getypt had maar er gebeurde vrijwel niets. Gaat nog wel even verder met proberen.

Misschien handig. Op Florastart.nl is het menu te vinden.

Alvast bedankt voor de geboden hulp.

Remco

Guido

(@guido07111975)

9 jaren, 7 maanden geleden

Hoi,

Zie dat dit theme van ThemeForest komt, voordat ik me erin ga verdiepen kun je deze vraag eerst ook uitzetten op het forum wat bij dit theme hoort:

http://themeforest.net/item/mural-business-portfolio-wordpress-theme/2453593/support

Mvg, Guido

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)

Het onderwerp ‘Dropdown menu in 2 kolommen splitsen.’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven