Menu déroulant / CSS sous Firefox / IE
Fermé
Mel
-
16 sept. 2008 à 00:39
bormat Messages postés 10 Date d'inscription lundi 1 juin 2009 Statut Membre Dernière intervention 25 août 2012 - 23 juin 2009 à 22:45
bormat Messages postés 10 Date d'inscription lundi 1 juin 2009 Statut Membre Dernière intervention 25 août 2012 - 23 juin 2009 à 22:45
A voir également:
- Menu déroulant / CSS sous Firefox / IE
- Menu déroulant excel - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Excel menu déroulant en cascade - Guide
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Firefox telecharger - Télécharger - Navigateurs
13 réponses
bormat
Messages postés
10
Date d'inscription
lundi 1 juin 2009
Statut
Membre
Dernière intervention
25 août 2012
4
23 juin 2009 à 22:45
23 juin 2009 à 22:45
c'est simple tu as un menu déroulant 100 % css http://bormat2.free.fr/wordpress4/
cedopolice
Messages postés
146
Date d'inscription
jeudi 20 mars 2008
Statut
Membre
Dernière intervention
15 février 2011
2
16 sept. 2008 à 01:59
16 sept. 2008 à 01:59
Bonjour, je suis pas tres doué non plus, mais si tu prenais ca et que tu l'adaptais, ca irai pas?:
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels https://www.alsacreations.com/ */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
bottom: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
position: relative;
margin: 0 2px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
background-color: #ccc;
position: absolute;
bottom:1.5em;
width:100%;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels https://www.alsacreations.com/ */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
bottom: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
position: relative;
margin: 0 2px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
background-color: #ccc;
position: absolute;
bottom:1.5em;
width:100%;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
Merci de ta réponse :)
Le problème c'est que je peux pas mettre de javascript... Seulement du html et modifier la css ! Je vais quand même tester par rapport à la css si y'a des trucs qui peuvent aider à résoudre le truc, surtout au niveau de la position du menu...
Je crois l'avoir lu ce tuto, mais le menu se déroule vers le bas non ? Et j'ai pas trouvé d'explication sur ce qu'il fallait changer pour inverser... :S
Le problème c'est que je peux pas mettre de javascript... Seulement du html et modifier la css ! Je vais quand même tester par rapport à la css si y'a des trucs qui peuvent aider à résoudre le truc, surtout au niveau de la position du menu...
Je crois l'avoir lu ce tuto, mais le menu se déroule vers le bas non ? Et j'ai pas trouvé d'explication sur ce qu'il fallait changer pour inverser... :S
J'ai tenté de modifier mais j'ai pas réussi à obtenir le résultat que je voulais.
Quelqu'un pourrait pas m'expliquer quelle variable modifier dans la CSS pour que le menu se déroule en haut ? N'ayant mis aucun code javascript pour mon menu, c'est bien la CSS qu'il faut modifier, non ?
Et euh... Comment faire pour que mon menu soit également centré dans IE et pas seulement Mozilla Firefox ?
Merci :)
Quelqu'un pourrait pas m'expliquer quelle variable modifier dans la CSS pour que le menu se déroule en haut ? N'ayant mis aucun code javascript pour mon menu, c'est bien la CSS qu'il faut modifier, non ?
Et euh... Comment faire pour que mon menu soit également centré dans IE et pas seulement Mozilla Firefox ?
Merci :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
der_igel
Messages postés
50
Date d'inscription
mercredi 13 août 2008
Statut
Membre
Dernière intervention
9 octobre 2009
17 sept. 2008 à 15:39
17 sept. 2008 à 15:39
Ce n'est pas courant de dérouler le menu vers le haut ! Je ne suis pas sûre que ça marche, mais as-tu essayé de mettre les sous-menus avant le bouton du menu correspondant ? Evidemment, toute la mise en page sera à refaire, mais ton sous-menu se déroulera peut-être au dessus du menu.
Je viens de tester là, mais ça ne donne pas du tout un bon résultat.
En fait, j'ai déjà testé plusieurs trucs, et j'ai remarqué qu'en modifiant cette partie du CSS :
#contabs {
position : absolute;
top : -20px !important ;
top : -20px;
z-index : 500;
width: 100%;
}
J'obtenais un truc différent. Je m'explique... En mettant 20 à la place de -20 à top, j'arrive à faire que le menu aille vers le haut quand il se déroule... Mais entièrement...
Donc pour montrer, voilà ce qu'il se passe avec les valeurs -20:
normal=passage de la souris
Drama = Drama
Japonais
Coréen
Chinois
Avec les valeurs 20 :
Drama
Japonais
Coréen
Drama = Chinois
Donc c'est pas ce que je recherche vu que je veux que seulement les sous menus bougent... Là tout le menu bouge en entier vers le haut, mais peut-être que c'est une piste....
En fait, j'ai déjà testé plusieurs trucs, et j'ai remarqué qu'en modifiant cette partie du CSS :
#contabs {
position : absolute;
top : -20px !important ;
top : -20px;
z-index : 500;
width: 100%;
}
J'obtenais un truc différent. Je m'explique... En mettant 20 à la place de -20 à top, j'arrive à faire que le menu aille vers le haut quand il se déroule... Mais entièrement...
Donc pour montrer, voilà ce qu'il se passe avec les valeurs -20:
normal=passage de la souris
Drama = Drama
Japonais
Coréen
Chinois
Avec les valeurs 20 :
Drama
Japonais
Coréen
Drama = Chinois
Donc c'est pas ce que je recherche vu que je veux que seulement les sous menus bougent... Là tout le menu bouge en entier vers le haut, mais peut-être que c'est une piste....
Je me suis très mal expliquée... Désolée je me reprends
C'est pas en modifiant le -20 en 20, c'est en modifiant le "top" en "bottom" que j'ai obtenu ce résultat.
Voilà plus clairement pour expliquer ce que ça donne :
http://img229c.imageshack.us/img229/3756/modifex3.gif
C'est pas en modifiant le -20 en 20, c'est en modifiant le "top" en "bottom" que j'ai obtenu ce résultat.
Voilà plus clairement pour expliquer ce que ça donne :
http://img229c.imageshack.us/img229/3756/modifex3.gif
Salut,
Je suis en train de faire un menu déroulant aussi. Moi je le fais vers le bas donc pas de problème là-dessus. Mais j'ai aussi des problèmes entre IE et Firefox. Alors pour que ça marche sur les 2, j'ai fais un test du navigateur en php. Tu ne peux pas non plus utiliser de php? Ou alors, mettre le test dans le fichier index et faire un CSS pour IE et un autre pour firefox.
Je suis en train de faire un menu déroulant aussi. Moi je le fais vers le bas donc pas de problème là-dessus. Mais j'ai aussi des problèmes entre IE et Firefox. Alors pour que ça marche sur les 2, j'ai fais un test du navigateur en php. Tu ne peux pas non plus utiliser de php? Ou alors, mettre le test dans le fichier index et faire un CSS pour IE et un autre pour firefox.
Non je ne peux pas mettre de php.
Je vais tester de faire des css pour les deux ça sera plus simple je pense oui :) Merci !
Je vais aussi essayer de refaire tout au propre et de voir ce qui sert et ce qui sert pas... Parce que je pense que j'ai fait pas mal d'erreurs dans la CSS !
Merci encore :)
Je vais tester de faire des css pour les deux ça sera plus simple je pense oui :) Merci !
Je vais aussi essayer de refaire tout au propre et de voir ce qui sert et ce qui sert pas... Parce que je pense que j'ai fait pas mal d'erreurs dans la CSS !
Merci encore :)
De rien même si ça t'as pas aidé. En tout cas bon courage pour que ça fonctionne sur les 2. Je me bats depuis des heures là-dessus ^^
Ryuzaki76
Messages postés
4
Date d'inscription
dimanche 22 février 2009
Statut
Membre
Dernière intervention
27 février 2009
1
23 févr. 2009 à 11:33
23 févr. 2009 à 11:33
Merci beaucoups sa m'aide !
Mais est ce que on pourrait faire la meme chose mais en bas ?
Désoler si m'as question vous intrigue je suis novice :p
Mais est ce que on pourrait faire la meme chose mais en bas ?
Désoler si m'as question vous intrigue je suis novice :p
position: relative => ta oublie le ";" pour commencer ^^"
background : transparent url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png) aussi
background : transparent url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png) et là aussi
Ensuite moi je connais pas background:transparent après peut-être que sa existe, mais je mettrai
background-image: url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png);
background : transparent url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png) aussi
background : transparent url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png) et là aussi
Ensuite moi je connais pas background:transparent après peut-être que sa existe, mais je mettrai
background-image: url(http://img57.imageshack.us/img57/6731/fondtranspmm8.png);