Onderwerp: JS uitklap menu of CSS

Ik heb me echt rot gezocht zodat ik mijn menu kan uitklappen. En met uitklappen bedoel ik hetvolgende:

Code:

 __________  __________
|__________|___________|
           |___________|
           |___________|

Als ik over die knop linksboven ga met mijn muis, dan moet ik aan de rechterkant kunnen kiezen uit een subgroep.

Ik heb vanalles geprobeerd met CSS, maar ik kreeg het niet werkend voor IE.

Heeft iemand zon JS script liggen of een CSS oplossing?

Oorspronkelijk geplaatst door TiMMiEJ

Ik heb me echt rot gezocht zodat ik mijn menu kan uitklappen. En met uitklappen bedoel ik hetvolgende:

Code:

 __________  __________
|__________|___________|
           |___________|
           |___________|

Als ik over die knop linksboven ga met mijn muis, dan moet ik aan de rechterkant kunnen kiezen uit een subgroep.

Ik heb vanalles geprobeerd met CSS, maar ik kreeg het niet werkend voor IE.

Heeft iemand zon JS script liggen of een CSS oplossing?

Als je het toch niet zelf maakt, waarom download je dan niet 1 van die 1000den scriptjes die dat doen?

Uh, ik heb gezocht naar zon ding. Maar het enige wat ik vind is dropdown menu's.

Code:

<div id="nav">
	<ul id="menu">
		<li id="nav-home" class="actief">
			<a href="#">Home</a>
		</li>
		<li id="nav-diensten" onmouseover="document.getElementById('sub-diensten').style.display = 'block'" onmouseout="document.getElementById('sub-diensten').style.display = 'none'">
			<a>Diensten</a>
			<ul id="sub-diensten">
				<li id="dienst1"><a href="#">Dienst 1</a></li>
				<li id="dienst2"><a href="#">Dienst 2</a></li>
				<li id="dienst3"><a href="#">Dienst 3</a></li>
				<li id="dienst4"><a href="#">Dienst 4</a></li>
			</ul>
		</li>
		<li id="detest" onmouseover="document.getElementById('sub-detest').style.display = 'block'" onmouseout="document.getElementById('sub-detest').style.display = 'none'">
			<a>Quickscan</a>
		</li>
		<li id="nav-overons" onmouseover="document.getElementById('sub-overons').style.display = 'block'" onmouseout="document.getElementById('sub-overons').style.display = 'none'">
			<a>Over ons</a>
			<ul id="sub-overons">
				<li id="nav-informatie"><a href="#">Informatie</a></li>
				<li id="nav-contact"><a href="#">Contact</a></li>
			</ul>
		</li>
	</ul>	
</div>

CSS:
#nav {
background-image: url('../pictures/nav.jpg');
height: 30px;
padding: 0px 0px 0px 80px;
}
#menu {
list-style: none;
padding: 0;
margin: 0;
}

#menu li{
float: left;
margin-right: 15px;
}

#menu li a {
text-decoration: none;
font-size: 1.3em;
padding: 5px;
background-repeat: no-repeat;
background-position: bottom left;
background-image: url(../pictures/listitem.jpg);
color: #4F555C;
display: block;
width: 120px;
height: 20px;
letter-spacing: 1px;
}

#menu li a:hover, #menu li.actief a{
background-repeat: no-repeat;
background-position: bottom left;
background-image: url(../pictures/listitemhover.jpg);
}

#menu li ul{
list-style: none;
display: none;
margin-left: -40px;
_margin-left: 0px;
position: absolute;
width: 100px;
}

#menu li ul li a, #menu li.actief ul li a{
border: 0;
display: block;
background-repeat: repeat-y;
background-image: url(../pictures/listitem.jpg);
color: white;
font-size: 1em;
padding: 4px 2px 4px 23px;
width: 105px;
}

#menu li ul li a:hover, #menu li ul li.actief a{
border: 0;
background-repeat: repeat-y;
background-image: url(../pictures/listitemhover.jpg);
}

Ik heb ooit een dergelijk menu gemaakt voor IE. Compleet met CMS erbij.
Op verzoek wil ik deze wel opduikelen...

CMS Made Simple heeft deze mogelijkheid er ook standaard al inzitten.

Je bedoelt een dergelijk menu op www.easy-is.nl ? Deze maakt gebruikt van CSS en HTML/PHP. Het moet dus mogelijk zijn om dergelijke menu's op te bouwen zonder javascript, overigens ook beter ivm zoekmachines.

Oorspronkelijk geplaatst door FSCJasper

Je bedoelt een dergelijk menu op www.easy-is.nl ? Deze maakt gebruikt van CSS en HTML/PHP. Het moet dus mogelijk zijn om dergelijke menu's op te bouwen zonder javascript, overigens ook beter ivm zoekmachines.

U heeft die site duidelijk niet zelf gebouwd, danwel erg goed gekeken. Deze maakt namelijk gewoon gebruik van JavaScript om de menu's uit te klappen hoor. Zie de sfHover-functie.

Klopt, deze website is inderdaad uitbesteed aan onze partner.

Inderdaad nu duidelijk dat er javascript gebruikt is geworden. Een simpel foutje. Het website ontwerp laat ik aan mensen over die er verstand van hebben, vandaar dat ik niet 100% op de hoogte bleek.

Overigens is zoiets wel wat de TS bedoelde?

Javascript wil je niet in een menu hebben lijkt me.

Hoezo? Omdat de zoekmachines daar niet mee om kunnen gaan?

Nee, omdat een hoop mensen JS uit hebben staan
Niet erg handig als je dan de helft niet kan zien / bereiken.

Hier kan je vast wel een css menu vinden wat je past:

http://www.cssplay.co.uk/menus/index.html

Succes!

- Dennie

Oorspronkelijk geplaatst door Komto

Nee, omdat een hoop mensen JS uit hebben staan
Niet erg handig als je dan de helft niet kan zien / bereiken.

Dus de zoekmachines hebben geen probleem met JS. Weet je misschien iets over hoeveel hoop JS heeft uitgeschakeld?

Ik gebruik waar mogelijk bewust CSS, i.v.m. de WCAG/WAI norm. Maar heb dan ook aan een 3-tal 'drempelvrij' websites gewerkt. Javascript proberen we waar mogelijk zoveel mogelijk te vermijden. Zeker dingen zonder standaard bulletlist zoals bijvoorbeeld Coolmenu etc.