11548 sujets

JavaScript, DOM et API Web HTML5

Menu Javascript like Apple

Pages :
Slt à tous,

Eh oui, c'est encore moi, j'en aurai décidément jamais fini avec cette nouvelle version de rossfan ^^

En fait, cette fois-ci je me suis mis en tête, d'avoir le même menu que le new site d'Apple (visible ici), oui lol celui à gauche, je suis bien conscient qu'il ne s'agit ni plus ni moins d'un menu à tiroirs, faisable en css, hormis le petit effet de glissade...

J'ai donc commencé par piquer leurs codes (pas génial, hein ? lol) j'ai bistourisé un max, mon seul prob, est que je n'arrive pas à trouver les class (drawer sliders etc...) pour modifier à convenance. Je suis donc quasi-sûr que cela relève du JS, je suis donc venu ici, vous consulter...

L'adresse de ma page

Ciao...
Modifié par Bab (05 Jul 2009 - 10:07)
Administrateur
Bonjour,

merci de modifier ton titre pour qu'il ait une signification en rapport avec le contenu du sujet.

Felipe
Je vais essayer ça ce soir, et je te dis quoi, merci de m'orienter vers une piste solide ^^

Ciao... et @tte lol

Finallement g commencé à attaquer ^^ j'arrive meme pas à faire tourner :s l'exemple d'accordion lool

Exemple
Modifié par Bab (28 Jun 2007 - 12:20)
Slt Benj,

Je prends quoi alors ^^ le truc le plus simple et le plus performant, c'est lequel ??
Bab a écrit :

Finallement g commencé à attaquer ^^ j'arrive meme pas à faire tourner :s l'exemple d'accordion lool

je croi que c'est normal qu'il ne tourne pas Smiley biggol ta pas importé la librairie de mootools dans ton index Smiley sweatdrop
Bab a écrit :
Slt Benj,

Je prends quoi alors ^^ le truc le plus simple et le plus performant, c'est lequel ??

Ben c'est un peu pareil en fait... Mootools est un peu plus léger, mais à part ça, les deux s'équivalent.
Dsl, j'suis completement pommé, je comprends rien, j'ai rajouté 2 scripts, elle est pas dedans ??
Alalalala que choisir, ils ont tous l'air bien, m'enfin, je dois me restreindre au plu simple, sinon je saurai pas le faire :s suis limité en Java lool plus que limité même ^^

Vous me conseillez donc...
Modifié par Bab (28 Jun 2007 - 13:47)
... et juste histoire de t'embrouiller encore un peu plus, un dernier plugin pour jQuery de Jörn Zaefferer. Smiley ravi
Plus sérieusement, celui-ci est vraiment très bien de part son code très propre, une animation très élégante et différentes options de navigation (déploiement au clic, au survol, etc.).
Oki, oki, j'ai tt lool, les noms... mais je fais quoi, je vais ou ^^ je code quoi, je code ou loool
Modifié par Bab (28 Jun 2007 - 14:21)
Petit exemple simplifié avec bytefx:
[#black][b]Fichier index.html[/b][/#]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xml:lang="fr" lang="fr">



<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<title>Accordion</title>
	
	<script type="text/javascript" src="http://www.devpro.it/bytefx/bytefx.js"><!--// (C) bytefx //--></script>
	<script type="text/javascript" src="accordion.js"></script>
	
	<style media="screen" type="text/css">
	div {width:150px; padding:10px; border:1px solid #aaa;}
	h3 {background:lightsteelblue;}
	</style>
	
</head>



<body>


	<div class="first block">
		
		<h3 class="header" onclick="$('id1').begin()">Premier bloc</h3>
		
		<p id="id1" class="content">Lorem ipsum dolor.</p>
		
	</div>
	
	
	<div class="block">
		
		<h3 class="header" onclick="$('id2').begin()">Deuxième bloc</h3>
		
		<p id="id2" class="content">Ut enim ad minim veniam.</p>
		
	</div>
	
	
	<div class="block">
		
		<h3 class="header" onclick="$('id3').begin()">Troisème bloc</h3>
		
		<p id="id3" class="content">Duis aute irure dolor.</p>
		
	</div>



</body>

</html>




[#black][b]Fichier accordion.js[/b][/#]

function $(id){
			var	result = arguments.length === 1 ? document.getElementById(id) : 0;
			if(!result) {
				result = [];
				for(var i = 0, j = arguments.length; i < j; i++)
					result.push(document.getElementById(arguments[#red][ i][/#]));
			};
			return result;
		};
		function acc(el){
			function show(){
				this.style.display='';
				bytefx.size(this, {width:this.Width,height:this.Height}, 9);
			};
			function hide(){
				bytefx.size(this, {width:this.Width,height:1}, 9, function(){
					this.style.display = "none";
				});
			};
			function begin(){
				for(var j = 0; j < max; j++) {
					if(j !== i)
						el[j].hide();
				};
				this.show();
			};
			var	tmp, i = 0, max = el.length;
			for(; i < max; i++) {
				tmp = bytefx.$size(el[#red][ i][/#]);
				el[#red][ i][/#].Height = tmp.height;
				el[#red][ i][/#].Width = tmp.width;
				el[#red][ i][/#].show = show;
				el[#red][ i][/#].hide = hide;
				el[#red][ i][/#].begin = begin;
			};
			return {
				begin:function(idx){
					if(!idx || idx >= el.length)
						idx = 0;
					el[#blue][ idx ][/#].begin();
				}
			}
		};
		onload=function(){
			for(var	tmp = $('id1', 'id2', 'id3'), a = acc(tmp), i = 0; i < tmp.length; i++) {
				tmp[#red][ i][/#].style.display = "none";
				a = tmp[#red][ i][/#].parentNode.childNodes[0];
				if(!a.innerHTML)
					a = tmp[#red][ i][/#].parentNode.childNodes[1];
				bytefx.$event(a, "onmouseover", function(){
					this.style.background = "#009999";
				});
				bytefx.$event(a, "onmouseout", function(){
					this.style.background = "lightsteelblue";
				});
			};
			tmp[0].begin();
		}



edit:
* supprimer l'espace avant les i en rouge.
** supprimer les espaces avant et après idx des crochets en bleu.
Modifié par Benjamin D.C. (28 Jun 2007 - 14:38)
Y'a moyen d'éviter le petit décalage juste après la fermeture ??
Modifié par Bab (28 Jun 2007 - 14:53)
À priori, ça doit venir d'un problème pûrement visuel. Essaye de réinitialiser les marges et paddings, pour voir.
* {margin:0; padding:0}
Pages :
Sujet clos
Aller à