Vandaag gaan we een vertikaal webpage menu maken. Hierbij maken we gebruik van XHTML en CSS zoals is behandeld tijdens de FED lessen dit kwartaal, dus tot en met les5.
• ±20min – Bespreken voorbeeld van vertikaal menu (klassikaal)
• ±20min – Analyseren van andere menu voorbeelden (individueel)
• ±20min – Een eigen combi maken: een beetje van jezelf en
een beetje van Maggi
(individueel)
• ±20min – Werk bespreken (klassikaal)
Hieronder wordt een vertikaal menu weergegeven. Meer voorbeelden kun je vinden
op listamatic
Het lijkt ingewikkeld, maar eigenlijk is het vrij eenvoudig om zulke menu's
te maken. Slechts wat simpele XHTML en CSS instructies volstaan!
Onderstaand voorbeeld heb ik van http://css.maxdesign.com.au/listamatic/vertical09.htm
overgenomen en aangepast voor deze workshop. De hyperlinks wijzen naar de FED
lessen tot nu toe en worden elk in een nieuw browserwindow geopend.
De HTML en CSS code staat onder het menu weergegeven.
<div>
<ul>
<li><a href="../w1/les.html">FED les1</a></li>
<li><a href="../w2/les.html">FED les2</a></li>
<li><a href="../w3/les.html">FED les3</a></li>
<li><a href="../w4/les.html">FED les4</a></li>
<li class="active"><a href="../w5/les.html" class="current">FED les5</a></li>
</ul>
</div>
ul {
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}
ul li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}
ul li a {
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
ul li a:link { color: #448; }
ul li a:visited { color: #667; }
ul li a:active { color: #FF0; }
ul li a:hover {
border-color: #FE3;
color: #FFF;
background: #332;
}
Veel voorbeelden op listamatic zijn voorzien van de id's "#navcontainer", "#navlist" en "#current". Het werken met id's is nog niet in de lessen behandeld, dus probeer daarom een bestaand voorbeeld zo te maken dat je GEEN id's gebruikt, maar alleen elements en classes. En gebruik alleen classes als je er met het ombouwen van elements niet uit komt.
Je kunt de uitwerking van bovenstaand klassikaal besproken vertkale menu gebruiken
om een eigen variant daarop te maken. Het liefst zo weinig mogelijk Maggi
gebruiken en veel van jezelf, waardoor het meer 'eigen' wordt!
Gebruik hierbij ook alleen elements en classes.
Als je hier snel mee klaar bent, dan kun je natuurlijk ook eens kijken hoe je een horizontaal uitklapmenu maakt. Ook hiervan zijn voorbeelden te vinden op listamatic, een eenvoudige kun je bekijken via http://css.maxdesign.com.au/listamatic/horizontal04.htm
Wat hebben jullie zoal gemaakt tijdens deze workshop? Gemaakte menu's worden hierbij door de docent op de beamer getoond en klassikaal geanalyseerd en besproken.
Voor uitleg, editors, verwijzingen naar websites en boeken, zie de lesbrieven van dit kwartaal.