Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Waarschijnlijk een eenvoudige oplossing voor?

Woodmen - 08/11/2010 20:38 (laatste wijziging 08/11/2010 20:40)

Nieuw lid

Hallo allemaal,

Het volgende script (van internet) gebruik ik om menu's open dicht te laten klappen:

javascript code - Bekijk de code zonder highlighting - Klap code in

                function addEvent(obj, type, fn) {
	if( obj.attachEvent ) {
			obj["e"+type+fn] = fn;
			obj[type+fn] = function(){obj["e"+type+fn]( window.event );};
			obj.attachEvent( "on"+type, obj[type+fn] );
	} else {
			obj.addEventListener( type, fn, true );
	};
}

function initMenus() {
	/*Activate/deactivate menus*/
	$$('.smenu').each(function(s,index){
		addEvent(s,'click',function(){
			if($('smenu'+s.id.replace('a','')).visible()){
				//do nothing
			} else {
				$$('.smenu').each(function(s,index){
					if($('smenu'+s.id.replace('a','')).visible()) {
						//$('smenu'+s.id).hide(); //Prototype Method
						Effect.BlindUp($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method
					}
				});
				//$('smenu'+s.id).show(); //Prototype Method
				Effect.BlindDown($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method
			}
		});
	});
	
	/*All menu hiden by default*/
	$$('.smenu').each(function(s,index){
		if($('smenu'+s.id.replace('a','')).visible()) {
			$('smenu'+s.id.replace('a','')).hide();
		}
	});
	
	/*effects on menu*/
	$$('dl#menu dt').each(function(s,index){
		addEvent(s,'mouseout',function(){
			new Effect.Highlight(s, {duration:0.5, startcolor:'#ed1c22', endcolor:'#ed1c22', restorecolor
:'#ed1c22'});
		});
	});
}

addEvent(window, 'load', initMenus);


            
function addEvent(obj, type, fn) {
	if( obj.attachEvent ) {
			obj["e"+type+fn] = fn;
			obj[type+fn] = function(){obj["e"+type+fn]( window.event );};
			obj.attachEvent( "on"+type, obj[type+fn] );
	} else {
			obj.addEventListener( type, fn, true );
	};
}
 
function initMenus() {
	/*Activate/deactivate menus*/
	$$('.smenu').each(function(s,index){
		addEvent(s,'click',function(){
			if($('smenu'+s.id.replace('a','')).visible()){
				//do nothing
			} else {
				$$('.smenu').each(function(s,index){
					if($('smenu'+s.id.replace('a','')).visible()) {
						//$('smenu'+s.id).hide(); //Prototype Method
						Effect.BlindUp($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method
					}
				});
				//$('smenu'+s.id).show(); //Prototype Method
				Effect.BlindDown($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method
			}
		});
	});
 
	/*All menu hiden by default*/
	$$('.smenu').each(function(s,index){
		if($('smenu'+s.id.replace('a','')).visible()) {
			$('smenu'+s.id.replace('a','')).hide();
		}
	});
 
	/*effects on menu*/
	$$('dl#menu dt').each(function(s,index){
		addEvent(s,'mouseout',function(){
			new Effect.Highlight(s, {duration:0.5, startcolor:'#ed1c22', endcolor:'#ed1c22', restorecolor
:'#ed1c22'});
		});
	});
}
 
addEvent(window, 'load', initMenus);
 

En de html code van het menu zelf:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<dl id="menu">
  <dt class="smenu" id="a2"><span>Menu kop</span></dt>
    <dd id="smenu1">
	<ul>
		<li><a href="?pagina=1">1</a></li>
		<li><a href="?pagina=2">2</a></li>
                <li><a href="?pagina=3">3</a></li>
	</ul>
    </dd>
</dl>

<dl id="menu">
  <dt class="smenu" id="a2"><span>Menu kop</span></dt>
    <dd id="smenu1">
	<ul>
		<li><a href="?pagina=1">1</a></li>
		<li><a href="?pagina=2">2</a></li>
                <li><a href="?pagina=3">3</a></li>
	</ul>
    </dd>
</dl>

Dit script werkt prima. Alleen is er een mogelijkheid om bij het bezoeken van een pagina er voor te zorgen dat het menu uitgeklapt blijft?

Alvast bedankt voor jullie.

11 antwoorden

Gesponsorde links

Stijn - 08/11/2010 20:43
PHP expert		Werken met cookies

Martijn - 08/11/2010 21:35
Crew PHP		volgens mij doe je echt veel te lastig... je hebt als jQuery, en dan zoveel code.... Dit kan echt vele vele male makkelijker ik denk dat je wat meer moet kijken naar de eventlisteners van jQuery, tevens animate, slidedown(), slideup(). En dan kun je met een makkelijke GET ajax of cookies doen wat je wilt doen

Kevin - 08/11/2010 21:43
Crew Ajax/REST		Aanvullend op Martijn, gebruik de toggle functie met daarin een slidedown en slideup statement.

Woodmen - 08/11/2010 22:46 (laatste wijziging 08/11/2010 23:52)

Nieuw lid

Nog even wat eenvoudigs zitten maken. Denk dat jullie dit bedoelen alleen dan nog zonder de cookies...

javascript code - Bekijk de code zonder highlighting - Klap code in

                <script type="text/javascript">
$(document).ready(function(){
	
  //Standaard niet laten zien
  $(".link").hide(); 

  //Door op dt met class kop te klikken het geselecteerde menu langzaam openen
	$("dt.kop").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow").siblings("dd.link").slideUp("slow");
		return false;
	});

});

</script>

</head>

<body>
<div id="left">
<div id="menus">
 <dl id="menu">
  <dt class="kop"><span>Kop</span></dt>
   <dd class="link">
    <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
   </dd>
  <dt class="kop"><span>Kop2</span></dt>
   <dd class="link">
    <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
   </dd>
  </dl>
</div>
</div>

            
<script type="text/javascript">
$(document).ready(function(){
 
  //Standaard niet laten zien
  $(".link").hide(); 
 
  //Door op dt met class kop te klikken het geselecteerde menu langzaam openen
	$("dt.kop").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow").siblings("dd.link").slideUp("slow");
		return false;
	});
 
});
 
</script>
 
</head>
 
<body>
<div id="left">
<div id="menus">
 <dl id="menu">
  <dt class="kop"><span>Kop</span></dt>
   <dd class="link">
    <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
   </dd>
  <dt class="kop"><span>Kop2</span></dt>
   <dd class="link">
    <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
   </dd>
  </dl>
</div>
</div>
 

Edit: dit script werkt bij mij goed. Toch bedankt voor onderstaande opmerking

Kevin - 08/11/2010 22:58
Crew Ajax/REST		Als je slideToggle() gaat gebruiken, wees dan zeker dat je jQuery v1.4.3 hebt (de laatste nieuwe), want deze functie is pas dan geimplementeerd geweest.

Woodmen - 08/11/2010 23:57 (laatste wijziging 08/11/2010 23:57)
Nieuw lid		Bovenstaand script is inderdaad veel eenvoudiger. Met de cookies komt het echter nog niet echt van de grond. Zou iemand mij op het juiste spoor kunnen zetten, of eventueel een suggestie kunnen geven hoe te beginnen? Alvast bedankt maar weer

WeedSide - 09/11/2010 08:16
Nieuw lid		http://www.dyna...nuheader=1 Zit alles al in verwerkt, weinig zin om je code door te spitten en iets te maken wat al bestaat. Greetz WeedSide

Aar - 09/11/2010 08:33
PHP interesse		Wisselvalig topic... Iemand komt met een ranzig script, iemand komt met een jQuery script die makkelijker in gebruik is, en nu komt er weer iemand aan met een non-jQuery script...

WeedSide - 09/11/2010 08:35
Nieuw lid		@Aar, ligt er maar aan waar je voorkeur naar uit gaat. Zoals ik al zei ik ga niet het wiel opnieuw uitvinden. Greetz WeedSide

Woodmen - 10/11/2010 08:45
Nieuw lid		Goedemorgen, Het is dus makkelijker een kant en klaar jguery script te zoeken i.p.v. deze aan te passen?

WeedSide - 10/11/2010 11:26
Nieuw lid		Ik zoek meestal met dit soort dingen inderdaad een al gemaakt script wat aan me eisen voldoet. Maar wil je een uitdaging kun je zelf een script proberen te maken cq aanpassen. Greetz WeedSide

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten