28173 sujets

CSS et mise en forme, CSS3

[Résolu] Menu déroulant CSS sans JavaScript

Bonjour,

Pourquoi ne fait on pas un menu déroulant horizontal sans javascript de cette manière :

Pour vous expliquer mon idée, prenons l'exemple suivant :
Un exemple de menu d'Alsacréation
Quand on passe la souris sur menu1, l'image du dessous s'éclaircit. L'idée c'est lorsqu'on passe la souris sur menu1, ce n'est pas une image d'après la méthode coullisante qui apparait mais un bloc div qui aurait été masqué avant jusqu'à que le a:hover sur menu1 le démasque. Et dans se bloc div on metterait des liens qui correspondraient en fait au sous-menu.

Vu que le ":hover" sur un "a" seulement marche avec IE6, pourquoi ne fait on pas un menu se rapprochant de mon explication ?
Modifié par danae (20 Sep 2006 - 10:36)
Administrateur
Très rapidement en passant : ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ Smiley decu

PS : si j'ai bien compris, tu voudrais faire apparaitre un <div> qui serait contenu dans un <a> ?
Si c'est le cas, ce n'est pas valide et tu prends des risques d'incompatibilités (revoir le tutoriel sur les types de balises) Smiley ohwell
Modifié par Raphael (15 Sep 2006 - 17:00)
Salut, dans le genre, j'avais réalisé ça :

<ul id ="onglet">
	<li><a href = "#">Accueil</a></li>
	<li class="tab1">
		<a href = "#">TOTO</a>
		<a href = "#">TUTU</a>
	</li>
	<li class="tab2">
		<a href = "#">TOTO</a>
		<a href = "#">TUTU</a>
	</li>
</ul>

/*Positionnement de la barre d'onglet*/
#onglet
{
  float: right;
  display: block;
  list-style-type: none;
  padding-left: 15px;
  margin-top:26px;
  margin-left: -215px;
  background-image:url(../images/bordure/truc.png);
  background-repeat: no-repeat;
}

/*Pour que les onglets s'ajustent au texte*/
#onglet:after {content:"."; clear: both; display: block; height: 0; visibility: hidden}

/*Les liens aux repos, en gros blocs*/
#onglet a
{
  display: block;
  padding: 3px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background-color: #FC6600;
  border: solid #FC6600 2px;
  border-top: none;
}

/*Chaque colonne de la barre d'onglets*/
#onglet > li
{
  display: block;
  float: left;
}

/*On affiche uniquement le premier lien, sauf au survol de la colonne*/
#onglet li a {display: none;}
#onglet a:first-child{display: block;}
#onglet li:hover a{display: block; background: #FFF; color:#000;}
#onglet li:hover a:hover{color: #FC6600;}

/*Proprièté de l'onglet actif*/
#tab1 .tab1 a, #tab2 .tab2 a, 
{
  background-color: #fff;
  color: #000;
}

Mais il me semble que la solution javascript est ergonomiquement meilleure, car elle laisse affiché le menu. Je sais pas non plus ce que ça vaut niveau accessibilité ou sous d'autres navigateurs que FF. Des avis?
Modifié par coccimaster (15 Sep 2006 - 17:07)
Raphael a écrit :
Très rapidement en passant : ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ Smiley decu

Désolée, l'habitude d'autres forums où les liens ne marchent pas de cette façon

Raphael a écrit :
PS : si j'ai bien compris, tu voudrais faire apparaitre un <div> qui serait contenu dans un <a> ?

Arf.. oui effectivement c'est pas bon ...
Modifié par danae (15 Sep 2006 - 17:26)
coccimaster a écrit :
Mais il me semble que la solution javascript est ergonomiquement meilleure, car elle laisse affiché le menu.

Laisse afficher le menu? Comment ça? Je viens de copier/coller/tester et ça donne un rendu semblable au JavaScript.

coccimaster a écrit :
Je sais pas non plus ce que ça vaut niveau accessibilité ou sous d'autres navigateurs que FF

li:hover ne marchera pas sous IE car seul a:hover marche avec IE
Modifié par danae (15 Sep 2006 - 17:15)
danae a écrit :

Laisse afficher le menu? Comment ça? Je viens de copier/coller/tester et ça donne un rendu semblable au JavaScript.

Je pensais qu'il s'agissait d'un autre menu (celui avec le javascript montre())

Tu peux compenser le li:hover avec

<a>ton premier lien</a>
    <div>
       <a>Les sous-liens</a>
       <a>Les sous-liens</a>
</div>

div{display: none}
a:hover + div {display: block}

sauf si IE ne pige pas le + dans le sélecteur, je crois quez c'est le cas.
Mais en faite :before et :after ne sont pas reconnues par internet Explorer.

Désolée coccimaster mais cette fois je crois que tu ne pourras pas trouver une solution alternative malheureusement Smiley decu
Sujet clos
Aller à