dropdown menu

Status
Niet open voor verdere reacties.
Dat doe je met javascript in het onclick="" attribuut van het menuitem.
Dit is nog niet eens zo heel erg mooi want je kunt het opengeklapte submenu niet meer sluiten.

Succes ermee!

Johan van den Brink
Flashback Webdesign
http://www.flashbackwebdesign.nl
 
ik heb een voorbeeldje gemaakt, je kan hem hier bekijken: staat niet meer online

en hier het script:

HTML: 
<html>
<head>
    <style type='text/css'>
    a#verborgen1, a#verborgen2, a#verborgen3
    {
        display:none;
    }
    a.menu
    {
        text-decoration: none;
    }
    </style>
    <script language='Javascript'>
    function toon(id)
    {
         var e=document.getElementsByName("verborgen");
         for(var i=0;i<e.length;i++)
            {e[i].style.display = "none";}
        document.getElementById(id).style.display = "inline";
    }
    </script>
</head>
<body>
<ul>
<li class='menu'>
    <div style='width:100px;'>
    <a href='#' class='menu' onmouseover='toon("verborgen1")'>klik</a><br>
    <a href='#' class='menu' name='verborgen' id='verborgen1'>klik verborgen</a>
    </div>
</li>
<hr align='left' width='100px' />
<li class='menu'>
    <div style='width:100px;' >
    <a href='#' class='menu' onmouseover='toon("verborgen2");'>klik</a><br>
    <a href='#' class='menu' name='verborgen' id='verborgen2'>klik verborgen</a>
    </div>
</li>
<hr align='left' width='100px' />
<li class='menu'>
    <div style='width:100px;'>
    <a href='#' class='menu' onmouseover='toon("verborgen3")'>klik</a><br>
    <a href='#' class='menu' name='verborgen' id='verborgen3'>klik verborgen</a>
    </div>
</li>
</ul>
</body>
</html>
hier voor moet alleen wel javascript aan staan, aders werkt het niet.

EDIT,
nieuwe versie zonder javascript:

HTML: 
<html>
<head>
    <style type='text/css'>
    a.verborgen
    {
        display:none;
    }
    a.menu
    {
        text-decoration: none;
    }
    div.menu:hover a.verborgen
    {
        display: inline;
    }
    div.menu:hover
    {
        background-color:yellow;
    }
    </style>
</head>
<body>
<ul>
<li>
    <div class='menu' style='width:100px;'>
    <a href='#' class='menu'>klik 1</a><br>
    <a href='#' class='menu verborgen'>klik verborgen 1</a>
    </div>
</li>
<hr align='left' width='100px' />
<li class='menu'>
    <div class='menu' style='width:100px;' >
    <a href='#' class='menu'>klik 2</a><br>
    <a href='#' class='menu verborgen'>klik verborgen 2</a>
    </div>
</li>
<hr align='left' width='100px' />
<li class='menu'>
    <div class='menu' style='width:100px;'>
    <a href='#' class='menu'>klik 2</a><br>
    <a href='#' class='menu verborgen'>klik verborgen 2</a>
    </div>
</li>
</ul>
</body>
</html>
 
Laatst bewerkt:
nog een nieuw update: (ik heb de online pagina ook geupdate)
ik heb de css even in een aparte pagina gezet.

css.css
HTML: 
a.verborgen
	{
		display:none;
	}
	body#pagina1 div#pagina1 a.verborgen,
	body#pagina2 div#pagina2 a.verborgen,
	body#pagina3 div#pagina3 a.verborgen
	{
		display:inline;
	}
	body#pagina1 div#pagina1,
	body#pagina2 div#pagina2,
	body#pagina3 div#pagina3
	{
		background-color:yellow;
	}
	a.menu
	{
		text-decoration: none;
	}
	div.menu:hover a.verborgen
	{
		display: inline;
	}
	div.menu:hover
	{
		background-color:yellow;
	}
en de html:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<link href='css.css' rel='stylesheet' type='text/css'>
</head>
<body id='pagina1'>
<ul>
<li>
	<div class='menu' style='width:100px;' id='pagina1'>
	<a href='pagina1.html' class='menu'>klik 1</a><br>
	<a href='pagina1.html' class='menu verborgen' >klik verborgen 1</a>
	</div>
</li>
<hr align='left' width='100px' />
<li class='menu'>
	<div class='menu' style='width:100px;' id='pagina2'>
	<a href='pagina2.html' class='menu'>klik 2</a><br>
	<a href='pagina2.html' class='menu verborgen' >klik verborgen 2</a>
	</div>
</li>
<hr align='left' width='100px' />
<li class='menu'>
	<div class='menu' style='width:100px;' id='pagina3'>
	<a href='pagina3.html' class='menu'>klik 2</a><br>
	<a href='pagina3.html' class='menu verborgen' >klik verborgen 2</a>
	</div>
</li>
</ul>
</body>
</html>
om te zorgen dat het menu van de pagina waar in je zit al uitgeklapt en gekleurd is moet je in de body de id veranderen nar de pagina waar je op zit.
bijvoorbeeld:
HTML: 
<body id='pagina1'>
of
<body id='pagina2'>
of
<body id='pagina3'>
als je wil dat er geen menu is uitgeklapt haal je de id gewoon weg.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan