CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2008 10 10 22:08:32

SHAREPOINT : NOUVEL ARTICLE SUR LA MISE EN PLACE DES SCOPE DANS MOSS SEARCH par ROMELARD Fabrice

HELLO CS par julz

MSDN/TECHNET/MICROSOFT DAYS TOUR 2008 à LILLE LES 13 ET 14 OCTOBRE ! par redo

MVC PRATIQUE #07 - UN PROJET CONCRET ET LE TRANSFERT DES OBJETS AVEC LES MODELBINDERS par Rui

SQL SERVER 2008 : CERTIFIé - TS ADMIN (70-432) par christian

RE : OUVERTURE D'UNE PAGE WEB EN 1024*768 par nimu

PROBLèME MENU DéROULANT AVEC FIREFOX par franckdu34

ICOMPATIBILITé ENTRE 2 SCRIPTS... par xeroxiss

RE : ELIMINER UN DIV ??? par kazma

RE : ELIMINER UN DIV ??? par bultez

+ de logiciels à télécharger

1 259 537 membres
429 nouveaux aujourd'hui
14 408 membres club

Trouver une ressource

Trouvez une ressource parmi 38 820 codes, 1 185 547 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MENU DÉROULANT ACCESSIBLE DOM/CSS

Information sur la source

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é: 24 782 / 7 473

Auteur : Gudzu

Ecrire un message privé

Note :

9,75 / 10

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

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Dropdown menu
- scripts
  - changelog.txt 926 octets
  - menuDropdown.js 6 740 octets
- style
  - images
    - fleche-bas-grise.jpg 669 octets
    - fleche-bas-noire.jpg 667 octets
    - fleche-grise.jpg 668 octets
    - fleche-noire.jpg 668 octets
  - full-page.css 384 octets
  - menuH.css 3 533 octets
  - menuV.css 2 238 octets
  - page.css 463 octets
- dropdown-menu-en.html 14 622 octets
- menu-deroulant-fr.html 8 937 octets

Télécharger le zip

Sources de la même categorie

MENU DEROULANT SPÉCIAL par neacko_80

MENU EN CASCADE par kazma

UN MENU DE NAVIGATION LATÉRAL ESCAMOTABLE par mehdikobra

MENU GLISSANT par kazma

GENERATEUR D ARBRE par Kimjoa

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 :

<p>paragraphe 1</p>
<p>paragraphe 2</p>

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.