begin process at 2012 02 05 02:48:39
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

WebDesign

 > CASCADING MENU CSS

CASCADING MENU CSS


 Information sur la source

Note :
10 / 10 - par 4 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :WebDesign Classé sous :menu css, menu cascade, menu horizontal Niveau :Initié Date de création :15/03/2009 Date de mise à jour :08/03/2010 22:15:05 Vu / téléchargé :13 618 / 1 929

Auteur : labotemplates

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

 Description

Et un menu cascadé en CSS, encore un ! Hop...
En fait j'ai eu un mal de chien à trouver une version à la fois accessible, simple et portable sur tout OS et navigateur. Donc je me la suis faite !
Ok, j'ai pas du chercher certains vont dire, mais c'est pas grave. Lâchez-vous mes amis !...


 Conclusion

Merci de partager vos modifications/optimisations.

 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


 Historique

16 mars 2009 12:21:39 :
En application sur http://www.labotemplates.com/
16 mars 2009 12:24:56 :
En application sur http://www.labotemplates.com/
16 mars 2009 12:26:28 :
capture modifiée (visualisation dans contexte réel)
08 mars 2010 17:47:52 :
- modification de la css - passage en sprite pour les images - fourniture d'un script qui construit le menu à partir de données XML Plus facile à implémenter dans le cadre d'un site dynamique. Attention : lire le fichier USE dans le zip.
08 mars 2010 22:15:05 :
Correction bug IE sur layout des item de seconf niveau

 Sources du même auteur

Source avec Zip CUSTOMISATION DE BUTTON TAGS AUTOMATIQUE
Source avec Zip MENU "DÉROULANT" CSS COMPATIBLE

 Sources de la même categorie

Source avec une capture MAQUETTE WEB 002 ( EN PSD) par yacdj
Source avec une capture MAQUETTE WEB 001 par yacdj
Source avec Zip DECOUPE MARS par sliper69
Source avec Zip MENU DÉROULAN par sliper69
Source avec Zip CUSTOMISATION DE BUTTON TAGS AUTOMATIQUE par labotemplates

Commentaires et avis

Commentaire de metis15 le 16/03/2009 14:06:58 10/10

Nickel, même avec IE6, bravo !!

Commentaire de dadoo1 le 16/03/2009 16:18:33

pas mal du tout

Commentaire de edr le 19/03/2009 09:52:41

vraiment très bien

code propre et commenté !

la css aurait pu être optimisée et allégée, mais ce menu est top !

quel est le principe de csshover.htc ?


à publier peut-être aussi dans http://www.javascriptfr.com/

ENjOY,

++DigitalCoder

Commentaire de labotemplates le 19/03/2009 10:06:30

bonjour et merci pour ces gentils commentaires :)
Donc alors : le .htc (nan nan, c'est pas un smartphone) sert à palier un manque sur l'API d'IE6 qui ne sait pas gérer les pseudo class de type :hover, :focus, etc. sur certains éléments du DOM. Pour le cas présent, il s'agissait de pouvoir utiliser :hover sur des LI et DD. Voilà voilà.
Pour l'optimisation de la CSS, je pense que cette question vient du fait que j'ai découpé les notions de "background". C'est effectivement un peu plus long mais beaucoup plus fin en gestion. Et comme je ne suis pas la moitié d'un fainéant, j'ai adopté une structure HTML de type UL/LI > DL/DD > UL/LI. L'idée est de "casser" les héritages de class sur les UL et LI. Je ne sais pas si je suis bien clair sur ce coup là... :)
Je prends toute optimisation bien entendu, share your mind !

Commentaire de gr43 le 24/03/2009 13:41:01

Salut, l'esthétique est super sympa. Au niveau du code html et css il est sans doute possible de le réduire légèrement. IE6 ne gère pas les pseudo class de type :hover sauf pour les balises anchor, ce qui peut permettre d'éviter csshover.htc qui me semble-t-il n'est rien d'autre que du javascript.

Commentaire de edr le 24/03/2009 13:56:59

oui notamment les raccourcis css
cf >>
http://www.websiteoptimization.com/speed/tweak/shorthand/
http://www.websiteoptimization.com/speed/tweak/hex/
http://www.websiteoptimization.com/speed/tweak/css-optimization/

Commentaire de ninobeo le 30/03/2009 10:02:42

Salut, ce menu a l'air très sympa; mais je ne sais pas comment l'ouvrir? je ne suis pas du tout programmeur.
J'ai bien tenté de l'ouvrir via kompozer mais sans succès.

help!

Commentaire de labotemplates le 30/03/2009 12:00:18

Bonjour,
Je n'ai pas utilisé d'éditeur wysiwyg. Avec Pspad ou Notepad++ ça marche !

Commentaire de labotemplates le 27/04/2009 14:06:16

@gr43
Bonjour,
Effectivement IE6 gère les pseudo class de type hover mais pas sur les listes à puces, ce que le htc permet d'ajouter (et pas que sur les listes, TR, TD, etc. sont aussi concernés ce qui évite les lourds onmouseover/out sur des lignes par exeemple). En l'occurrence, la structure du menu ne permet pas de s'appuyer sur les balises <A> pour gérer l'affichage et le masquage des sous menus.
Je vais tenter d'ailleur d'ajouter la prise en charge du focus sur les éléments de sorte que le menu reste utilisable sans souris.

Commentaire de us_30 le 21/05/2009 18:27:21 10/10

Beau code, en tout cas... bravo.

Amicalement,
Us.

Commentaire de quentino2 le 29/07/2009 16:06:44

Salut labotemplates,
Merci pour ton menu, je l'utilise aujourd'hui c'est top.
Je bidouille du code html/css/js selon mes besoins mais je ne suis pas expert.

Je renontre un soucis sur ton menu, lorsqu'il y a beaucoup de menu de niveau 1 et que la fenêtre du navigateur est trop petite, les boutons se mettent à se chevaucher. Il faudrait trouver un moyen de les fixer, ce qui demanderait donc de scroller vers la droite pour voir tout les menus, mais ça serait plus propre.

Peux tu résoudre ce problème ?
Je te remercie,
Q

Commentaire de manu7772 le 09/08/2009 17:18:18 10/10

Superbe ! Je vais essayer de faire un utilitaire pratique en PHP pour créer les menus automatiquement à partir  d'un simple tableau ou fichier texte... à suivre.

Commentaire de labotemplates le 07/09/2009 14:44:22

@manu7772

Hello hello. Si ça t'intéresse la source qui le construit existe déjà. Pour ma part, je suis parti d'un xml tout bêta. Mail moi sur le site et on se contacte. Cdlt, LBT

Commentaire de erick123456 le 09/09/2009 09:15:31

tout simplement bravo

Commentaire de tuno le 20/11/2009 15:09:06 10/10

Très beau travail, je m'en inspire pour un site en cours de développement. S'il fonctionne à merveille sous Mozilla, IE8 n'en veut pas :-(
Rencontrez-vous ce problème ou est-ce moi qui ai zappé quelque chose ?

Commentaire de labotemplates le 20/11/2009 15:34:01

à Tuno.
Vive IE8 donc... je l'ai implémenté dans mon site de tests, il semble fonctionner avec l'ajout de la balise meta suivante :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

J'avoue, il faudrait le rendre compatible sans ça...

Commentaire de tuno le 20/11/2009 16:24:32

Ca ne marche pas mieux :-(
Je fais des recherches de mon côté aussi...

Commentaire de labotemplates le 03/12/2009 07:46:46

Donc, pour info, il s'agissait de la définition du DOCTYPE... C'est pointilleux ces petites choses :)

Commentaire de lexussPro le 14/12/2009 01:19:11

merci

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

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,842 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales