begin process at 2012 02 11 23:49:58
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU DÉROULANT ACCESSIBLE DOM/CSS

MENU DÉROULANT ACCESSIBLE DOM/CSS


 Information sur la source

Note :
9,75 / 10 - par 8 personnes
9,75 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Initié Date de création :08/03/2004 Date de mise à jour :14/03/2004 22:28:54 Vu / téléchargé :32 178 / 8 207
Auteur : Gudzu

Ecrire un message privé
Commentaire sur cette source (19)
Ajouter un commentaire et/ou une note

 Description

Ce menu déroulant est basé sur une structure de liste qui permet de le rendre accessible aux navigateurs texte, anciens navigateurs, etc.

Comme il est loin d'être le seul (voir le très bon "Iubito's menu"), voici ce qui le distingue :
- le script n'est pas paramétrable; l'ensemble de l'apparence du menu se définit dans une feuille de style CSS
- il accepte une profondeur illimitée de sous-menus
- il s'adapte au changement dynamique de feuille de style dans les navigateurs qui le supportent (Mozilla et Opera) ainsi qu'au changement de la taille des caractères
- il détecte automatiquement si le menu est horizontal ou vertical
- et tout ça dans un script plutôt léger (moins de 7k)

Testé avec succès dans IE5.0, 6.0, Safari, Mozilla et Opera 7.

Démo (en français maintenant): http://home.tele2.fr/ikari/menu/menu-deroulant-fr. html

Mise à jour: 14 mars 2004 (version 0.1b):
Correction de bugs qui survenaient dans Opera 7 et Win IE 5 & 6

Source

  • <html>
  • <head>
  • ...
  • <script type="text/javascript" src="./scripts/menuDropdown.js"></script>
  • <link rel="StyleSheet" type="text/css" href="./style/menuH.css" title="Horizontal" />
  • <link rel="Alternate StyleSheet" type="text/css" href="./style/menuV.css" title="Vertical" />
  • </head>
  • <body>
  • <div id="mainMenu1">
  • <ul id="menuList1">
  • <li><a href="#">Single element</a></li>
  • <li>
  • <a class="actuator" href="#">Submenu</a>
  • <ul class="menu">
  • <li><a href="#">Single element</a></li>
  • <li>
  • <a class="actuator" href="#">Nested submenu</a>
  • <ul class="menu">
  • ...
  • </ul>
  • </li>
  • </ul>
  • </li>
  • </ul>
  • </div>
  • ...
  • </body>
  • </html>
<html>
<head>
...
<script type="text/javascript" src="./scripts/menuDropdown.js"></script>
<link rel="StyleSheet" type="text/css" href="./style/menuH.css" title="Horizontal" />
<link rel="Alternate StyleSheet" type="text/css" href="./style/menuV.css" title="Vertical" />
</head>
<body>
<div id="mainMenu1">
  <ul id="menuList1">
    <li><a href="#">Single element</a></li>
    <li>
      <a class="actuator" href="#">Submenu</a>
      <ul class="menu">
        <li><a href="#">Single element</a></li>
        <li>
          <a class="actuator" href="#">Nested submenu</a>
          <ul class="menu">
            ...
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
...
</body>
</html>

 Conclusion

Le script est encore en test pour l'instant, même s'il devrait bien marcher.

Tous les commentaires sont les bienvenus :-)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking
Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de iubito le 10/03/2004 18:34:09

joli :)
ça me fait penser au menu de udm4 mais avec un code javascript plus clair ^^

Commentaire de chimelpremier le 12/03/2004 02:31:11

Même genre que celui que je viends de poster. Joli et paramétrable, c'est l'avenir !

Commentaire de chimelpremier le 12/03/2004 02:57:00

Comment ça marche sans les ponctuations pour les synthétiseurs vocaux?
Il manque un temporisation sur le mouseout pour éviter le clignotement sur Gecko.
Une version en français serait le must !

Commentaire de Gudzu le 12/03/2004 22:03:24

Merci pour les feedbacks ^^

Pas de problème, je publie une version française ce we et je mets en ligne une nouvelle version légèrement modifiée pour corriger un bug de Win/IE5 et 6 et Opera 7. En fait, j'avais écrit le texte initialement en français avant de le traduire en anglais pour le mec dont j'ai utilisé le code.

@chimelpremier : je vais regarder ton taf.

Concernant le clignotement... Sous quel browser cela se produit-il ? J'utilise Firefox et ça passe bien.

Pour les navigateurs vocaux... J'avais fait un test il y a trois ans (ça date !) et à l'époque ils ne s'arrêtaient effectivement qu'aux ponctuations, après avoir viré toutes les balises. Or c'est une erreur : si je mets p.ex :

&lt;p&gt;paragraphe 1&lt;/p&gt;
&lt;p&gt;paragraphe 2&lt;/p&gt;

Le balise sémantique indique clairement qu'il y a deux paragraphes, donc que le navigateur vocal doit marquer un temps d'arrêt entre les deux, même s'il n'y a pas de ponctuation. Mais j'imagine que ce comportement ne serait pas compatible avec toutes les pages Web... Au fait, c'est bien de ça dont tu parlais ? :)

Commentaire de chimelpremier le 18/03/2004 01:56:13

Être averti par mail ?Je l'ai peut-être effacé par mégarde!
C'est avec Netcape 7 et Mozilla 1 que le menu clignote.
OK pour le navigateur vocal. Je n'en connaissais que la version de Openweb. Je n'ai pas fait de test.
Merci pour la réponse

Commentaire de chimelpremier le 18/03/2004 23:44:05

J'ai jeté un coup d'oeil à votre code. Je l'ai trouvé sophistiqué. Pas autant que celui de http://www.udm4.com/ mais plus rapide. Beau travail, la reconstitution des cadres entourant chaque sous-menu, le dimentionnement automatique et la détection automatique horizontal/vertical, c'est bien trouvé. Que ça sautille un peu dans NS7, c'est peut-être pas génant, vu qu'il ne doit pas être trés répandu (NS7). Manque plus qu'une petite tamporisation et une simplification. Je ne maitrise pas assez pour vous aider, mais pense qu'il est possible de remplacer les class="actuator" dans les liens ouvrants un sous-menu par une commande javascript, comme je l'ai fait.
Dans tout les cas bravo, continuez.

Commentaire de Gudzu le 22/03/2004 11:56:14

Merci pour ces encouragements !

Je pensais que la temporisation était superflue, mais à lire vos commentaires, je vais devoir y travailler. La génération de la classe "actuator" dans le script est une bonne idée, je testerai.

Pour l'instant, ma préoccupation concerne MacIE5 qui a un rendu inacceptable. Je n'ai pas de Mac sous la main, ce qui m'empêche de travailler dessus. Il y a aussi un petit bug dans Safari (1.1, je crois) avec le menu horizontal.

Le script est donc toujours en phase de test.

Commentaire de chimelpremier le 23/03/2004 03:12:56

Un autre script dans le mème genre, avec temporisation. Super concis.
Ben Boyle ne semble pas non plus avoir trouvé la solution du style universel.
Joli le suivi du lien survolé.

http://inspire.server101.com/js/mb

Commentaire de MultiActive le 17/06/2004 10:05:12

Salut,

as tu trouvé une solution à MacIE5? Sinon sous Safari c nickel chez moa :)

Commentaire de leboc le 29/08/2004 21:26:51

ca fait 1 mois que j'ai commencé un site en partant de zéro (au niveau script, html, etc)

j'ai essayé ce menu qui me paraît le meilleur
je n'ai pas de problème pour paramétrer les différents niveaux.

Le problème que j'ai est que je voudrais que ce menu soit au 1er plan même lorsque j'accède au dernier niveau car comme j'ai créé des cadres dont un pour le menu, celui n'est visible que jusqu'à la bordure de cadre

comment faire pour qu'il passe outre le cadre fixé?

soyé indulgent pour ma question de nOOb

Commentaire de ranouf le 29/04/2005 17:10:43

Ta source est excellente je viens de l'adapter pour mon menu en ASP, rien à redire ! merci

Ha si g un pb, comment éviter d'avoir toujours cet écart entre le bas du menu et la suite de la page ?

Encore merci et bonne continuation

Commentaire de rem78 le 25/05/2005 11:03:15

Bonjour,
Je voudrais savoir comment faire pour enlever le background des images flèches, car j'ai mis avec photoshop un background transparent sur ces images, mais visiblement on vois tjrs un background blanc des images des flèches le menu dans un navigateur.
Comment peut-on changer la police du menu et comment changer sa couleur ?
J'ai aussi un petit problème concernant le fonctionnement sous Netscap 7.0.1,
quand on parcour le menu, celui-ci clignote, est-ce un Bug ??

Merci
@++

Commentaire de spardo le 26/05/2005 14:42:07

Bonjour,

Je trouve ce menu déroulant très pratique et facile à mettre en place.
Mais je voudrais y ajouter un timer pour empêcher que les sous-menus ne se ferment tout de suite lors du onmouseout. Est-ce que quelqu'un a une idée??

Merci d'avance!

Commentaire de metis15 le 13/06/2005 21:09:58

Bonsoir,
je le trouve aussi sympa ce menu, mais il me pose un problème :

Le onload de préchargement du body l'empêche de fonctionner !!!
Si je vire le onload, ça marche, sinon les sous-sous-menus ne marchent pas !
Comment faire ?

Commentaire de james 33 le 23/06/2005 16:51:13

Bonjour,
Malgrès mon grand age (je fais de l'informatique depuis 1966 ... et du web depuis 1995), j'ai trouvé avec cet essemble de script et css ce que je cherchais.
Bien sûr, il faut mettre ses pattes dans le camboui pour changer les ombres, les fonds, les couleurs de texte (normal et hover). Et puis aussi rajouter ses propres onmouseover, onmouseout avec ecriture en textarea et affichage d'image (qui ne marche qu'en IE d'ailleurs ...).
Merci, cela m'a permis de présenter de façon concise le contenu hétéroclite de mon site web qui est  ... très rempli.

Commentaire de patou06 le 25/01/2006 15:45:50

Tout simplement ingénieux,
j'adore la possibilité de naviguer avec la touche tab, le tout bien structuré
Bravo

Commentaire de Titi035 le 26/10/2006 02:07:00

Problème avec ce menu : lorsqu'on a une appli flash sur la page, le menu n'est pas au premier plan.. Il est derrière l'appli flash.
Y a t il une methode pour que le menu soit devant ?

bye

Commentaire de tonchebe le 10/07/2007 12:13:28

j'ai un soucis, pour que les boxe des sous menu tombe en bas de barre principale horizontal
j'ai éssayer avec un margin-top mais le rollover fait sauter le menu

merci d'avance

Commentaire de lowlow75 le 29/03/2008 18:38:34

Bonjour,

excellent script mais je rencontre un soucis assez bizarre, je m'explique :

Si j'ai un div juste en dessous du menu et que celui-ci a comme attribut CSS "Overflow:hidden", le sous-menu passe en dessous de ce Div.
Pourtant le z-index est à "1" et mon div est par défaut en "0".

Si quelqu'un avait la solution ça me ferait gagner bien du temps.

Merci par avance.

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Renewable Energy is Within Reach
Photo Happy Bright Spring Day Outside 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,530 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)