klikmenu

bobvh · 22 feb 2010

hoi
ik wil graag een soort klikmenu maken zoals op de website van

www.osvoudbeijerland.nl/
weet iemand misschien hoe het het moet

alles is welkom

thapriest · 22 feb 2010

Staat op die pagina al in de bron

In deze met javascript gedaan.

Code:

</style>
</head>
<!-- 
	Website gemaakt door Ivaldi
	w. www.ivaldi.nl
	e. info@ivaldi.n
-->
<script type="text/javascript" src="../js/std.js"></script>
<script type="text/javascript" src="../js/moo_packed.js" ></script>
<script type="text/javascript">		
window.addEvent('domready', function(){	
	var accordion = new Accordion('li.atStart', 'div.atStart', {
		opacity: false,
		display: Cookie.get('accOpen'),
		onActive: function(toggler, element){
			toggler.setStyle('color', '#000000');
			Cookie.set('accOpen', this.previous);				
		},		
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#222');
		}
	}, $('accordion'));
});
</script>

<body>
<div id="container">
	<div id="top">
    <ul>
    	<li><a href="../nieuws">Home</a></li>
      	<li><a href="../content/?id=1">Route</a></li>
      	<li><a href="../content/?id=2">Contact</a></li>
      	<li><a href="../weekbrief">Weekbrief</a></li>
    </ul>
  	</div>
  		<h1 id="header"><img src="../img/header.png" alt="Voetbalvereniging OSV Oud-Beijerland" /></h1>
 		<ul id="menu"> 		
 		<div id="accordion">
 			<!-- Nieuws -->
 			<li class="toggler atStart"><strong>Nieuws</strong></li>
 			<div class="element atStart">
 				<ul class="submenu">
		   			<li><a href="../nieuws">Laatste nieuws</a></li>
		   			<li><a href="../nieuws/archief.php">Nieuwsarchief</a></li>
	   			</ul>
   			</div>  
    		<!-- Weekbrief -->
 			<li class="toggler atStart"><strong>Weekbrief</strong></li>
 			<div class="element atStart">
 				<ul class="submenu">
		   			<li><a href="../weekbrief">Laatste weekbrieven</a></li>
		   			<li><a href="../weekbrief/archief.php">Weekbrieven archief</a></li>
	   			</ul>
   			</div>  		
   			<!-- Organisatie -->
   			<li class="toggler atStart"><strong>Organisatie</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=3">Bestuur</a></li>  
		   			<li><a href="../content/?id=4">Waarden & Normen Comm.</a></li> 
		   			<li><a href="../content/?id=5">Voetbal Technische Zaken</a></li> 
		   			<li><a href="../content/?id=6">Jeugd Commissie</a></li> 
		   			<li><a href="../content/?id=7">Sponsor Commissie</a></li> 
		   			<li><a href="../content/?id=8">Kantine Commissie</a></li> 
		   			<li><a href="../content/?id=9">Overige Commissies</a></li> 
	   			</ul>
   			</div>
   			<!-- Informatie -->
   			<li class="toggler atStart"><strong>Informatie</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=10">Accommodatie / Sportpark</a></li> 
		   			<li><a href="../content/?id=1">Routebeschrijving</a></li> 
		   			<li><a href="../content/?id=11">Contributie</a></li> 
		   			<li><a href="../content/?id=12">Reglement</a></li> 
		   			<li><a href="../content/?id=13">Kantine Reglement</a></li> 
		   			<li><a href="../content/?id=14">Lid worden</a></li> 
		   			<li><a href="../content/?id=15">Clublied</a></li> 
		   		</ul>
   			</div>
   			<!-- Teams -->   			
   			<li class="toggler atStart"><strong>Teams</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=16">Senioren</a></li> 
		   			<li><a href="../content/?id=17">Junioren</a></li> 
		   			<li><a href="../content/?id=18">Pupillen</a></li> 
		   			<li><a href="../content/?id=19">Indeling OSV teams</a></li> 
		   			<li><a href="../content/?id=20">Verzameltijd / vertrektijden</a></li>
		   		</ul> 
	   		</div>
   			<!-- Programma -->
   			<li class="toggler atStart"><strong>Programma</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=21">Deze week</a></li> 
		   			<li><a href="../content/?id=22">Volgende week</a></li>
		   			<li><a href="../content/?id=23">Periode</a></li>  
		   			<li><a href="../content/?id=24">Afgelasting</a></li> 
		   			<li><a href="../content/?id=25">Trainingschema</a></li> 
		   		</ul>
   			</div>  			
   			<!-- Activiteiten -->
   			<li class="toggler atStart"><strong>Activiteiten</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=26">Beker wedstrijden</a></li> 
		   			<li><a href="../content/?id=27">Toernooien</a></li> 
		   			<li><a href="../content/?id=28">Int. A jeugd toernooi</a></li> 
		   			<li><a href="../content/?id=29">Hoeksche Waard Bokaalen</a></li> 
		   			<li><a href="../content/?id=30">Activiteiten Kalender OSV</a></li> 
	   			</ul>   			
   			</div>
	   		<!-- Multimedia -->	
   			<li class="toggler atStart"><strong>Multimedia</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
   					<li><a href="../fotos">Foto-album</a></li> 
   					<li><a href="../fotos/archief.php">Foto-album archief</a></li> 
   				</ul>
   			</div>   			
   			<!-- Sponsoring -->
   			<li class="toggler atStart"><strong>Sponsoring</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=31">Sponsors</a></li> 
		   			<li><a href="../content/?id=32">Sponsormogelijkheden</a></li> 
		   		</ul>
	   		</div>
   			<!-- Interactief -->
   			<li class="toggler atStart"><strong>Interactief</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=33">Links</a></li> 
		   			<li><a href="../content/?id=2">Contact</a></li> 
	   				<li><a href="../content/?id=34">Downloads</a></li> 
	   			</ul>
   			</div>
   			<!-- Extra -->
   			<li class="toggler atStart"><strong>Extra</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=36">Sitemap</a></li>   			
		   			<li><a href="../content/?id=35">Colofoon / Disclaimer</a></li>    				
	    			    			<li><a href="../login">Inloggen</a></li>
	    			    		</ul>
    		</div>
    		
    	 	</div><!-- END OF ACCORDION -->    		
  		</ul>
  <div id="content">

<!-- END OF HEADER -->

Mickeys Monkey · 22 feb 2010

thapriest zei:

Staat op die pagina al in de bron

In deze met javascript gedaan.

Code:

</style>
</head>
<!-- 
	Website gemaakt door Ivaldi
	w. www.ivaldi.nl
	e. info@ivaldi.n
-->
<script type="text/javascript" src="../js/std.js"></script>
<script type="text/javascript" src="../js/moo_packed.js" ></script>
<script type="text/javascript">		
window.addEvent('domready', function(){	
	var accordion = new Accordion('li.atStart', 'div.atStart', {
		opacity: false,
		display: Cookie.get('accOpen'),
		onActive: function(toggler, element){
			toggler.setStyle('color', '#000000');
			Cookie.set('accOpen', this.previous);				
		},		
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#222');
		}
	}, $('accordion'));
});
</script>

<body>
<div id="container">
	<div id="top">
    <ul>
    	<li><a href="../nieuws">Home</a></li>
      	<li><a href="../content/?id=1">Route</a></li>
      	<li><a href="../content/?id=2">Contact</a></li>
      	<li><a href="../weekbrief">Weekbrief</a></li>
    </ul>
  	</div>
  		<h1 id="header"><img src="../img/header.png" alt="Voetbalvereniging OSV Oud-Beijerland" /></h1>
 		<ul id="menu"> 		
 		<div id="accordion">
 			<!-- Nieuws -->
 			<li class="toggler atStart"><strong>Nieuws</strong></li>
 			<div class="element atStart">
 				<ul class="submenu">
		   			<li><a href="../nieuws">Laatste nieuws</a></li>
		   			<li><a href="../nieuws/archief.php">Nieuwsarchief</a></li>
	   			</ul>
   			</div>  
    		<!-- Weekbrief -->
 			<li class="toggler atStart"><strong>Weekbrief</strong></li>
 			<div class="element atStart">
 				<ul class="submenu">
		   			<li><a href="../weekbrief">Laatste weekbrieven</a></li>
		   			<li><a href="../weekbrief/archief.php">Weekbrieven archief</a></li>
	   			</ul>
   			</div>  		
   			<!-- Organisatie -->
   			<li class="toggler atStart"><strong>Organisatie</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=3">Bestuur</a></li>  
		   			<li><a href="../content/?id=4">Waarden & Normen Comm.</a></li> 
		   			<li><a href="../content/?id=5">Voetbal Technische Zaken</a></li> 
		   			<li><a href="../content/?id=6">Jeugd Commissie</a></li> 
		   			<li><a href="../content/?id=7">Sponsor Commissie</a></li> 
		   			<li><a href="../content/?id=8">Kantine Commissie</a></li> 
		   			<li><a href="../content/?id=9">Overige Commissies</a></li> 
	   			</ul>
   			</div>
   			<!-- Informatie -->
   			<li class="toggler atStart"><strong>Informatie</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=10">Accommodatie / Sportpark</a></li> 
		   			<li><a href="../content/?id=1">Routebeschrijving</a></li> 
		   			<li><a href="../content/?id=11">Contributie</a></li> 
		   			<li><a href="../content/?id=12">Reglement</a></li> 
		   			<li><a href="../content/?id=13">Kantine Reglement</a></li> 
		   			<li><a href="../content/?id=14">Lid worden</a></li> 
		   			<li><a href="../content/?id=15">Clublied</a></li> 
		   		</ul>
   			</div>
   			<!-- Teams -->   			
   			<li class="toggler atStart"><strong>Teams</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=16">Senioren</a></li> 
		   			<li><a href="../content/?id=17">Junioren</a></li> 
		   			<li><a href="../content/?id=18">Pupillen</a></li> 
		   			<li><a href="../content/?id=19">Indeling OSV teams</a></li> 
		   			<li><a href="../content/?id=20">Verzameltijd / vertrektijden</a></li>
		   		</ul> 
	   		</div>
   			<!-- Programma -->
   			<li class="toggler atStart"><strong>Programma</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=21">Deze week</a></li> 
		   			<li><a href="../content/?id=22">Volgende week</a></li>
		   			<li><a href="../content/?id=23">Periode</a></li>  
		   			<li><a href="../content/?id=24">Afgelasting</a></li> 
		   			<li><a href="../content/?id=25">Trainingschema</a></li> 
		   		</ul>
   			</div>  			
   			<!-- Activiteiten -->
   			<li class="toggler atStart"><strong>Activiteiten</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=26">Beker wedstrijden</a></li> 
		   			<li><a href="../content/?id=27">Toernooien</a></li> 
		   			<li><a href="../content/?id=28">Int. A jeugd toernooi</a></li> 
		   			<li><a href="../content/?id=29">Hoeksche Waard Bokaalen</a></li> 
		   			<li><a href="../content/?id=30">Activiteiten Kalender OSV</a></li> 
	   			</ul>   			
   			</div>
	   		<!-- Multimedia -->	
   			<li class="toggler atStart"><strong>Multimedia</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
   					<li><a href="../fotos">Foto-album</a></li> 
   					<li><a href="../fotos/archief.php">Foto-album archief</a></li> 
   				</ul>
   			</div>   			
   			<!-- Sponsoring -->
   			<li class="toggler atStart"><strong>Sponsoring</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=31">Sponsors</a></li> 
		   			<li><a href="../content/?id=32">Sponsormogelijkheden</a></li> 
		   		</ul>
	   		</div>
   			<!-- Interactief -->
   			<li class="toggler atStart"><strong>Interactief</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=33">Links</a></li> 
		   			<li><a href="../content/?id=2">Contact</a></li> 
	   				<li><a href="../content/?id=34">Downloads</a></li> 
	   			</ul>
   			</div>
   			<!-- Extra -->
   			<li class="toggler atStart"><strong>Extra</strong></li>
   			<div class="element atStart">
   				<ul class="submenu">
		   			<li><a href="../content/?id=36">Sitemap</a></li>   			
		   			<li><a href="../content/?id=35">Colofoon / Disclaimer</a></li>    				
	    			    			<li><a href="../login">Inloggen</a></li>
	    			    		</ul>
    		</div>
    		
    	 	</div><!-- END OF ACCORDION -->    		
  		</ul>
  <div id="content">

<!-- END OF HEADER -->

Dit klopt niet helemaal zoals je in de code kunt zien.
Je mist dan nog twee script bestandjes om dit werkend te krijgen.
../js/std.js en ../js/moo_packed.js

thapriest · 22 feb 2010

Je hebt helemaal gelijk, sorry, antwoord was iets te snel gegeven.

Mickeys Monkey · 22 feb 2010

Probeer het eens via dit webadres http://www.leejoo.nl/java/menu/dynamisch_vertikaal_menu.htm

Hier staat de code met een vergelijkbaar menu.
Natuurlijk vergt dit script wel wat aanpassingen naar de links en desgewenst een andere kleur.

klikmenu

bobvh

Nieuwe gebruiker

thapriest

Gebruiker

Mickeys Monkey

Banned

thapriest

Gebruiker

Mickeys Monkey

Banned

Nieuwste berichten

Wij waarderen jouw privacy