Een mooier submenu maken.

Wat je hier ziet is wel een Sub-menu maar niet een compleet nieuw Menu in WordPress.

Als je dit wilt maken zal je de CSS stijlen van je huidige dropdown menu moeten aanpassen en hoe dat in zijn werk gaat is een beetje moeilijk uit te leggen als je niet weet hoe HTML en CSS werken.

Maar de easy uitleg.

Normaal maak je een menu met een lijst en elke lijst staat standaard onder elkaar zoals je dat ook vaker ziet bij het opsommen ven testen,

Nu staat elk standaard menu in een horizontale lijst om logisch de menu-item achter elkaar te zetten. Maar een dropdown menu wat eigen weer een nieuwe lijst is staat dan altijd onder elkaar om de sub-menu items in een lijstje onder elkaar te tonen.

Wat je moet doen is die tweede lijst wat normaal onder elkaar staat ook in een lijn te zetten en dat heet Display IN-LINE in CSS

Dus als je zoekt op:

CSS + dropdown + menu + In-Line

moet je wel ergens komen.
Deze miss.

Ja klopt het groen is puur achtergrond en dat kun je op veel verschillende manieren regelen das het mooie van CSS.

Die FilmTotaal site heeft eigenlijk precies het zelfde, een grijze achtergrond dat standaard boven en onder laat zien.
Alleen zodra er een menu actief is of wordt dan komt er een kleurtje overheen zodat het lijkt alsof je twee menu’s krijgt.

Het is moeilijk uit te leggen.

Maar als je de Google Chrome of Safari browser heb dan kun je op hun site eens op het het item Frontpage gaan staan en dan rechter-muis-click doen en dan kiezen voor inspecteer element

Als het goed is zie je dan dit staan ergens bij het menu.

<ul id="mainmenu">

Daar begint de eerste lijst (menu) en als je de code aanwijst zie je op het scherm tot waar deze loopt. Dus dat is boven + onder.

Als je dan één stapje verder gaat in de code dan kom je bij het eerste Menu item uit ‘Frontpage’ die wordt getoond als:

<li class="blaat">...</li>

Maar als je goed kijkt zie je dat je nu maar één keer een <ul> hebt gehad en dat er een hele hoop <li> codes onder elkaar staan. De <li> codes (lists) dat zijn de menu items op de bovenste rij en staan achter elkaar, zorgen dat die achter elkaar komen dat doe je met CSS. Maar open je zo’n <li> dan zie je dat er meer in staat dan alleen de naam van het menu item.

Als het goed is zie je dan binnen de eerste <li> een <a href="link">Frontpage</a> staan dat is de link naar de homepage maar direct daar onder zie je weer een <ul> dus vanaf daar begint alles weer opnieuw. Zeg maar een menu in een menu. Want in die tweede <ul> zie je ook weer een hoop <li> staan en als je die aanwijst met je cursor dan zie je dat je op de tweede (onderste) verdieping zit.

Dat is een beetje zoals het werkt.
En via het linkje dat ik gegeven heb in mijn eerste reactie leggen ze wel uit hoe je dat allemaal in-line kunt positioneren.

Succes.

Oke,

Ik zal je op weg helpen zodat je het systeem van horizontaal goed hebt staan.

Als eerste maak je een back-up van je style.css bestand zodat je altijd terug kunt naar wat je nu hebt

Daarna gaan we niets veranderen aan de broncode of template files van je thema maar alleen CSS aanpassen. (makkelijkste oplossing)

(stap 1)
Open je style.css en zoek de volgende regel (regel 397) op:

Na } druk je een paar keer op Enter zodat je wat ruimte krijgt.

Dit:

#foxmenucontainer{
	height:30px;
	display:block;
	margin:0px auto;
	font-size: 12px;
	background:#3e3e3e;

	}

Moet boven je spaties-/Enters blijven staan die je net hebt gemaakt.

(stap 2)
Type alleen dit:
/*

Hiermee ‘comment’ je een heel groot gedeelte code uit zodat het niet meer gebruikt wordt.

(stap 3)
Copy -/paste deze code nadat je dit ziet of leest: (regel 504)
Dus na dit:
/* Menu */

#menu-main-navigation {
	position: absolute;
	margin: 0;
	padding: 0;
}
#menu-main-navigation li {
	list-style: none;
	float: left;
}
#menu-main-navigation li a {
	display: block;
	padding: 3px 8px;
	text-transform: uppercase;
	text-decoration: none;
	color: #999;
	font-weight: bold;
}
#menu-main-navigation li a:hover {
	color: #000;
}

#menu-main-navigation li ul {
	display: none;
}
#menu-main-navigation li:hover ul, #navbar li.hover ul {
	position: absolute;
	display: inline;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
}

#menu-main-navigation li:hover li, #navbar li.hover li {
	float: left;
}
#menu-main-navigation li:hover li a, #navbar li.hover li a {
	color: #000;
}
#menu-main-navigation li li a:hover {
	color: #357;
}

Het style.css opslaan.

(stap 4)
Inloggen in je WordPress admin..

En naar het menu-item ‘MENU’ gaan (daar waar je menu’s kunt aanpassen)

En je maakt nu een nieuw menu aan dat je Main Navigation noemt!
Precies het zelfde als dat ik doe op deze afb.
Afbeelding

Als het goed is heb je nu het dropdown menu horizontaal de rest moet je zelf proberen uit te zoeken het is nu alleen nog een maar positioneren en stijlen in de kleuren die je graag wilt.

Succes!

Ik ging er even standaard vanuit dat dit thema was gebouwd op basis van Twenty Ten maar dat is het blijkbaar niet.

Dan moet je Main Navigation toevoegen als 2de menu en het eerste menu wissen zodat er niets in staat.

Kijken of dat werkt.

Oke het lijkt erop dat de code in je header.php die nu het menu aanroept anders is dan standaard.

Daarom gaan we die even vervangen.

Plaats alleen dit:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

In je header.php bestand tussen dit:

<div id="foxmenucontainer"> .... hier ... </div>

Maak voor de zekerheid even een back-up van je header.php bestand.

Heb je het menu Main Navigation genoemd en als Primary gezet aan de linker kant? (bij Theme location)

Beetje kennis van CSS , margins , paddings , backgrounds,

w3schools.com /CSS

Daar kun je CSS en ook HTML helemaal gratis leren.