Iubito's menu v3.1 : quasiment en css, compatible ie/ns6+/moz/opera/konqueror/safari... navigateurs texte/braille, synthèse

Télécharger le projet
Commenter

Description

IMPORTANT: consultez la version sur http://iubito.free.fr/prog/menu.php ! Il se peut que parfois elle soit un peu plus récente que celle dispo sur les différents sites de téléchargement. Je fais tout mon possible pour synchroniser tout ça, mais parfois j'oublie :-p

Mon site est encore en plein chantier que tout le monde me demande comment j'ai fait mon menu... alors voilà quoi ;-)

Iubito's menu :
- design entièrement en CSS, avec un peu de javascript pour compléter
- compatible avec les navigateurs modernes, texte (Lynx), plage tactile braille pour déficients visuels, navigable au clavier (touche tab)...
- google peut facilement explorer et référencer votre site contrairement à certaines moulinettes tordues uniquement en JS... (les moteurs ignorent les codes javascript) !
- peut rester scotché en haut de page, ou scroller en même temps que la page (donc toujours visible en haut de l'écran).
- peut être horizontal ou vertical, centré ou positionné "manuellement".
- les éléments peuvent avoir des largeurs variables (configurables) !
- ...

D'après le script dispo sur www.openweb.eu.org, mais grandement amélioré par Sylvain Machefert
Pour voir le menu en action, direction mon site perso --> http://iubito.free.fr ;-)

Testé avec succès sur :
- Internet Explorer 5.0 Windows 2000
- Internet Explorer 6 Windows 98/2000/XP
- Netscape 7 Windows
- Mozilla 1.5 Windows 2000/XP
- Opéra 7.11 et 7.23 Windows
- Lynx (hé oui!) Windows
- Konqueror Linux (Knoppix)
- Mozilla Linux (Knoppix)
- Internet Explorer 5 Mac
- Safari 1.0 MacOS X 10.2.8
- Safari 1.1 MacOS X 10.3
- Mozilla 1.6 Mac
- Camino MacOS X
- Firebird MacOS X
- OmniWeb MacOS X
(ça fait un bon paquet, non?)
Ne fonctionne pas avec Netscape 4.
Je cherche un testeur sous IE5.5 pour voir comment il se comporte...

Remerciements :
- Pierre-Henri, Franck, Gabriel, Wilfried pour leurs tests sur IE5 mac.
- David, Franck, Christine et pleins d'autres pour leurs tests sur d'autres navigateurs ;
- Fabrice pour sa fonction pour cacher les <select> dans IE.
- Troumad pour son rôle de détective anti-bug en XHTML strict :-D
- Stol pour avoir corrigé une erreur
- Pascal pour son menu avec des images (pro.htm) que j'ai adapté.
- ...et ceux que j'ai pu oublier :-p

Limitations du script :
- un seul menu par page, en faire 2 c'est possible en faisant une copie du css et du js et en renommant tout dans le html, css et js.
- il ne peut pas y avoir de sous-menus dans les sous-menus. Mais à côté des gros
avantage qu'il possède, ce n'est rien.
Et en même temps il faut savoir qu'un menu ce n'est pas un plan du site : inutile de vouloir tout faire rentrer dedans ! Un menu trop chargé est mauvais pour la page. Donc ça vous force à simplifier et structurer votre site... ce n'est pas un mal :)

DANS LE ZIP :
des démos, notamment un Look à la XP bien foutu (je pense :-p) avec des explications pour ce look + démos de look différents + une démo d'un ERP réalisé par Christophe Liacopoulos de www.sokhar.com.

Source / Exemple : 


Comment construire le menu ?
----------------------------
Dans la section <head></head>, il faut mettre


    	
  •  <script language="javascript" src="menu.js"></script>

    • 	
  •  <link rel="stylesheet" type="text/css" href="menu.css">

Juste après le <body>, placez le code suivant...

Regardez cet exemple (utilisé sur mon site perso - http://iubito.free.fr)

<!-- éviter le clignotement désagréable -->
<div id="conteneurmenu">
<script language="Javascript" type="text/javascript">
preChargement();
</script>
	<p id="menu1" class="menu"
			onmouseover="MontrerMenu('ssmenu1');"
			onmouseout="CacherDelai();">
	<a href="http://iubito.free.fr"
			onfocus="MontrerMenu('ssmenu1');">iubito.free.fr<span> :</span></a>
	</p>
	<ul id="ssmenu1" class="ssmenu"
			onmouseover="AnnulerCacher();"
			onmouseout="CacherDelai();"
			onfocus="AnnulerCacher();"
			onblur="CacherDelai();">
		<li>
			<a href="/">Accueil<span> ;</span></a>
		</li>
		<li>
			<a href="/livre/">Livre d'Or<span> ;</span></a>
		</li>
		<li>
			<a href="/annu/">Annuaire<span> ;</span></a>
		</li>
		<li>
			<a href="javascript:addFav();">Ajouter aux favoris<span>.</span></a>
		</li>
	</ul>
	
	... idem avec menu2 et ssmenu2 ...
</div>
<script language="Javascript" type="text/javascript">
//Ici on peut modifier quelques options
//c'est ce que j'ai fait dans mes démos, l'option vertical, centré, ou le nombre de menu
//je l'ai changé ici. Le menu.js est le même pour mes 7 fichiers démos ;)

//et on appelle le chargement du menu
Chargement();
</script>

Explications :


    	
  •  un <div id="conteneurmenu"> encadre tout le menu. Le style="float:left;" sert à

	  placer le menu à gauche (une colonne) du site si toutefois le javascript est
	  désactivé. C'est pas toujours génial mais c'est mieux que rien. Les liens sont
	  présents ! (voilà encore un aspect de la comptabilité...).


    	
  •  un <p> fait un menu, chaque menu doit être nommé menu1, menu2...

    • 	
  •  le sous-menu est fait par un <ul></ul>, chaque sous-menu doit être nommé ssmenu1,

	  ssmenu2...


    	
  •  chaque <li></li> constitue un item du sous-menu.

Dans le <p> et dans les <li> on met :


    	
  •  <a href="le lien ou le javascript">Texte</a>

    • 	
  •  avant le </a> on ajoute un <span> ;</span>. Ceci sert juste aux synthèses

	  vocales pour aveugles. Le point-virgule leur fait "prendre une pause pour respirer"
	  ce qui facilite "l'écoute" du menu.
	  Le span sera caché dans la feuille de style, pas de panique !

Donc ainsi vous constituez votre menu. Remarquez que la syntaxe étant du html pur et simple, il est très facile d'utiliser un langage serveur (ASP, PHP, JSP...) pour construire le menu :-)

Comment configurer le menu ?
----------------------------
Voir le fichier menu.js.
Comme je l'ai dit plus haut, on peut aussi modifier les variables de config juste avant le "Chargement();" à la fin du menu.

Comment modifier l'affichage ?
------------------------------
Des explications détaillées sont dans le fichier menu.css, mais pour résumer, voici ce qu'il y a à modifier : 

	- couleurs, police, bordure et largeur des menu et ssmenu.
	- l'effet spécial IE pour les ssmenu 
	- police et couleurs des liens "non survolés" et "survolés".

Sans CSS, ça sera une liste <ul> avec des <li>... ===> Lynx ou synthèse vocale.
Sans javascript, on aura une bande verticale à gauche
Avec JS et CSS, on aura le menu complet ;-)

Conclusion :


Tout est dans le zip avec les mêmes commentaires ;-)

Pour générer automatiquement le menu à partir d'une base Access en ASP.Net C#, c'est par là : http://www.aspfr.com/code.aspx?ID=20367

Bonne prog & HaVe FuN !

TODO :
- tester avec IE5.5

MAJ 25/5/2004: le menu est repositionné (au moins avec certains navigateurs :-p) quand on change la taille de la fenêtre (quelle idée :D). Donc fini les pb de menu centré qui n'est plus centré ! Oufffff !

MAJ 29/4/2004: on ajoute juste une démo de transparence bien foutue, qui marche sur IE et Mozilla! et une démo où la couleur change à chaque menu.

MAJ 25/3/2004: là non plus rien ne change dans le code, c'est juste une démo supplémentaire suite à une demande, le menu est fait en images :)

MAJ 18/3/2004: rien ne change dans le code, j'ajoute juste une petite démo pour faire une barre de boutons toute simple sans menus déroulants :)

MAJ v3.01 :
- y'a juste une ligne qui a changé. Dans le menu.js, remplacez var IEver = parseFloat(....) par var IEver = parseInt(....)
Et c'est tout! ça permet à IE5 de faire un truc pour lui éviter de trop souffrir :-p

!!! JE CHERCHE UN POSSESSEUR D'IE 5.5 !!!

MAJ v3 :
- ça marche avec IE5 sur mac !!! (j'en ai tellement ch**...)... déjà rien que ça :)
- marche aussi (un petit bidouillage) pour IE5.0
- la structure est "fixée" et ne devrait plus trop bouger... (voir le début du menu)
- les <select> sont cachés quand le menu se déroule (IE).
- une démo avec une bannière au-dessus du menu (on me l'a tellement demandé :-p)

MAJ v2.05
- NE CLIGNOTE PLUS !!! :)
Avant le menu s'affichait à gauche le temps du chargement puis se positionnait en haut. Maintenant il est masqué pendant le chargement (lorsque javascript est activé).
- centrage :)
- peut être disposé verticalement :)
- correction d'un bug sur IE5 win98.

--------------------------
MAJ v1.1

- un peu mieux commenté
- le script est également dispo sur mon site web http://iubito.free.fr/prog/menu.php
- 1 ou 2 variables supplémentaires dans le .js
- correction d'un bug lorsque le JS est désactivé (j'ai testé avec le js désactivé sur Opéra, IE et Moz')
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (cs_iubito)