menu déroulant que en css

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : menu déroulant que en css

alaindeloin69

hello, je veux faire un menu déroulant que en CSS alors voila comment je m'en suis pris :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
ul li {
list-style-type: none;
margin: 0;
}
#menu li a {
height: 1em;
background: gray;
margin: 5px;
width: 10%;
padding: 5px;
}
#menu dt a{
display: none;
}
#menu li a:hover {
text-decoration: none;
background-color: red;
color: blue;
}
#menu li a:hover dt a{
display: block;
position: absolute;
top: 0px;
left: 11px;
height: 4em;
width: 10%;
background: red;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">item 1</a><dl><dt><a href="#">item 1.1</a></dt></dl></li>
<li><a href="#">item 2</a><dl><dt><a href="#">item 1.2</a></dt></dl></li>
<li><a href="#">item 3</a><dl><dt><a href="#">item 1.3</a></dt></dl></li>
<li><a href="#">item 4</a><dl><dt><a href="#">item 1.4</a></dt></dl></li>
</ul>
</body>
</html>

mais le probleme c'est que le menu qui doit s'afficher en passant sur le 1er menu hors, il ne s'afiche pas ????

ou est mon probleme

(je fais exprès de pas mettre du javascript car je ne sais pas m'en servir)

Publicité

Ayuget

R.oger

le comportement que tu décris est tout à fait normal.

Sinon, il n'y a actuellement aucune solution cross-browsers pour faire un menu déroulant uniquement en CS. (enfin il me semble). Va voir sur alsacreations, ils ont une panoplie de menu comme le tien en exemples, tu pourra t'en inspirer.

plainsofpain

Pingouino's lover

Pas de JS <=> ne fonctionnera que sous les navigateurs respectant les standards, donc pas sur IE.

Concernant ton cas, c'est quoi ca :

Code :

# <li><a href="#">item 1</a><dl><dt><a href="#">item 1.1</a></dt></dl></li>
# <li><a href="#">item 2</a><dl><dt><a href="#">item 1.2</a></dt></dl></li>
# <li><a href="#">item 3</a><dl><dt><a href="#">item 1.3</a></dt></dl></li>
# <li><a href="#">item 4</a><dl><dt><a href="#">item 1.4</a></dt></dl></li>

Les dl et dt seraient à remplacer par une sous liste avec donc à nouveau un <ul></ul> qui contiendrait une série de <li></li>

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

alaindeloin69

http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

Citation :

Pourquoi utiliser du javascript ?

Un menu déroulant peut très bien se réaliser intégralement en CSS, sans utilisation de langages de scripts, alors pourquoi allons-nous utiliser javascript dans ce didactitiel?
Il y'a deux raisons à cela. La première est que la fonction originelle des feuilles de styles CSS est de s'occuper de la mise en page et non des aspects dynamiques de celle-ci. Ces derniers sont du domaine de Javascript (ou ECMAScript). Il s'avère que la pseudo-classe (:hover) est un peu située entre les deux : elle indique le comportement au survol mais pourrait très bien servir à des applications plus dynamiques.

vous avez vu que l'on peut faire ceci sans jvscript [:itm] [:itm]

omega2

ce qu'est marrant, c'est que chez alsacreation, dés qu'on désactive javascript, les exemple soit disant sans javascript ne marche plus sous firefox et j'ai pas osé testé avec IE.

Message cité 1 fois
Message édité par omega2 le 02-09-2005 à 22:29:35

omega2

J'ai réussit un menu qui fonction que avec du css. PAr contre, ca marche pas sous IE. Pour IE, il faudrait une version avec javascript.

fichier html :

Code :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<ul class="niveau1">
<li class="niveau1"><div><a href="#">menu1</a>
<ul>
<li><a href="#">ligne1_1</a>
</li>
<li><a href="#">ligne1_2</a>
</li>
</ul></div>
</li>
<li class="niveau1"><div><a href="#">menu2</a>
<ul>
<li><a href="#">ligne2_1</a>
</li>
<li><a href="#">ligne2_2</a>
</li>
</ul></div>
</li>
</ul>
</body>
</html>

fichier css.css

Code :

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.niveau1 {
float: left;
width: 12em;
}
li.niveau1 {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
.niveau1 div ul {
display: none;
_display: inherit;
background: white;
border: 1px solid gray;
}
.niveau1 div:hover ul{
display: inherit;
}

Je n'ai malheureusement pas réussit à faire fonctionner sans le div situé à l'intérieur du premier niveau de "ul li". Peut être que je m'y suis mal pris, mais c'est comme ça que ca a fonctionné.

(02/09 à 23:38) EDIT : version légérement simplifié pour que ca soit plus simple à comprendre.
(03/09 à 11:20) EDIT 2 : rajout d'un petit hack (la ligne "_display: inherit;" ) pour que les sous-menu ne soient plus caché sous IE.

Message édité par omega2 le 03-09-2005 à 11:09:44

alaindeloin69

lol ton code n'a pa l'air d'etre du xhtml mais si sa marche
bien jouer, je devrai tt de meme esayé sur firefox !!

omega2

J'ai pas tenté la compatibilité xhtml, j'ai cherché à faire fonctionner ce menu à la con. :lol:
La premiére ligne, c'est phpedit qui l'a créé. (bon ok, j'aurais pas du lui dire que je voulais un fichier xhtml. :lol: )

Ayuget

R.oger

alaindeloin69 a écrit :

http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

Citation :

vous avez vu que l'on peut faire ceci sans jvscript [:itm] [:itm]

mais j'ai jamais dit le contraire [:itm]
On peut parfaitement faire sans javascript, mais ca ne marchera pas sous IE [:itm]

plainsofpain

Pingouino's lover

alaindeloin69 a écrit :

lol ton code n'a pa l'air d'etre du xhtml mais si sa marche
bien jouer, je devrai tt de meme esayé sur firefox !!

Son code est compatible xhtml, je vois pas de problème

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

Publicité

omega2

En fait, j'ai vérifié, et pour passer la validation du w3c, il suffit de rajouter deux lignes au tout début de la page html :

Code :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">

zéro erreur à la validation. (ouf)

plainsofpain

Pingouino's lover

Citation :

<?xml version="1.0" encoding="iso-8859-1"?>

Ca c'est correct, mais si tu le mets, cette bouse d'IE passe en modèles de boites microsoft. Donc incorrect.

Message cité 1 fois

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

omega2

Ca change quoi au niveau de l'affichage?

Message cité 1 fois

plainsofpain

Pingouino's lover

Rien

Message cité 1 fois

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

omega2

Alors c'est pas génant.
je garderais ainsi.

alaindeloin69

ayes, j'en ai crée un !!!!! youpi !!!! et en plus ça a l'air du xhtml (c'est ce que voulais )

http://robinleynaud.free.fr/untitled

I.E ne vas pas faire un jour une mise à jour pour qu'il puisse lire ce satané menu ???? (le mien)

voila je voulais juste dire ça ciao

---------------
mon site perso, allez visiter

plainsofpain

Pingouino's lover

Ouais, enfin, j'espère que tu l'amélioreras un peu, genre mettre les liens en bloc pour qu'on soit pas obligé de survoler le lien meme, mais la case

Message cité 1 fois

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

alaindeloin69

ouai mais m'en fou je voulais que ça marche ;l:l apres, je le ferais plus jolie bien sûr

au fait, il met qu'il n'est pas au normes le w3 ???? comment ça se fait ?

---------------
mon site perso, allez visiter

masklinn

í dag viðrar vel til loftárása

plainsofpain a écrit :

Citation :

<?xml version="1.0" encoding="iso-8859-1"?>

Ca c'est correct, mais si tu le mets, cette bouse d'IE passe en modèles de boites microsoft. Donc incorrect.

Il repasse en mode Quirks [:aloy]

omega2 a écrit :

Ca change quoi au niveau de l'affichage?

http://www.quirksmode.org/?/css/quirksmode.html

Il se remet à afficher les pages à la IE5

plainsofpain a écrit :

Rien

[:rofl]

Et accessoirement, le prologue XML n'est pas correct quand on sert le XHTML en tant que text/html, comme indiqué dans l'appendix C des specs XHTML1.0

Message cité 1 fois

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Badze

Aime les frites

voici un menu marchant tres bien sur IE et FF sans javascript.
http://www.xs4all.nl/~peterned/examples/cssmenu.html

Message cité 1 fois

masklinn

í dag viðrar vel til loftárása

Badze a écrit :

voici un menu marchant tres bien sur IE et FF sans javascript.
http://www.xs4all.nl/~peterned/examples/cssmenu.html

body {
behavior:url("../htc/csshover.htc" );
}

un peu de sérieux :sarcastic:

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Badze

Aime les frites

Oups, j'avais pas vu :ange: , je suis décu d'apprendre cette nouvelle

alaindeloin69

zut de zut, je ne comprend pas, j'arrive pas à faire de la page du menu que j'ai crée un page au normes ....

je ne comprend pas ce que me dit le validator.w3 ....

je sais que ne sert a rien qu'elle soit au normes car elle a zéro d'utilité mais plutôt pour prendre un exemple pour mes autres pages ..

ciao @++ merci

---------------
mon site perso, allez visiter

Ricco

Retour au pays

Tidy est pas content sur http://robinleynaud.free.fr/untitled parce qu'il y a 2 balise html en haut.

---------------
"L'informatique n'est pas plus la science des ordinateurs que l'astronomie n'est celle des télescopes." Michael R. Fellows & Ian Parberry

alaindeloin69

yes ..... merci ciao @+++ bye aurevoir good bye, salut, hello, dzantien (chinoi)

---------------
mon site perso, allez visiter

plainsofpain

Pingouino's lover

masklinn a écrit :

[:rofl]

Dans son cas ca change quasiment rien

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

alaindeloin69

plainsofpain a écrit :

Ouais, enfin, j'espère que tu l'amélioreras un peu, genre mettre les liens en bloc pour qu'on soit pas obligé de survoler le lien meme, mais la case

justement, j'avais éssayé et voila ce que ça fait :
http://robinleynaud.free.fr/untitled

ul#menu li a {
display: block;
height: 1.5em;
width: 110px;
background: #cc99ff;
text-indent: 10px;
border: solid 1px black;
}

au lieu de

ul#menu li {
display: block;
height: 1.5em;
width: 110px;
background: #cc99ff;
text-indent: 10px;
border: solid 1px black;
}

je pense que c'était ça qu'il fallait faire, mais tu as bien vu ce que ça fait sur .F.F. ????

comment faut-il que je fasse ?

---------------
mon site perso, allez visiter

plainsofpain

Pingouino's lover

Je suis sous Opera mais bon ca fait la meme chose que sous ff je pense.

la partie

Code :

#menu li:hover ul

C'est la qu'il faut que tu modifies. Le positionnement relatif conviendrai mieux que l'absolue je pense.

Va voir la : http://www.openweb.eu.org/articles/initiation_flux/

Edit : Quoiqu'en changeant les valeurs de top et left ca pourrait etre mieux.

Message édité par plainsofpain le 25-09-2005 à 22:21:34

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

alaindeloin69

c'est bien merci mais le probleme c'est que sa marche pas tout le temps le :hover, c'est a dire que parfois il ne s'affiche pas le 2emme menu alors que le curseur et bien sur un lien qui fonctionne, enfin tu verras par toi meme que sa foire un peu ....

Message édité par alaindeloin69 le 26-09-2005 à 21:44:55

---------------
mon site perso, allez visiter

sibelius

Vous êtes sûr ?

omega2 a écrit :

ce qu'est marrant, c'est que chez alsacreation, dés qu'on désactive javascript, les exemple soit disant sans javascript ne marche plus sous firefox et j'ai pas osé testé avec IE.

Euh il faudrait lire tout le tutoriel aussi

Le résumé est celui-ci :
- on peut le faire sans JS
- mais ça ne marchera pas sur IE
- pour des raisons d'accessibilité, le menu *doit* être visible sans JS (aucun sous-menu caché)
- donc sans JS, le menu est affiché intégralement et il n'y a évidemment pas de comportement dynamique

D'ailleurs je rappelle que dans *tous* les cas, un menu déroulant va poser des soucis d'accesibilité. Qu'il soit en JS ou en CSS intégral.
Le mieux est de faire en sorte que le menu s'affiche intégralement (entièrement déroulé et visible) quand le navigateur ne dispose ni de JS ni de CSS.

Message édité par sibelius le 26-09-2005 à 18:17:30

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

alaindeloin69

vous avez vu le probleme que sa fait, c'est pas trop dynamique, sa foire ...
comment faire pour mettre que mes menu survolés soit afichés quand on survole le lien et non le LI ?????

Message cité 1 fois
Message édité par alaindeloin69 le 27-09-2005 à 18:32:40

---------------
mon site perso, allez visiter

sibelius

Vous êtes sûr ?

alaindeloin69 a écrit :

vous avez vu le probleme que sa fait, c'est pas trop dynamique, sa foire ...
comment faire pour mettre que mes menu survolés soit afichés quand on survole le lien et non le LI ?????

Je n'ai pas tout suivi, mais le :hover s'applique à quelle balise ? <a> ou <li> ?

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

alaindeloin69

a <li> mais va sur robinleynaud.free.fr/untitled

Message édité par alaindeloin69 le 27-09-2005 à 18:56:26

---------------
mon site perso, allez visiter

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

menu déroulant que en css

Sujets relatifs
CSS Menu déroulant inline avec sous menu vertical	Menu déroulant en css (à l'aide je bloque!!!!!!)
Menu déroulant	menu déroulant
Menu déroulant et FireFox	menu déroulant javascript et css
help, je sais splus faire un menu déroulant !!!	menu deroulant (java script et CSS)
moteur de recherche sous forme de menu déroulant	menu déroulant ????
Plus de sujets relatifs à : menu déroulant que en css

Page générée en 0.136 secondes