Effet dock mac os pour vos menus

Soyez le premier à donner votre avis sur cette source.

Vue 37 441 fois - Téléchargée 4 226 fois

Description

Plutot qu'un menu déroulant à la windows, je vous propose un barre de menu (un dock comme on dit dans le jargon) à la MacOS.
En gros l'effet est le suivant : quand on passe la souris sur les images, ces dernières grossissent plus ou moins en fonction de la position de la souris.
Compatible IE 5.5 et Mozilla/Netscape 7
Puissance recommendée : 1Ghz

Il y a 3 fichiers HTML car 3 méthodes différentes.
Une linéraire (la plus belle et plus simple).
Demo : http://www.coopmcs.com/demo/dock_macos/dock_lineaire.html

Une verticale (pour les menus verticaux).
Demo : http://www.coopmcs.com/demo/dock_macos/dock_verticale.html

Une sinuzoïdale (moins jolie à mon gout).
Demo : http://www.coopmcs.com/demo/dock_macos/dock_sinuzoide.html

Une qui n'agit que sur l'icon selectionné (un autre style).
Demo : http://www.coopmcs.com/demo/dock_macos/dock_icon.html

Source / Exemple :


Pour les codes HTML commentés : voir le ZIP
Je présente ici le code de la linéraire.

MIN = 33 ;  // largeur minimum en pixel
MAX = 115 ; // largeur maximum en pixel
REACTION = 1.2 ; // réaction des icons par rapport à la souris. plus grand --> plus d'icons qui réagissent

A = ((MIN-MAX)/(MAX * REACTION)) ; // coef directeur de la droite d'agrandissement
IE = document.all ? 1 : 0 ;
img_tags = new Array();

function ouestmasouris(e)
{
	var dock = document.getElementById('dock') ; // div qui contient la barre de menu.

	var x = 0;
	if (IE)	x = e.clientX ; // coordonnées x et y de la souris sur IE 5.5
	else	x = e.pageX ;  // coordonnées x de la souris sur Mozilla ou Netscape 7
		
	x -= dock.offsetLeft ; // on modifie la coordonnée pour quelle soit relatif au div et non à la fenetre.
	
	img_tags = dock.getElementsByTagName('img') ; // les images contenus dans le div

	for(i=0 ; i<img_tags.length ; i++) // pour chaque images
	{
		millieu = img_tags[i].offsetLeft + parseInt(img_tags[i].style.width)/2 ;
		delta = millieu - x ;

		if (delta < 0) delta *= -1 ;

		coef = A * delta + MAX ;

		if (coef < MIN) coef = MIN ;
		else if (coef > MAX) coef = MAX ;

		img_tags[i].style.width=coef;
		img_tags[i].style.height=coef;
	}	
}

Conclusion :


C'est mon premier post.
L'effet est plus sympa sur Mozilla car il gere mieux la transparence des PNG de mon exemple.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
296
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
28 janvier 2008

Pour info, la propriété "transform" de CSS3 permet de faire la même chose SANS une seule goutte de javascript

Et comme je disais en 2004, simuler des effets des OS sur un site web est horriblement kitch et rapidement démodé...
Messages postés
1
Date d'inscription
lundi 14 novembre 2005
Statut
Membre
Dernière intervention
5 octobre 2012

J'ai eu le même problème.

Mais j'ai trouvé, il faut mettre:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

et pense à modifier l'attribut de ta balise image dans le body:

style="width:33px;height:33px; border:0px;" align="top" alt="cequetuveux"

et apres c'est ok avec W3 + ca fonctionne!
Messages postés
13
Date d'inscription
mardi 1 décembre 2009
Statut
Membre
Dernière intervention
31 décembre 2010

Bonjour à tous, moi le code fonctionne très bien seulement des que je modifie le doctype et que je passe en strict 1.0 html cela ne fonctionne plus on a l'impression que le code javascript ne fonctionne plus. Quelqu'un aurait une solution svp pour rendre le code compatible en xhtml svp?
Messages postés
8
Date d'inscription
lundi 19 octobre 2009
Statut
Membre
Dernière intervention
19 août 2010

Suite à mon message du 16/06/2010 à 1:33:43,
J'edit un peu...
J'ai réussi à modifier mes images pour qu'elles aient la forme désiré, il fallait juste rendre compatible le code en XHTML et renommer les images (Erreur très bête...):

<!-- Déclaration du DIV contenant le menu -->
<!-- 'top' et 'left' peuvent etre modifié pour placer le menu ailleurs (10,10 est le haut à gauche) -->
<!-- 'fixed' fixe le menu (il ne suit pas la scrollbar) et peut etre modifié en 'absolute' (suit la scrollbar) -->

<!-- 'width' et 'height' sont à la taille minimum -->
[# ]
[# ]
[# ]
[# ]
[# ]
[# ]
[# ]
[# ]
[# ]

Néanmoins, j'ai essayé le bout de code proposé par SHADOW125 et pour moi il ne marche pas! :(
J'ai pourtant bien mis les balises:
<head>
<script language="javascript">
"MON CODE"
</script>
</head>

Il n'y a aucune animation...
Voici mon DOCTYPE:
<!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>
<title>Le titre de mon site</title>
<meta name="keywords" lang="fr" content="motcle1,mocle2" />
<meta name="description" content="Description de ma page web." />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="icon" type="image/png" href="/images/pipfavicon.png" />
<script language="javascript">
"mon code"
</script>
</head>

Merci d'avance pour votre aide,
Gloubi.
Messages postés
8
Date d'inscription
lundi 19 octobre 2009
Statut
Membre
Dernière intervention
19 août 2010

Bonjour à tous!

A L'AIDE!!!
Mes images ne se réduisent pas, et le défilement ne marche pas du tout, alors que dans la page de test tout marche NICKEL! Je ne comprends pas... De plus seulement la moitié des images s'affichent.
J'ai pourtant tout placé dans ma page .PHP comme c'était expliqué:
La Javascript dans mes balises <head></head>
et le reste dans .

Voici un screen du beug: http://s2.noelshack.com/uploads/images/14978474712729_beug.jpg
Si vous avez besoin de plus d'infos sur mon script, n'hésitez pas!
Merci d'avance de m'aider, j'ai un projet de site en cours.

Cordialement,
Gloubi.
Afficher les 38 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.