Ik ben al aardig opweg met een menu in CSS maar nu moet ik eigenlijk een aantal sub knoppen hebben in het item Search. Ik hb reeds rond gekeken maar vindt alleen maar dropdown dingen. Nu is mijn kennis van CSS niet zo dat ik het toe kan passen. Mischien dat iemand hier mij verder kan helpen.
Het menu ziet er zo uit:
@SanThe: Waar doel je eigenlijk op?
@gharryh: dit kan je toch 't beste doen met een dropdown. Natuurlijk kan je 't er ook gewoon onderzetten, maar ik neem aan dat je 't wilt laten tonen door eerst te klikken. Dit kan je met javascript (Voor IE) en css doen door een hide div te gebruiken.
Die respons was voor gharryh omdat ie vroeg hoe je een plaatje kon plaatsen. Maar hij had het inmiddels zelf al gevonden en de vraag verwijderd. Vandaar mijn, nu, loze antwoord.
@Turmin
Bij het verder zoeken gisteravond met jouw idee heb ik e.e.a. aangepast naar wat ik hieronder plaats. Het enige probleem is nu dat het submenu netjes naast het menu komt te staan maar dan helemaal bovenaan terwijl ik dat er direct naast moet hebben.
<html><head>
<title>Flyout menu test</title>
<style type="text/css">
body {
font-size: 0.69em;
}
/* Bepaal groote van het menu */
.menu {
width: 14em;
border-right: 1px solid #000;
padding: 0 0 0.2em 0;
marging-bottom: 1em;
font-size: 1em;
background-color: #06d608;
color: #333;
}
/* De plaats van het menu binnen de div */
.menu ul {
list-style: none;
margin: 0;
padding: 0;
border: none
}
/* De basisplaats van het submenu */
.menu ul ul {
visibility: hidden;
position: absolute;
height: 0;
left: 14em;
top: 0;
width: 14em;
}
/* Dit lijntje vormt de scheiding tussen de knoppen */
.menu li {
border-bottom: 1px solid #06d608;
margin: 0
}
/* Bepaal de looks van het menu */
.menu li a {
display: block;
padding: 4px 4px 4px 0.5em;
border-left: 10px solid #005242;
border-right: 10px solid #ced610;
background-color: #84ad31;
color: #fff;
text-decoration: none;
}
/* Gevonden hack voor IE5.5 */
html>body .menu li a {
width: auto;
}
/* Opmaak van het submenu tabel voor gebruik in IE */
.menu table {
position: absolute;
top: 0;
left: 0;
}
.menu li a:hover {
border-left: 10px solid #009933;
border-right: 10px solid #cccc99;
background-color: #66ff33;
color: #fff;
}
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility: visible;
}
</style>
</head><body>
<div class="menu" >
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Add Combination">Add Combination</a></li>
<li><a href="#" title="Edit Combination">Edit Combination</a></li>
<li><a href="#" title="Create List">Create List</a></li>
<li><a href="#" title="Create Report">Create Report</a></li>
<li><a class="drop" href="#" title="Search">Search<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="Horses">Horses</a></li>
<li><a href="#l" title="Riders">Riders</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" title="Update">Update</a></li>
<li><a href="#" title="Admin">Admin</a></li>
<li><a href="#" title="Links">Links</a></li>
</ul>
</div>
</body></html>
---- edit ----
Heb het gedeelte dat het menu laat zien zo aangepast dat het submenu naar beneden schuift.
/* Laat het submenu zien */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility: visible;
position: absolut;
top: 98px;
}
Als er een button boven bij wordt geplaatst zal de waarde van 98px aangpast moeten worden.
Zou je dat de volgende keer in je eerste post willen vermelden? Dan ga ik niet voor niets een voorbeeld voor je maken.
Helemaal zonder JS gaat het niet lukken. IE6 ondersteunt namelijk niet de pseudo class :hover op andere elementen dan de <a> tag. Daar zijn wel oplossingen voor, maar voorzover mij bekend steunen die allemaal op JavaScript.
Beste Jan, wat ik met de opmerking eigenlijk bedoelde dat ik met CSS verder wilde om te voorkomen dat bij een wijziging er iets op twee plaatsen aangepast moet worde.
Wat dat betreft is er geen verschill tussen CSS en JavaScript. Beiden kun je in een extern bestand plaatsen en in de <head> sectie aan je pagina's koppelen.
