begin process at 2010 03 21 17:38:51
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Menu & Co

 > [MEC] MENUS EN CSS

[MEC] MENUS EN CSS


 Information sur la source

Note :
6 / 10 - par 1 personne
6,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Classé sous :menu, menus, css Niveau :Débutant Date de création :01/12/2008 Date de mise à jour :02/12/2008 12:16:56 Vu / téléchargé :7 945 / 1 291

Auteur : Bul3

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

 Description

Cliquez pour voir la capture en taille normale
uniquement en Html+Css,
sans une ligne de javascript.
Déroulant Horizontal,Déroulant Vertical,
Accordéon,Escamotable,Défilant Vertical



 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

02 décembre 2008 12:16:57 :
quelques menus détails ;o)

 Sources du même auteur

Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE
Source avec Zip Source avec une capture [PC] PRÉFÉRENCES : CLASSEMENT
Source avec Zip Source avec une capture ENIGMES, CASSE-TÊTES À RÉSOUDRE

 Sources de la même categorie

Source avec Zip Source avec une capture MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma
Source avec Zip Source avec une capture MENU VERTICALE EN TRANSPARENCE par dlvains
Source avec Zip Source avec une capture MENU DÉROULANT EN IMAGES par dlvains
Source avec Zip TBFRAME: TAB BROWSING FRAME par triumphs
Source avec Zip Source avec une capture MENU PRINCIPAL par ali1987

 Sources en rapport avec celle ci

SQUELETTE DE PAGE EN DEUX COLONNES par Massedil
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12
Source avec Zip Source avec une capture MENU VERTICAL D'UNE PAGE DHTML, GENERE DYNAMIQUEMENT, UTILIS... par LUDINSKI
Source avec Zip Source avec une capture MENU DÉROULANT (JE SAIS.... ENCORE...) EN JAVASCRIPT & CSS. par inami
Source avec Zip Source avec une capture IUBITO'S MENU V3.1 : QUASIMENT EN CSS, COMPATIBLE IE/NS6+/MO... par iubito

Commentaires et avis

Commentaire de Arto_8000 le 01/12/2008 18:17:30

Désolé, mais je ne peux pas m'empêcher de dire que j'ai posté une source très très similaire qui a été discuté de long et en large il y a exactement 1 mois. Le code est même encore dans la liste des plus récents ...

http://www.javascriptfr.com/codes/MENU-DYNAMIQUE-CSS-100_48352.aspx

Le principe du script est exactement le même. Tout ce que tu rajoutes c'est des variantes.

Commentaire de Arto_8000 le 02/12/2008 01:10:04

D'ailleurs, pourquoi est-ce que tu utilises un nom similaire à bultez avec le même avatar ?

Commentaire de Bul3 le 02/12/2008 08:37:52

ta source "très très similaire" n'a rien
à voir, mais rien à voir du tout ! relis.
tu insinuerais que je t'ai copié ?
toi, c'est probablement ce que tu as du faire,
pour soupçonner les autres de l'avoir fait !
moi, c'est comme pour Bultez, oui, oui,
j'ai copié, usurpé... pour avoir la gloire
et obtenir des points sur CodesSources.

Commentaire de lakichemole le 02/12/2008 10:33:56 6/10

Si c'est similaire , c'est un menu en CSS :) après arto na rien inventé non plus il n'y a pas 36 façons de faire un menu en CSS, donc c'est normale de retrouver...des pages html ...avec des span..; des div...et un fichier css qui fait du CSS sur ces div span et autres...
Mais ma conclusion sera la même un tel me nu est inutilisable (a mon gout) pour un site grand public (donc cross browser) car incompatible IE6.
Sinon le code est bien structuré claire.
Je met la moyenne :)

Commentaire de Bul3 le 02/12/2008 10:55:24


@lakichemole :
>>il n'y a pas 36 façons de faire un menu en CSS
lakichemole++
je voulais simplement regrouper différents
menus et de légères variantes au même endroit
quand au "similaire" : si tu veux, mais dans
ce cas tous les css/js/html... sont pareils.

>>incompatible IE6.
certes. mais là, il faut du javascript,
et j'avais déjà fait :
http://www.javascriptfr.com/codes/menu-multi-niveaux-horizontal-vertical_36506.aspx

>>Je met la moyenne
c'est gentil pour un truc qui a été honteusement pompé ;o))

Commentaire de Arto_8000 le 03/12/2008 01:43:42

Tu en diras ce que tu voudras, mais faire une menu avec juste du CSS repose sur le même et unique principe : l'utilisation de la pseudo-classe hover pour faire apparaître ou disparaître une partie des éléments qui sont contenus dans un autre.

Je ne prétend pas que tu as copié l'idée, tout ce que je dis c'est qu'elle est déjà présente sur le site et que si tu aurais chercher quelques instants tu aurais vu par toi-même que cette source était déjà là. Je ne prétend pas non plus que j'ai inventé cette idée, j'ai simplement été celui qui l'a amené sur le site.

lakichemole -> IE 6 commence à être quelque chose du passé et si on devait vraiment en tenir compte pour tous les développements que l'on veut faire, c'est un sacré boulets que l'on traine surtout au niveau du css.

Commentaire de lakichemole le 03/12/2008 16:00:25

http://www.w3schools.com/browsers/browsers_stats.asp
http://bibiserv.techfak.uni-bielefeld.de/statistics/nov_2008_browser.html
Personne na dis que IE6 ne respectais pas les standard :)
Mais quand un commercial te dis qu'il veut pas perdre 15/20% de part de marché ba la norme c'est que ça marche avec tout le monde pas la norme d'un mec en blouse blanche :)

Commentaire de XtremDuke le 03/12/2008 19:23:34

Aller, je vais aussi mettre mon grain de sel :)

Il est vrai qu'il y a déjà eu une source du même genre. D'un autre côté il n'y a pas de mal d'avoir plusieurs exemples sur le sujet.

Maintenant, quel est le but d'une telle source ? Montrer simplement qu'il existe le sélecteur CSS qui agit comme un "mouseover" (enfin presque). Je ne penses pas qu'il soit nécessaire de faire tout un pavé pour ça.

Enfin bref, les personnes ne connaissant pas le principe seront heureux de fouiner dans cette source (enfin je penses).

Seul (gros) bémol qui fait vraiment tache dedans : la balises <marquee> ?! A moins qu'il y ait un jeu caché : trouvez l'intrus !

Commentaire de mickaelpfr le 03/12/2008 20:32:09

allez on va clôturer le sujet ici ;)
bonne soirée a tous et merci au modérateur pour leur réponse :) ( comme quoi il n'y a pas que sur developpez qu'ils sont actifs ()-:)

Commentaire de Bul3 le 06/12/2008 14:34:40


@WXtremDuke : tout le monde sait, moi en 1er,
que tu es un codeur très très très compétent,
inutile de vouloir le prouver !
mais "nous", communs des mortels, on sue
sang et eau pour faire ce genre de choses
je n'ai pas mis ça pour des gens de ton niveau, mais
pour ceux qui sont du mien : faible

quand à la balise <marquee>, certes le "je ne sais quoi
qui parle de normes" ne le reconnait pas encore ( on
verra dans 20 ans ? ) , mais comme ça fonctionne
avec quais tous les navigateurs : pourquoi sans priver ?
maintenant, si tu as une autre solution, sans javascript,
accepté par cet organisme... je suis toutes ouïes
@+

Commentaire de XtremDuke le 06/12/2008 16:06:17

Bul3:

Je ne suis pas plus "compétent" que d'autres. Aussi je n'ai pas du tout critiqué ta source, bien au contraire. Seulement pour ceux et celles qui ne connaissent pas les sélecteurs CSS, je penses qu'une source tournée en Tuto aurait été plus instructive.

Ici tu nous montres une façon saine et propre de se libérer de Javascript pour faire un rollover. Les "apprentis seront comblés de voir ça et j'en suis persuadé autant que je l'étais quand j'ai découverts cette technique.
Cependant, tu mets en avant l'utilisation de la balises <marquee> qui ne va pas tardé à passer aux oubliettes. J'ai fait cette remarque simplement parce que je trouves qu'il y a un énorme fossé entre l'apprentissage des sélecteurs CSS sur lesquelles le web va de plus en plus reposer et la balise <marquee> qu'il ne va pas du tout dans cette direction.

Maintenant, et je te l'accorde, ça fonctionne.

Commentaire de abdoulax le 15/12/2008 15:45:01

Et puis d'abord, on est pas sur CSSFR ici !!! Lol je plaisante.
Par contre il est vrai que ta source est un peu obsolète par le manque de compatibilité. Pour résoudre le problème avec IE je crois qu'il faut jouer avec les balise <a> du genre :
<a>menu1<span><a>menu1.1</a></span><span><a>menu1.2</a></span></a>
<a>menu2<span><a>menu2.1</a></span><span><a>menu2.2</a></span></a>

mais je ne suis pas sûr de ce que je dis... Sinon y a un super site http://www.cssplay.co.uk/menus/

Have fun

Commentaire de abdoulax le 15/12/2008 15:46:15

Un dernier petit truc, pour moi la programmation c'est que du copier coller, d'ailleur ce sont les touches du clavier les plus usées...

Have fun

Commentaire de Bul3 le 15/12/2008 17:45:56

>>un peu obsolète par le manque de compatibilité
fonctionne avec toutes les versions récentes des
navigateurs. pour les anciennes ( comme IE 6 )
voir http://www.javascriptfr.com/codes/menu-multi-niveaux-horizontal-vertical_36506.aspx
>>pour moi la programmation c'est que du copier coller,
menteur ;o)
>>d'ailleur ce sont les touches du clavier les plus usées...
je n'utilise que le mulot.
@+

Commentaire de abdoulax le 15/12/2008 17:55:34

Enfin, moi c'est mon avis! La programmation marche beaucoup avec du copier coller. Enfin après tu as le droit de ne pas le penser! Donc je ne suis pas un menteur mais un penseur d'abord (LOOOOL, je tripe aujourd'hui)!
Si je ne me trompe pas, div:hover ne marche pas sous IE mais je ne suis pas sûr et j'ai pas le temps de tester. En tout cas je te conseils d'aller voir le liens que j'ai mis, il y a des choses magnifiques...

Un dernier pti LOOOL (juste pour rire) développer qu'avec le mulot c'est chaud, encore plus sans faire du copier coller MDR

Have fun

Commentaire de Arto_8000 le 15/12/2008 22:54:12

"Un dernier petit truc, pour moi la programmation c'est que du copier coller"

Personnellement, je trouves ça assez absurde comme déclaration, normalement quand tu programmes tu es supposé automatiser tes traitements pour éviter de faire du copié collé.

Pour la balise a, c'est une très mauvaise idée puisque ce n'est pas une balise qui est encapsulable et ce ne serait pas logique non plus que ça le soit.

Pour la pseudo classe hover et IE :
IE 6 -> Seulement sur la balise a.
IE 7 -> Plusieurs balises comme a, li, etc. (mais pas toutes les balises)
IE 8 -> Toutes les balises sont supportés.

Commentaire de lakichemole le 16/12/2008 10:33:04

je pense que notre amis abdoulax parlais de copier coller d'autre source :)

Commentaire de abdoulax le 16/12/2008 10:48:59

LOOOL je veux pas lancer un débat sur "copier/coller", d'où est ce que l'on cherche notre inspiration, ..., alors fait comme si j'avais rien écrit !!!
Quand j'ai commencer à dir ça, c'était en rapport au 3 premier POST avec les histoires de similitides...
Moi je voulais juste faire comprendre que l'on a pas la science infuse, que l'on ne peux pas toujours tout réinventer... D'ailleur ce qui a de plus difficile pour un développeur, c'est de réutiliser un code.
Il est vrai que l'on apporte une part personnel sur la création d'un bou de code, mais il y aura toujours des sources qui nous auront permis de nous lancer dans un projet, de comprendre le fonctionnement, de créer d'autre projet. Les gas, faut avoir l'esprit Open Source... Lol

HAVE FUN
HAVE FUN
HAVE FUN (c'est le plus important)

Commentaire de wouga le 02/06/2009 17:39:06

Bonjour

je suis un peu néophyte et je voudrais savoir si ce type de menu peu être intégrer à joomla 1.5

cordialement

Commentaire de Bul3 le 02/06/2009 17:58:00

joomla : "...permet de créer un site internet dynamique..."
    php+html+javascript
donc aucune raison qu'on ne puisse pas :
    c'est un menu exclusivement en html+css
quand à te dire comment on fait avec joomla,
    mon foie, je suis bien incapable de répondre
poser la question sur le forum.     @+

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

menu dynamique horizontal [ par jousay ] Bonjour,J'aimerais créer un menu dynamique horizontal qui fonctionnerait comme le menu windows (file, edit, view,...); c'est à dire comme le menu de p besoin d'un code pr un menu qui affichent des sous-menus que lorque l'on clique sur la rubrique du menu souhaité [ par galdakilla ] bonjour,je souhaitais savoir si quelqu'un connaissaist &nbsp;un code qui permet d'afficher un menu mais que les sous-menus n'apparaissent que lorsque double ouverture de pages : calque css et onclick [ par minao06 ] J'ai un souci concernant un menu horizontal et le lancement d'une fenetre d'une taille pred&#233;fini. Lorsque je clique sur un lien du sous-menu css, menu dynamique [ par drsnugle ] Bonjour, le code suivant fonctionne bien sous mozilla .Par contre sous IE les sous menus ne s'affichent pas , et j'ai beau triturer le code ds tous le menu déroulant [ par ndubien ] Bonjour, Comment faire pour que mes menus déroulants passe devant le contenu de la page?Voici ma page (temporaire)  <a href="http://fansdautomob Effet progressif lors du déployement d'un menu déroulant en CSS [ par qntoinOo ] Bonjour,J'aimerais savoir comment il est possible de faire un effet progressif sur un menu déroulant en CSS (Je me sers balise &lt;LI&gt;&lt;UL&gt; to Menu déroulant en accordéon sans CSS ??? [ par sabinep38 ] Bonjour, je souhaiterais créer un menu déroulant en accordéon sans javascript (si possible) comme sur le site www/kauri.be/sitemap.aspxPouvez-vous m'a [REQ] Menu horizontal avec sous menus [W3C] [ par poopoone ] Bonsoir, Je recherche des menus horizontaux du type : ICIQui aille <a href="http://www.tcheval.net/kit/electronikbleu/" target="_bl Menu avec cotès arrondis | HTML - CSS | [ par darksam ] [b]Bonsoir,[/b] Comme le titre l'indique, j'aimerais créer un menu avec cotés arrondis ([i]HTML - CSS[/i]). J'ai visualiser beaucoup de sites Web qui manipulation de sous-menu [ par sonialand ] salut tout le monde; je suis entrain de faire un menu mais j'ai un probleme avec les sous-menus! j'ai mis un compteur pour la profondeur cad a chaque


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
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 : 1,232 sec (3)

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