Menu met submenu's

Status
Niet open voor verdere reacties.
I

Iineke

Gebruiker
Lid geworden
24 aug 2012
Berichten
68
Ik wil in een menu submenu's gebruiken.
Ik weet dat dat heel simpel is, gewoon een extra regel toevoegen onder de menuregel, maar met net iets extra erin.
Wat ook weer?
 
Hoi Iineke,
Zoiets?
HTML: 
<ul id="menu">
    <li><a href="...">Home</a></li>
    <li><a href="...">Portfolio</a>
        <ul>
            <li><a href="...">Creatief met websites</a></li>
            <li><a href="...">Creatief met kurk</a></li>
            <li><a href="...">Creatief met conservenblikjes</a></li>
        </ul>
    </li>
</ul>
Of de handige List-O-Matic gebruiken. :)

Met vriendelijke groet,
CSShunter
 
Ja, dank je wel, dat was het, dat ul voor list.

Nog een aanvullende vraag: welke code heb ik dan nodig om zo'n submenu pas te laten openen als er op de betreffende tekst in het hoofdmenudeel wordt geklikt?

Ik vermoed dat ik dan iets moet aanpassen in het css-bestand, daar staat nu:

Code: 
/* LEFT NAVIGATION */


.leftnavigation {
	width: 192px;
	margin: 70px 0px 0px 0px;
	padding-left: 8px;
	float: left;
	list-style-type: none;
}

.leftnavigation a{
	margin-left: 0px;
	width: 156px;
	padding-left: 15px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	float: left;
	color: #364957;
	font-size: 10px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	background-image: url(images/nav_normal.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	border-bottom: 1px solid #999;
}

.leftnavigation a:visited{
	color: #364957;
}
.leftnavigation a:hover{
	color: #ffffff;
	background-image: url(images/nav_down.jpg);
}
 
Ik vond elders dit:
HTML: 
<style type="text/css">
	#flyout-menu{
		height:230px;
		white-space:nowrap;
		position:relative;
		font-size:0.8em}
	#flyout-menu li{
		margin:0;
		padding:0;
		list-style:none;}
	#flyout-menu li{
		display:inline}
	#flyout-menu ul ul{
		position:absolute;
		left:-10000px}
	#flyout-menu ul#flyout-kop{
		position:absolute;
		left:0;
		top:0}
	#flyout-menu a{
		display:block;
		color:inherit;
		background:inherit;
		line-height:2.2em;
		padding:0 40px 0 10px} 
	#flyout-menu li a.fly{
		background:url(pijl.png) no-repeat right center}
	#flyout-menu li a:hover{
		background-color:#808080;
		color:#fff} 
	#flyout-menu li:hover > a{
		background-color:#808080;
		color:#fff}
	#flyout-menu ul li:hover > ul{
		left:100%;
		margin-top:-22px;
		margin-left:-1px}
	#flyout-menu a:hover ul,#flyout-menu a:hover a:hover ul,#flyout-menu a:hover a:hover a:hover ul{
		left:100%}
	#flyout-menu a:hover ul ul,#flyout-menu a:hover a:hover ul ul{
		left:-10000px}
</style>

Maar daar staat ook allemaal opmaak en zo in. En die wil ik niet aanpassen, die is al goed.
Is het ook belangrijk dat de naam flyout-menu is?
Of is een deel van de code hierboven in te passen in de code in mijn bericht daarboven, met als effect dat de submenu's zich pas openen als erop geklikt wordt of de muis erboven wordt gehouden?
 
opmaak (...) wil ik niet aanpassen, die is al goed.
Klik om te vergroten...
Ja, maar nog niet compleet voor de submenu's.

=======
Is het ook belangrijk dat de naam flyout-menu is?
Klik om te vergroten...
Nee hoor: als je in de html en in de css maar steeds dezelfde naam van de id of class van het menu aanhoudt, gaat het goed.

=======
... effect dat de submenu's zich pas openen als erop geklikt wordt of de muis erboven wordt gehouden?
Klik om te vergroten...
De styles van dat flyout-ding zien er wat anders uit dan wat je nu hebt.
Je kunt beter je bestaande styles aanpassen/uitbreiden, met als hoofdpunten:
  • De <li>'s een relatieve positie geven.
  • De <ul>'s van de submenu's een absolute positie (dan kunnen ze naast het item van het hoofdmenu komen waar ze bij horen).
  • De {float: left} uit de links halen, en ze een {display: block geven} > dan zijn de items ook over de volle breedte te hoveren.
  • De {float: left} in de <li>'s zetten, dan gaat Internet Explorer niet raar doen.
  • De <ul>'s van de submenu's (met al hun items) onzichtbaar maken in normale toestand.
  • En ze dan laten verschijnen als je met de muis over een item van het hoofdmenu gaat.
  • Alle kleuren en randjes van de submenu's kan je desgewenst anders maken dan die van het hoofdmenu.
Met een html als dit:
HTML: 
<ul class="leftnavigation">
	<li><a href="#">Home</a></li>
	<li><a href="#">Portfolio</a>
		<ul>
			<li><a href="#">Creatief met websites</a></li>
			<li><a href="#">Creatief met kurk</a></li>
			<li><a href="#">Creatief met conservenblikjes</a></li>
		</ul>
	</li>
	<li><a href="#">Cursussen</a>
		<ul>
			<li><a href="#">Cursus html</a></li>
			<li><a href="#">Cursus css</a></li>
		</ul>
	</li>
	<li><a href="#">Cursiefjes</a></li>
	<li><a href="#">Contact</a>
		<ul>
			<li><a href="#">Route</a></li>
		</ul>
	</li>
</ul>
... kan de css bv. worden:
Code: 
/* LEFT NAVIGATION */

.leftnavigation {
	width: 192px;
	margin: 70px 0 0 0;
	padding: 0 0 0 8px;
	float: left;
	list-style: none;
}

.leftnavigation li {
	width: 100%; /* voor Internet Explorer */
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}

.leftnavigation ul {
	margin: -1px 0 0 0; /* omhoog met hoogte border-top lijntje */
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	left: -9999px; /* normaal buiten zicht */
	background: #E7E8FF;
	border: solid #999999;
	border-width: 1px 1px 0 1px;
}

.leftnavigation li:hover ul {
	left: 190px; /* bij hover op z'n plaats */
	}

.leftnavigation a {
	margin-left: 0px;
	width: 156px;
	padding-left: 15px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	color: #364957;
	font-size: 10px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	background-image: url(images/nav_normal.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	border-bottom: 1px solid #999999;
	display: block;
}

.leftnavigation a:visited{
	color: #364957;
}
.leftnavigation a:hover{
	color: #ffffff;
	background-color: green;
	background-image: url(images/nav_down.jpg);
}
  • Dan wordt het deze: uitklapmenu.htm
    De background-images had ik niet, daar even een kleurtje voor in de plaats gezet.
Met vriendelijke groet,
CSShunter
 
Dank je wel! Daar kom ik een heel stuk verder mee, ik ga er binnenkort even mee aan de slag!

Is het ook mogelijk dat het submenu niet naast uitklapt, maar naar onderen toe, waarbij het menudeel eronder naar beneden schuift?
Het is mijn intentie een site te maken met heel veel pagina's (die heb ik al, die wil ik overzetten naar deze site die ik nu aan het maken ben), en als ze dan naar rechts uitklappen, neemt het zo veel ruimte in links.
 
Yep, ze kunnen ook wel naar beneden openklappen.

Maar zoals je ziet: dan wordt de bediening erg lastig voor de bezoeker.
Je kunt dan niet van boven naar beneden over het menu gaan om de submenu's af te reizen: je moet telkens opnieuw beginnen...
Hoe langer het menu is, des te erger dat wordt! :rolleyes:
Naar rechts openklappen is veel duidelijker en gebruiksvriendelijker, ook al komt dat een stukje over de rest van de pagina heen; dat is men wel gewend bij uitklapmenu's.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Okee, dank je wel! Ik ga eens kijken hoe ik het het beste kan aanpakken, hoe het het meest gebruikersvriendelijk wordt.
Voorheen had ik een aantal hoofdcategorieën bovenaan staan, en dan per categorie menu's links, maar daarvoor combineerde ik een heleboek subdomeinen met elkaar, dus eigenlijk waren het 6 websites die er als één uitzagen.
Ik heb begrepen dat dat mogelijk een negatieve invloed heeft op de vindbaarheid van mijn site, en daarom wilde ik ze nu allemaal bij elkaar in één site onderbrengen.

Ik wil ook nog uit gaan zoeken of ik bijvoorbeeld een 'include' of zo kan maken voor het navigatiemenu, zodat ik bij een wijziging daarin het niet in alle pagina's hoef te veranderen.

--------------

Aanvulling (een paar uur later)
Het uitvouwen van de menu's op het eerste niveau gaat goed, maar het uitvouwen van het tweede niveau gaat niet goed: van het bovenste submenu worden meteen alle subsubmenu's getoond, en dat verandert niet als je naar een lager gelegen submenu gaat.
Moet ik daarvoor nog een extra instelling in het css-bestand wijzigen?

Daar staat nu:
HTML: 
/* LEFT NAVIGATION */

.leftnavigation {
	width: 192px;
	margin: 70px 0 0 0;
	padding: 0 0 0 8px;
	float: left;
	list-style: none;
}

.leftnavigation li {
	width: 100%; /* voor Internet Explorer */
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}

.leftnavigation ul {
	margin: -1px 0 0 0; /* omhoog met hoogte border-top lijntje */
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	left: -9999px; /* normaal buiten zicht */
	background: #E7E8FF;
	border: solid #999999;
	border-width: 1px 1px 0 1px;
}

.leftnavigation li:hover ul {
	left: 190px; /* bij hover op z'n plaats */
	}

.leftnavigation a {
	margin-left: 0px;
	width: 156px;
	padding-left: 15px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	color: #163d68;
	font-size: 10px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	background-image: url(images/nav_normal.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	border-bottom: 1px solid #999999;
	display: block;
}

.leftnavigation a:{
	color: #0c223b;
}
.leftnavigation a:hover{
	color: #ffffff;
	background-image: url(images/nav_down.jpg);
}
 
Laatst bewerkt:
Is er iemand die me kan helpen met mijn vraag in het bericht hierboven?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan