Petit coup de main sur menu déroulant [Résolu]

Bonjour,

Je cherche à mettre en place un menu déroulant, partant d'images en rollover. Mais voilà je bloque sur l'affichage du sous-menu. De plus il faut qu'il passe avec ie6.
Je sais le net regorge de réponse, c'est vrai mais chaque fois j'ai du mal à adapter ce que je trouve ou n'y arrive pas...

Voici mon avancée :

Pour le html :

<div id="blockmenu">

            <ul>
                <li class="img1"><a href=""></a>
                </li>

                <li class="img2"><a href=""></a>
                    <ul>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                    </ul>
                </li>

                <li class="img3"><a href=""></a>
                    <ul>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                    </ul>
                </li>

                <li class="img4"><a href=""></a>
                </li>

                <li class="img5"><a href=""></a>
                    <ul>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                        <li>lien</li>
                    </ul>
                </li>
            </ul>

        </div>

Et pour le css :

#blockmenu{
/* à venir */	
}

#blockmenu ul{
	margin:0;
	padding:0;
	list-style-type:none;
}

#blockmenu ul li{
	display:inline;
	width:36px;
	height:36px;	
	/*border:1px solid red;*/
}

/* img de fond */
.img1 a, .home a:visited{background: url(../images/img1.png); width:36px;	height:36px;}
.img2 a, .instruc a:visited{background: url(../images/img2.png); width:36px;	height:36px;}
.img3 a, .planches a:visited{background: url(../images/img3.png); width:36px;	height:36px;}
.img4 a, .galerie a:visited{background: url(../images/img4.png); width:36px;	height:36px;}
.img5 a, .aide a:visited{background: url(../images/img5.png); width:36px;	height:36px;}


/* img rollover */
#blockmenu ul li a:hover{
	background-position: 0 -37px;
}

Merci de l'aide
F.

Voilà un tuto qui pourra surement t'aider: http://www.css-faciles.com/menu-deroulant.php
Tu peux aussi voir celui-ci: http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

En ce qui concerne IE6, le premier tuto est compatible, pas le second. Mais par contre sache une chose. Afin de définitivement bannir ce navigateur du marché, et forcer les derniers 11% d'utilisateurs IE6 à se mettre à jour, une campagne a été lancé il y a quelques temps.

Elle consiste à afficher à tout utilisateur de IE6 un message leur indiquant que "leur navigateur est obsolète et qu'il ne permet plus une navigation correcte sur internet, et qu'ils peuvent télécharger une mise à jour de leur navigateur avec un lien, ou utiliser un autre navigateur plus récent type chrome ou firefox".

Pour faire ça voici un tuto: http://zzz.rezo.net/Campagne-pour-l-eradication-d-IE-6.html

Bonsoir,

Quelques remarques:
- Les menus déroulant utilisés comme béquille pour un site dont l'architecture des contenus est mal fichue, ou qui présente une information plus complexe et plus profonde que nécessaire, c'est le mal. La plupart des utilisations de menus déroulants sur des petits sites (moins de 100 pages) sont inutiles et malvenues.
- Les menus déroulants mal fichus techniquement, c'est le mal aussi.
- Réaliser un menu déroulant qui tienne la route techniquement est hors de portée des débutants en intégration web. On est libre d'essayer malgré tout, mais c'est mon avis et je le partage.

Concernant IE6:
- On est plutôt à 5% d'IE6 en France/Europe/USA (stats assez similaires).
- Les messages qui incitent les utilisateurs d'IE6 à changer de navigateur sont des bêtises. Ça a déjà été discuté maintes fois sur ce forum.

Bonjour,

Kurah,
Finalement j'ai opté pour le second. Ce qui rejoint pour idée première et plus simple. Pour IE le problème c'est "résolu" autrement... Ouf les choses seront plus simples maintenant


Florent V., ne la péte ps trop comme ça. Tes remarques sont sont surement fondée et je les partage en un sens, mais les lancer comme ça à la volée n'a jamais fait avancer quoi que ce soit... Tu ne sais pas ce à quoi est destiné ce menu, je ne le précise pas, encore moins pourquoi je dois considérer IE même à 5% d'utilisateurs. Mais ceci n'apporterait rien de le préciser (...).

De plus, quiconque est en droit de se faire plaisir avec un menu déroulant sur ses 2 pages perso.

a écrit :
Réaliser un menu déroulant qui tienne la route techniquement est hors de portée des débutants en intégration web. On est libre d'essayer malgré tout, mais c'est mon avis et je le partage.

Dans la majeure partie des cas le problème ne vient pas du débutant (Le débutant va généralement à l'essentielle de ce qu'il apprend du code et de ces fameuses "normes".) mais plus de certains navigateurs qui, pour x raisons et surement légitimes (...) ne sont pas à la hauteur des avancées du code.
Du coup les pro du code doivent recourir à un codage tout aussi spectaculaires qu'enrichissantes pour afficher un rien dans tous les navigateurs...

Alors ne classe pas les personnes débutantes parce que les pros sont capable et surtout obligés d'alourdir leur code pour adapter le résultat à tous les navigateurs.

J'aurais préféré partager ton savoir plutôt que tes remarques. Et comme tu dis on est libre d'essayer...


Merci encore
F.

Bon, finalement j'ai réussi à faire que je voulais. A force de recherche et de lecture...
Il ne fonctionnera peut être pas sur tous les navigateurs, mais il fonctionne parfaitement pour ce que je veux en faire...

Maintenant je laisse les codes html et css. Si quelqu'un a des remarques... Les img font : l36 x h72
Le css est bourré de commentaire mais bon... Moi ça m'aide dans l'avancement...

HTML :
<div id="blockmenu">

    <ul>
        <li><a class="img1" href=""></a>
        </li>

        <li><a class="img2" href=""></a>
            <ul> <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
            </ul>
        </li>

        <li><a class="img3" href=""></a>
            <ul>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
            </ul>
        </li>

        <li><a class="img4" href=""></a>
        </li>

        <li><a class="img5" href=""></a>
            <ul>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
                <li><a href="">lien</a></li>
            </ul>
        </li>
    </ul>

</div>

CSS :
#blockmenu{
	position:absolute;
	margin:70px 000;
	width:500px;
	height:43px;
	/*border:1px solid yellow;*/
}

/* ***** positionnement de ul niveau1 ******/
#blockmenu ul{
	margin:5px 000; /*ajuste la hauteur des icônes*/
	padding:0;
	list-style-type:none;
}

/* ***** positionnement des icônes ***** */
#blockmenu ul li{
	float:left; /*place les icônes en ligne*/
}

#blockmenu ul li a{
	display:block;
	width:36px;
	height:36px;
	text-decoration:none;	
	margin:0 10px; /*espace entre les icônes*/
	/*border:1px solid red;*/
}

/* ***** rollover sur les icônes ***** */
#blockmenu .home {background: url(../images/img1.png) no-repeat;}
#blockmenu .instruc {background: url(../images/img2.png) no-repeat;}
#blockmenu .planches {background: url(../images/img3.png) no-repeat;}
#blockmenu .galerie {background: url(../images/img4.png) no-repeat;}
#blockmenu .aide {background: url(../images/img5.png) no-repeat;}

#blockmenu a:hover{
	background-position: 0 -37px;
}

/* ***** positionnement des sous-menus et affichage ***** */
#blockmenu ul li ul{
	display:none; /*masque les sous-menu*/
}

#blockmenu ul li:hover ul{
	position:absolute;
	display:block; /*affiche les sous-menu en hover*/
	width:160px; /*largeur sous-menu*/
	margin:0; /*laisser à 0 pour rester coller aux icônes*/
	padding:13px 0 0 0; /*regle la hauteur des sous-menu*/
	/*border:1px solid yellow;*/
}


/* ***** rollover sous-menus ***** */
#blockmenu ul li ul li{
	display:block;
	margin:0;
	padding:0;
	width:160px;
	height:20px;
	background-color: #404040; /*fond sous-menu*/
	/*border:1px solid green;*/
}

#blockmenu ul li ul li a{
	color:#ffa500;
	margin:0;
	padding:1px 0 0 8px; /*ajuste les noms de liens*/
	width:100%;
	height:20px;
	/*border:1px solid purple;*/
	
}

#blockmenu ul li ul li :hover {
	color:#ccc; /*lien sous-menu au repos*/
	line-height: 1em;
}

#blockmenu ul li ul li:hover {
	background:grey; /*surlignage des liens sous-menu*/
}

Merci
F.
Modifié par fuerchan (19 Nov 2010 - 17:44)

Je comprends ta réaction mais je maintiens mon conseil aux débutants: tenez-vous loin des menus déroulants. (Dans le même genre: évitez d'utiliser des widgets JavaScript, plugins jQuery ou autre scripts sans avoir au préalable appris les bases de JavaScript et du DOM.)

Une remarque importante tout de même sur ton code HTML: tes liens de premier niveau n'ont strictement aucun intitulé, aucun contenu. C'est très néfaste pour l'accessibilité et le référencement. Si tu utilises pour tout contenu une image de fond CSS, sache que c'est un détournement CSS de sa fonction principale, qui n'est pas d'insérer des contenus dans une page.

Les solutions accessibles et indexables par les moteurs de recherche ressemblent plutôt à cela:

<!-- Texte affiché, image de fond possible pour obtenir l'aspect graphique final -->
<a href="/prestations.html">Nos prestations</a>

<!-- Texte repris dans l'image -->
<a href="/prestations.html">
  <img src="menu-prestations.png" alt="Nos prestations">
</a>

a écrit :
Je comprends ta réaction mais je maintiens mon conseil aux débutants: tenez-vous loin des menus déroulants. (Dans le même genre: évitez d'utiliser des widgets JavaScript, plugins jQuery ou autre scripts sans avoir au préalable appris les bases de JavaScript et du DOM.)

Je suis complètement d'accord avec FlorentV sur ce coup-là.

a écrit :
Les messages qui incitent les utilisateurs d'IE6 à changer de navigateur sont des bêtises. Ça a déjà été discuté maintes fois sur ce forum. smile

Je ne souhaites pas relancer le débat si vous en avez déjà beaucoup parlé sur ce forum, mais je tenais juste à donner mon avis sur la question. Il me semble impératif et indispensable pour la bonne marche du web de littéralement éradiquer IE6, 7 et 8 de la surface de la planète. C'est aussi simple que ça ! Pour la version 9, j'attends de voir la version finale pour me décider...

Mon opinion peut en effet paraître radicale et quelque peu stupide aux yeux de certains. Mais dans ma logique, je préfère privilégier les navigateurs respectueux des standards, normes et qui soit ergonomiques, plutôt que de continuer à faire fonctionner IE qui est très loin de ça à tout niveau...

C'est très bien de donner des conseils aux débutants. C'est, du reste, même pas discutable. Mais il y a des façons de le faire et là c'est plutôt radical comme remarque, genre : "laisse tomber c'est une affaire de pro". Ce n'est pas faux en même temps, mais ce n'est pas une aide pour autant. J'ai besoin de ce type de menu.
Je débute depuis un peu plus de 10 ans maintenant (je ne suis pas pro pour autant). Mais pour moi, pour mes besoins, le web est un outil et rien d'autres. Je ne gagne pas d'argent en concevant des sites haute couture. C'est pourquoi j'apprends uniquement au fil de mes besoins et j'ai toujours un grand plaisir à ne rien savoir (...).

Maintenant à vous dire, si je ne prête pas autant d'attention sur l'accessibilité... C'est qu'il y a une raison. Tout simplement, je réalise un "utilitaire" en html/css/php, pour mon boulot. Le tout sera ensuite "compiler" en un exécutable. Donc pas de connexion, pas de navigateur externe... Tout sera dans l'exe...

Maintenant je maintiens, aussi, que j'aurais préféré un réel coup de main plutôt qu'une remarque qui dans mon cas ou but n'a aucun intérêt, bien que fondé.

Et puis vous n'empêcherez jamais le débutant de débuter, c'est pourquoi il débute (...). Tout n'est pas qu'affaire de pro. Il y a aussi le plaisir de bricoler. je ne suis pas menuisier non plus mais j'ai l'occasion de me faire une petite étagère avec moulure ben je le fais (...). Même si on peut penser que tout irait mieux avec un pro.

Le bon dialogue passe d'abord par l'écoute. En tout cas c'est mon sens. "La vague et la mer ne sont qu'un".

F.

A vrai dire, les menus déroulants c'est une plaie, même pour les pro. Aussi, en tant que semi-professionnel (étant étudiant dans le domaine en Licence pro et autoentrepreneur à côté), j'essaie au possible d'éviter les menus déroulants, sauf lorsque c'est une exigence du client, ou bien qu'il n'y a pas de solution plus adaptée au problème posé.

Après, pour ma part, je n'ai jamais prétendu "laisse tomber c'est une affaire de pro", aussi je pense que tu t'adressais plutôt à Florent. Je n'ai fait que confirmer le fait que un débutant s'il réfléchit un minimum, commencera par des trucs simples avant de se lancer dans les trucs les plus complexes...

Je t'accorde toutefois qu'il y a une façon de le dire. Cela étant je pense que Florent souhaitait donner des conseils pour aider à progresser, et n'ayant probablement aucune idée de cette histoire d'exécutable, je pense qu'il a opté pour ce qui se fait dans 98% des cas, à savoir un site web. Son intention était certainement plus proche de "les débutants, je vous conseille plutôt de commencer par qqch de simple car là vous vous attaquez à un truc complexe", que de "laisse tomber c'est pour les pros".

Bonjour,

a écrit :
aussi je pense que tu t'adressais plutôt à Florent.

Tout à fait

Effectivement, Kurah, c'est bien comme ça que j'ai interprété sa réponse, sans que cela ne paresse. Ce qui m'a "chatouillé", en fait, c'est bien la façon de le dire. Je parais peut être un peu susceptible sur ce coup...

Florent, je ne t'en veux pas pour autant.

F.