begin process at 2012 02 12 10:59:39
  Trouver un code source :
 
dans
 
[ Dernières recherches ]

5 commentaire(s) de gauvain49 sur des sources sur tout CodeS-SourceS

Déposé sur Menu dynamique css à 100%

Il peut y avoir tellement d'exemple avec de petites variantes pour faire un menu déroulant en CSS, comme celui que j'ai indiqué plus haut, en reprenant les bases d'Arto_8000, en un peu plus valide :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu CSS par Moi</title>
<style type="text/css" media="all">
/*------------------------------------------------------------------------ Mis en forme du Menu*/
body, ul, li { /* On retire les marges pour unifier le tout */
margin: 0;
padding: 0;
}
ul {
       list-style-type: none; /* On enlève les puces des listes */
}
ul#menu li {
position: relative; /*On défini la balise servant à positionner le reste des menus */
padding: 5px;
color: #fff;
background-color: #33e;
width: 150px;
border: 1px solid #000;
}

/*-------------------------------------- Positionnement des menus, avant de les faire disparaître */

ul#menu li ul.menu, ul.menu ul.content {
position: absolute;
top: -1px; /* On repositionne en supprimant le pixel ajouter par la bordure */
left: 161px;/* Pareil ! On repositionne en prenant les 150px de longueur, les 10px de padding droite + gauche, le px de bordure */
display: none; /* Là, on les fait disparaître */
}

/*--------------------------- Au passage de la souris sur les liens voulus : PAF ! Ca réapparaît */

ul#menu li.ligne:hover ul.menu, ul.menu li.sousligne:hover ul.content {
display: block;
}
</style>
</head>
<body>
<ul id="menu">
  <li class="ligne">Menu 1
    <ul class="menu">
      <li class="sousligne">Menu 1.1    
        <ul class="content">
          <li>Menu 1.1.2</li>
        </ul>
      </li>
      <li class="sousligne">Menu 1.2
        <ul class="content">
          <li>Menu 1.2.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="ligne">Menu 2
    <ul class="menu">
      <li class="sousligne">Menu 2.1
        <ul class="content">
          <li>Menu 2.1.1</li>
        </ul>
      </li>
      <li class="sousligne">Menu 2.2
        <ul class="content">
          <li>Menu 2.2.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="ligne">Menu 3
    <ul class="menu">
      <li class="sousligne1">Menu 3.1</li>
    </ul>
  </li>
</ul>
</body>
</html>

Celui ci reprend le principe de menu avec sous-menu et sous-sous-menu. J'avoue ne pas avoir fait de test pour IE6, et ne pense pas qu'il soit compatible avec (quelque chose d'un peu complexe en CSS est compatible avec IE6 sans javascript ??!)

CYRPHP, ton code est pas mal, mais juste une petite critique :
pour #verticale à la première ligne tu as précisé ==> "float:left" puis "clear:left;". Je pense qu'un simple "clear:both;" peut remplacer ces deux lignes.

ARTO_8000 a lancé un bon débat en postant ce code. Dommage qu'il n'y ai pas une place réservée au CSS dans code source, ça pourrait être pas mal !
Posté le : 13/11/2008 12:51:19

Déposé sur Menu dynamique css à 100%

Il est vrai que la compatibilité entre navigateurs est un problème, et que Microsoft ne nous aide pas beaucoup, surtout dans sa version 6 (encore 22,3% d'utilisateurs au mois de septembre 2008 selon le w3schools). La version 7 arrange beaucoup de chose, mais ce n'est pas encore ça. J'attends la 8 avec impatience (et espoir !), même si je sais que cela n'apportera pas pour autant une disparition rapide de IE6.

J'ai proposé ma propre version de ce code CSS (indiqué plus haut). Malgré tout, en tant que pro et très attaché à créer des sites conformes au plus haut point sur tous les navigateurs (de IE à FF, en passant par Opera, Safari, Chrome, parfois même sur Flock ou SpaceTime quand j'ai pris des vitamines le matin), je n'utiliserai pas ce code sur mes sites, à cause de son manque de compatibilité (encore trop dangereux avec IE. Sic!).

Malgré tout, je trouve que ce code CSS se devait d'être montré. Si on passe outre Microsoft, il permet de voir la puissance de ce langage, qui peut amplement remplacer Javascript dans plusieurs domaines (pas trop quand même), et de manière bien plus simple (que ce soit pour des menus dynamiques ou des effets de rollover). Bien sûr, on ne peut pas faire autant de chose qu'avec php ou autre, mais moi, je le trouve... amusant ! (non, je n'ai pas sniffé une ligne de coke avant d'écrire ce post).

Avant, les standards du web, je m'en fichais pas mal, du moment qu'un site s'affichait correctement. Mais en découvrant CSS, sa mise en place à la fois simple, puissance, et rapide, maintenant je ne peux plus m'en passer. Et je m'amuse bien plus à créer un site en séparant bien le fond de la forme (grâce à ça, je peux même en faire la maintenance avec une main dans le dos et deux doigts cassés).

J'avoue aussi avoir pris le parti de ne plus trop me laisser freiner par IE6 dans la conception de mes sites. Je sais, c'est affreux et immoral pour quelqu'un qui se dit professionnel et respectueux des conformités, mais c'est la seule façon que j'ai trouvé pour encourager les gens à faire une mise à jour vers un navigateurs mieux respectueux des standards (au moins de passer de IE6 à IE7). J'avoue que c'est dangereux, voir risqué, mais voilà, c'est parfois en secouant un peu les choses qu'on les fait évoluer (peut être qu'avec cette méthode j'apporterai même la paix dans le monde, mais là je suis moins convaincu). Mais bien sûr, j'explique bien aux personnes "pourquoi" c'est nécessaire, je ne leur dit pas juste "faites-le, ayez confiance" (Aaaaah ! Si c'était si simple !).

Bref, ce code a été montré de façon pertinente, en montrant sur quoi il marche et ne marche pas. Maintenant, aux gens de faire leur choix. Et même si certain pense qu'il est trop tôt pour le mettre en action (dû au problème de compatibilité de certains navigateurs avec le rendu CSS, je me répète non ?), et bien, disons que ARTO_8000 l'a juste présenté avec un peu d'avance sur son temps... !

Promis, la prochaine fois, je fais moins long...
Posté le : 03/11/2008 12:35:11

Déposé sur Menu dynamique css à 100%

Tiens... !
Finalement, je retire ce que j'ai dit. Il y a une méthode alternative à ce code pour IE7 (à mon avis si on a la dernière mise à jour de ce navigateur)

La preuve ici : http://www.percevalcreation.fr/test.html

ARTO_8000, il est encore temps que moi je relève ton défi ? Non ! Ah bon... tant pis...

:-)
Posté le : 02/11/2008 19:29:48

Déposé sur Menu dynamique css à 100%

ARTO_8000 a raison, IE7 et antérieur ne supportant que l'attribut :hover sur la balise a, il n'y a aucune méthode alternative pour la navigateur de Microsoft (en attendant la version 8). Sauf en rajoutant du javascript, mais là, nous ne sommes plus dans le tout CSS.
La seule chose qui peut être améliorée, c'est d'utiliser les balises "ul" et "li" pour le menu plutôt que "div" et "span". Mais ça ne changerai pas beaucoup le principe du code CSS décrit ici, alors que c'est lui qui nous intéresse le plus.

D'ailleurs, je me demande si on ne peut pas faire le même menu dynamique avec la propriété "clip" ? Va falloir que je me penche sur la question...
Posté le : 02/11/2008 17:15:15

Déposé sur Menu dynamique css à 100%

Bonjour,

C'est vrai qu'IE a du mal avec le CSS mais, comme dit Zugolin, tant qu'il restera aussi répandu comme navigateur, ce code n'est pas très exploitable.

Toutefois, ça fait du bien de voir que quelqu'un utilise le CSS pour faire une mise en forme un peu plus "dynamique" qu'une banale image d'arrière plan ou qu'un texte en couleur. Ca permet de voir la puissance des feuilles de style quand elles sont bien maîtrisées. Donc, Bravo !!
Posté le : 02/11/2008 12:16:09

1


Nos sponsors


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Beautiful woman in a bikini meditating on the beachPhoto Single Large Rock Formation in Monument Valley
Photo Saintes Maries de la Mer vue du ciel (13) 

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,156 sec (3)

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)