Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript Horizontal javascript and CSS menu

Horizontal javascript and CSS menu

18 réponses
Avatar
polo
Bonjour =E0 tous
je recherche =E0 avoir une configuration =E0 l'horizontale pour les menus
et sous menus.
En ce qui concerne le css, tout se passe bien (bien que mon code ne
soit pas tres propre, je le reconnais) sous firefox.

par contre, en ce qui concerne le javascript pour internet explorer, je
n'arrive pas a m'en sortir.
j'ai bien essay=E9 de faire des recherches mais j'avoue que mon niveau
est trop limit=E9.
le but etant d'obtenir le meme resultat sous explorer que sous firefox.

je vous envoie le code de la page que j'ai faite pour le menu.
n'hesitez pas =E0 me donner des commentaires quant =E0 comment faire pour
obtenir le meme resultat sur explorer avec le javascript que sur
firefox avec le css pur.

Merci

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir=3D"{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html;
charset=3D{S_CONTENT_ENCODING}">
<meta http-equiv=3D"Content-Style-Type" content=3D"text/css">
<title</title>

<style type=3D"text/css">
/*-------------------------------------------------------------*/

ul#menu li ul{
display:none;
}

ul#menu li:hover>ul{
/*position:relative;*/
display:block;
/*margin: 1;*/
/*left: 15;*/
width:736px;
height: 25;
padding-top:10px;
padding:7px;
}

ul#menu{
margin:0px;
padding:0px;
list-style:none;
width:750;
/*background:#5f7eb3;*/
background:#3c5279;
float:left;
font:0.9em Tahoma, Verdana, Helvetica, sans-serif;
}

/*
ul#menu hr{
margin-right: 4px;
margin-left: 4px;
}
*/

ul#menu li{
float:left;
display:block;
padding:2px 1px;
}

ul#menu li.first{
padding-left:2px;
}

ul#menu li.last{
padding-right:2px;
}

ul#menu li a{
display:block;
padding:2px 6px;
/*border:1px solid #CCCCCC;*/
color:#FFFFFF;
text-decoration:none;
}

ul#menu li a:hover{
border-top-color:#F0F0F0;
border-left-color:#F0F0F0;
border-right-color:#999999;
border-bottom-color:#999999;
}

ul#menu ul{
position:absolute;
/*position:relative;*/
background:#CCCCCC;
/*background:#FFFFFF;*/
list-style:none;
margin:0px 0px;
padding:0px;
/*width:400px;*/
z-index:1;
}

ul#menu ul.un{
margin:2px -2px;
}
ul#menu ul.deux{
margin:2px -84px;
}
ul#menu ul.trois{
margin:2px -166px;
}

ul#menu ul ul{
top:15px;
left:10px;
z-index:2;
}

ul#menu ul li{
position:relative;
float:none;
margin:0px;
padding:0px;
_display:inline;
}

ul#menu ul li a{
display:inline;
margin:0px;
padding:0px;
width:400px;
border:none;
color:#000000;
font:12px Tahoma, Verdana, Helvetica, sans-serif;
font-weight:bold;
}

ul#menu ul li a span{
display:inline;
width:400px;
_width:500px;
margin:0px 2px;
border:none;
cursor:hand;

}
ul#menu ul li a.next span{
}
ul#menu ul li a.next:hover span{
background-position: -160px 50%;
}

ul#menu ul li a:hover span{
background-color:#000099;
color:#FFFFFF;
border:none;
background-position: -306px 0;}

ul#menu ul li.first{
padding-left:0px;
display: inline;
}

ul#menu ul li.first a{
padding-top:2px;
}

ul#menu ul li.last{
padding-right:0px;
}

ul#menu ul li.last a{
padding-bottom:2px;
}

ul#newmenu li {
display: inline;
}

/*-------------------------------------------------------------*/
</style>

<script type=3D"text/javascript">
function hover(obj){
if(document.all){
UL =3D obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu =3D UL[0].style;
if(sousMenu.display =3D=3D 'none' || sousMenu.display =3D=3D ''){
sousMenu.display =3D 'block';
}else{
sousMenu.display =3D 'none';
}
}
}
}

function setHover(){
LI =3D document.getElementById('menu').getElementsByTagName('li');
nLI =3D LI.length;
for(i=3D0; i < nLI; i++){
LI[i].onmouseover =3D function(){
hover(this);
}
LI[i].onmouseout =3D function(){
hover(this);
}
}
}
</script>

</head>


<body onLoad=3D"setHover()">

<a name=3D"top"></a>

<!-- menu customis=E9 ******************************* -->
<ul id=3D"menu">
<li class=3D"first">
<a href=3D"#"><b>Menu 1&nbsp;&nbsp;|</b></a>

<ul id=3D"newmenu" class=3D"un">
<li><a href=3D"#"><span>Menu 1.1</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 1.2</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 1.3</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 1.4</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#" class=3D"disabled"><span>Menu 1.5</span></a></li>
</ul>
</li>

<li>
<a href=3D"#"><b>Menu 2&nbsp;&nbsp;|</b></a>
<ul id=3D"newmenu" class=3D"deux">
<li><a href=3D"#"><span>Menu 2.1</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 2.2</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 2.3</span>&nbsp;&nbsp;|</a></li>
<li class=3D"last"><a href=3D"#" class=3D"disabled"><span>Menu
2=2E4</span>&nbsp;&nbsp;|</a></li>
<li class=3D"first"><a href=3D"#"><span><b>Menu
2=2E5</b></span></a></li>
</ul>
</li>

<li>
<a href=3D"#"><b>Menu 3&nbsp;&nbsp;|</b></a>
<ul id=3D"newmenu" class=3D"trois">
<li><a href=3D"#"><span>Menu 3.1</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 3.2</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 3.3</span>&nbsp;&nbsp;|</a></li>
<li class=3D"last"><a href=3D"#" class=3D"disabled"><span>Menu
3=2E4</span>&nbsp;&nbsp;|</a></li>
<li class=3D"first"><a href=3D"#"><span><b>Menu
3=2E5</b></span></a></li>
</ul>
</li>

</ul>
<br />
<br />

</body>
</html>
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
ASM
Bonjour à tous
je recherche à avoir une configuration à l'horizontale pour les menus
et sous menus.
En ce qui concerne le css, tout se passe bien (bien que mon code ne
soit pas tres propre, je le reconnais) sous firefox.


http://perso.wanadoo.fr/stephane.moriaux/internet/web_css/rollover/index
dans l'en-tete
dans l'exemple gris
la combine : en bas de page

<script type="text/javascript">
function hover(obj){
if(document.all){


alors là je suis pas d'accord du tout pour cette chose de document.all
j'ai au moins 2 autres navigateurs qui digèrent cette ignominie
et qui n'en n'ont pas besoin !

d'ailleurs ce n'est pas ici qu'il faut se poser cette question

UL = obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu = UL[0].style;
if(sousMenu.display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}
}


mais ici :

var ieúlse; /*@cc_on ie=true; @*/

function setHover(){


if(ie) {

LI = document.getElementById('menu').getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI[i].onmouseover = function(){
hover(this);
}
LI[i].onmouseout = function(){
hover(this);
}
}


}

}
</script>


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
ASM
Bonjour à tous
je recherche à avoir une configuration à l'horizontale pour les menus
et sous menus.
En ce qui concerne le css, tout se passe bien (bien que mon code ne
soit pas tres propre, je le reconnais) sous firefox.


non, ça ne passe pas impeccablement sous FireFox.

Il va faloir faire un sacré ménage dans tout ça.
J'ai un peu essayé, mais comme il y a éparpillé un peu partout les mêmes
classes avec des compléments, ou contradictions, ça met vite la zone.
J'abandonne donc du côté des CSS.

par contre, en ce qui concerne le javascript pour internet explorer, je
n'arrive pas a m'en sortir.


Ben ! vu comme les css sont entortillées, pas facile de savoir sur quoi
se baser pour intervenir. C'est quoi exactement qui fait se révéler les
sous-menus ?

Perso, pour IE, j'emploie ceci :

<script type="text/javascript">
/* javascript pour l'idiot d'Internet Explorer */
// is it IE ?
var ieúlse; /*@cc_on ie=true; @*/

function roll(quoi) {
var L = quoi.getElementsByTagName('UL')[0];
if(L) L.style.display = L.style.display==''? 'block' : '';
}

onload = function() { if(ie) {
var U = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0;i<U.length;i++) {
U[i].onmouseover = function() {roll(this);};
U[i].onmouseout = function() {roll(this);};
}
}
}
</script>

Mais ça ne résoud pas tout ...
Manifestement, bien que tu arrives peut-être (à force de triturages) à
obtenir ce que tu veux avec FF, tes css ne plaisent pas du tout à mon IE :-(


j'ai bien essayé de faire des recherches mais j'avoue que mon niveau
est trop limité.
le but etant d'obtenir le meme resultat sous explorer que sous firefox.


ben n'alors faut regarder ce que d'autres ont fait.

je vous envoie le code de la page que j'ai faite pour le menu.
n'hesitez pas à me donner des commentaires quant à comment faire pour
obtenir le meme resultat sur explorer avec le javascript que sur
firefox avec le css pur.


le javascript n'a rien à voir dans l'histoire (ou preque)
faut que tu défiloches tes css.

Commencer par :
- réaliser un lien stylé propre et sans span (c'est très possible)
puis
- seulement les menus
et regarder dans FF et IE et Safari et Opera et ... que ça colle
- puis ajouter les sous-menus (sans les cacher) du menu 1
et regarder que ça colle.
- enfin mettre en place le cachage qui n'est qu'un jeu d'enfant.
- puis le JS donné pour béquiler IE.


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
polo
Merci Stéphane pour tes réponses, conseils et le lien de ta page
perso.
je vais bosser sur un code css plus clean, et virer les span (je ne
savais pas qu'ils n'etaient pas clean)
pour le cachage, deux options : soit une balise display:none, soit un
positionnement relatif à -6000px par exemple. j'ai choisi la premiere,
c'est peut etre pas une bonne idee.
bon je nettoie et j'essaie ton code javascript
vraiment encore merci
P
Avatar
ASM
Merci Stéphane pour tes réponses, conseils et le lien de ta page
perso.
je vais bosser sur un code css plus clean, et virer les span (je ne
savais pas qu'ils n'etaient pas clean)


ce n'est pas tellement que ce n'est pas clean, c'est surtout que c'est
beaucoup de complications pour avoir un | de séparation, aisément
remplacées par une simple bordure


pour le cachage, deux options : soit une balise display:none,


oui, reste à savoir lequel de tes class ou éléments stylés a cette option

Pour le JS (special IE) je propose une variante qui ne mettra le
rollover que sur le ul#menu li
s'il a au moins un ul contenu
donc les ul#menu li ul li n'ont pas de rollover dans ce cas :

<script type="text/javascript">
/* javascript pour l'idiot d'Internet Explorer */
// is it IE ?
var ieúlse; /*@cc_on ie=true; @*/

function roll(quoi) {
var L = quoi.getElementsByTagName('UL')[0];
L.style.display = L.style.display==''? 'block' : '';
}

onload = function() { if(ie) {
var U = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0;i<U.length;i++)
if(U[i].getElementsByTagName('UL') &&
U[i].getElementsByTagName('UL').length>0)
{
U[i].onmouseover = function() {roll(this);};
U[i].onmouseout = function() {roll(this);};
}
}
}
</script>

chez moi çà fonctionne très bien et c'est très rapide.

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
polo
Merci encore Stephane
j'ai nettoyé le css, il en avait effectivement bien besoin. comme tu
me l'as conseillé, j'ai viré les span, et effectivement, il marche
très bien dans mon FF. même avec le | de séparation.

par contre, le javascript que tu m'as donné pour ma balise #menu li,
eh bien il fonctionne en block vertical plutot qu'horizontal, et il se
positionne au milieu du menu. Et j'avoue que je ne connais pas encore
bien le javascript pour pouvoir l'editer intelligemment. J'ai essayé
de remplacer le 'block' par 'inline' apres avoir fait quelques
recherches, mais en vain.

voici le nouveau code (avec ton javascript). (bien plus concis que le
premier)
n'hesite pas à me dire si tu as une idée pour adapter ton javascript
merci encore

<html>
<head>

<title></title>

<style type="text/css">
/*-------------------------------------------------------------*/

#menu{
margin:0px;
padding:0px;
list-style:none;
width:750;
background:#3c5279; /*#5f7eb3;*/
float:left;
font:0.9em Tahoma, Verdana, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
}

#menu li{
float:left;
display:block;
padding:2px 1px;
}
#menu li a{
display:inline;
padding:2px 6px;
color:#FFFFFF;
text-decoration:none;
}
#menu li a:hover{
color: orange;
}

#menu li ul{
display:none;
}
#menu li:hover ul{
display:block;
width:736px;
height: 25;
padding-top:10px;
padding:7px;
}

#menu ul{
position:absolute;
background:#CCCCCC;
list-style:none;
z-index:1;
}

.un{
margin:2px -1px;
}
.deux{
margin:2px -79px;
}
.trois{
margin:2px -157px;
}

#menu ul li{
position:relative;
float:none;
}

#menu ul li a{
display:inline;
color:#000000;
font:12px Tahoma, Verdana, Helvetica, sans-serif;
font-weight:bold;
}

ul#newmenu {
font-weight:bold;
color:#000000;
}
ul#newmenu li {
display: inline;
}
ul#newmenu li a:hover {
color: orange;
}

/*-------------------------------------------------------------*/
</style>

<script type="text/javascript">
/* javascript pour l'idiot d'Internet Explorer */
// is it IE ?
var ieúlse; /*@cc_on ie=true; @*/

function roll(quoi) {
var L = quoi.getElementsByTagName('UL')[0];
L.style.display = L.style.display==''? 'block' : '';
}

onload = function() { if(ie) {
var U = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0;i<U.length;i++)
if(U[i].getElementsByTagName('UL') &&
U[i].getElementsByTagName('UL').length>0)
{
U[i].onmouseover = function() {roll(this);};
U[i].onmouseout = function() {roll(this);};
}
}
}
</script>
</head>

<body>

<!-- menu customisé ******************************* -->
<ul id="menu">

<li>
<a href="#"><b>Menu 1</b></a>&nbsp;|
<ul id="newmenu" class="un">
<li><a href="#">Menu 1.1</a></li>&nbsp;|
<li><a href="#">Menu 1.2</a></li>&nbsp;|
<li><a href="#">Menu 1.3</a></li>&nbsp;|
<li><a href="#">Menu 1.4</a></li>&nbsp;|
<li><a href="#">Menu 1.5</a></li>
</ul>
</li>

<li>
<a href="#"><b>Menu 2</b></a>&nbsp;|
<ul id="newmenu" class="deux">
<li><a href="#">Menu 2.1</a></li>&nbsp;|
<li><a href="#">Menu 2.2</a></li>&nbsp;|
<li><a href="#">Menu 2.3</a></li>&nbsp;|
<li><a href="#">Menu 2.4</a></li>&nbsp;|
<li><a href="#">Menu 2.5</a></li>
</ul>
</li>

<li>
<a href="#"><b>Menu 3</b></a>&nbsp;|
<ul id="newmenu" class="trois">
<li><a href="#">Menu 3.1</a></li>&nbsp;|
<li><a href="#">Menu 3.2</a></li>&nbsp;|
<li><a href="#">Menu 3.3</a></li>&nbsp;|
<li><a href="#">Menu 3.4</a></li>&nbsp;|
<li><a href="#">Menu 3.5</a></li>
</ul>
</li>

</ul>
<br />
<br />

</body>
</html>
Avatar
ASM
Merci encore Stephane
j'ai nettoyé le css, il en avait effectivement bien besoin. comme tu
me l'as conseillé, j'ai viré les span, et effectivement, il marche
très bien dans mon FF. même avec le | de séparation.


Ha ! voilà ! on commence à y comprendre qque chose :-)

par contre, le javascript que tu m'as donné pour ma balise #menu li,
eh bien il fonctionne en block vertical plutot qu'horizontal,


pas chez moi

remède --> mettre :

#menu li ul { /* meme si c'est display: none
c'est ici qu'on style tout le block
display:none; et le 'none' est desactivé pour les tests */
width: 736px;
height: 25px; /* ici il te manquait l'unité */
padding: 7px; /* attention ! on met le padding général */
padding-top: 10px; /* puis le padding particulier */
}
#menu li:hover ul{
display: block;
}

et réviser les css pour que IE affiche bien les menus
(chez moi ils sont l'un sur l'autre)
et que les sous-menus se positionnent sous les menus

Bien entendu, en même temps on vérifie que çà fait bien pareil dans FF.

Quand ce sera OK remettre comme il faut :

#menu li ul {
display: none;
width: 736px;
height: 25px;
padding: 7px;
padding-top: 10px;
}
#menu li:hover ul {
display: block;
}

j'avoue que je ne connais pas encore
bien le javascript pour pouvoir l'editer intelligemment. J'ai essayé
de remplacer le 'block' par 'inline' apres avoir fait quelques
recherches, mais en vain.


non, non, c'est bien 'block' puisque indiqué de même dans la FdS :
#menu li:hover ul {
display: block;
}
Le JS ne fait que remplacer ce comportement par CSS.

n'hesite pas à me dire si tu as une idée pour adapter ton javascript


encore une fois : mon JS est bon :-)

merci encore


de rien, je te laisse faire avec tes CSS.

Si vraiment tu ne t'en sors pas avec les CSS vois ici :
news:fr.comp.infosystemes.www.auteurs
car maintenant on est hors charte.

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Bertrand B
Merci Stéphane pour tes réponses, conseils et le lien de ta page
perso.
je vais bosser sur un code css plus clean, et virer les span (je ne
savais pas qu'ils n'etaient pas clean)


ce n'est pas tellement que ce n'est pas clean, c'est surtout que c'est
beaucoup de complications pour avoir un | de séparation, aisément
remplacées par une simple bordure


pour le cachage, deux options : soit une balise display:none,


oui, reste à savoir lequel de tes class ou éléments stylés a ce tte option

Pour le JS (special IE) je propose une variante qui ne mettra le
rollover que sur le ul#menu li
s'il a au moins un ul contenu
donc les ul#menu li ul li n'ont pas de rollover dans ce cas :

<script type="text/javascript">
/* javascript pour l'idiot d'Internet Explorer */
// is it IE ?
var ieúlse; /*@cc_on ie=true; @*/

function roll(quoi) {
var L = quoi.getElementsByTagName('UL')[0];
L.style.display = L.style.display==''? 'block' : '';
}

onload = function() { if(ie) {
var U = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0;i<U.length;i++)
if(U[i].getElementsByTagName('UL') &&
U[i].getElementsByTagName('UL').length>0)
{
U[i].onmouseover = function() {roll(this);};
U[i].onmouseout = function() {roll(this);};
}
}
}
</script>

chez moi çà fonctionne très bien et c'est très rapide.

Pourquoi ne pas lui proposer le csshover.htc ?



Avatar
ASM

Pourquoi ne pas lui proposer le csshover.htc ?



(A) Paske je suis sur Mac :
-1- je ne sais donc pas ce qu'est ce *.htc (Windows only)
-2- mon IE est aussi interressé par le problème

(B) Son problème est un problème de CSS

--
Stephane Moriaux et son [moins] vieux Mac


Avatar
polo
Stéphane c'est super ! ca marche extra !!! vraiment merci.
j'ai changé comme tu me l'as dit les #menu li ul et #menu li:hover ul
; bravo
je n'aurais jamais penser creer le style dans un id qui commence par un
display: none

pour le positionnement, j'ai utilisé un test ie <!--[if lte IE 6]> et
j'ai changé les class .un, .deux et .trois

pour le csshover.htc, je l'ai essayé hier soir et ca marche, mais
c'est un peu lourd, et comme le javascript de Stephane marche
exactement de la meme facon, je le prefere.

une autre petite question stephane, tu vas dire que je suis casse
pieds...

mais maintenant que j'ai ce menu qui apparait correctement, est il
possible selon toi d'obtenir la fonctionnalité suivante : lorsque l'on
retire la souris du sous menu, celui ci disparait, ce qui est normal en
css pur, mais serait il possible d'avoir le dernier sous menu affiché,
rester, "coller" à sa place, meme lorsqu'on retire la souris de la
zone de sous menu ?
Avatar
ASM
pour le csshover.htc, je l'ai essayé hier soir et ca marche, mais
c'est un peu lourd, et comme le javascript de Stephane marche
exactement de la meme facon, je le prefere.


je veux !

une autre petite question stephane, tu vas dire que je suis casse
pieds...

mais maintenant que j'ai ce menu qui apparait correctement, est il
possible selon toi d'obtenir la fonctionnalité suivante : lorsque l'on
retire la souris du sous menu, celui ci disparait, ce qui est normal en
css pur, mais serait il possible d'avoir le dernier sous menu affiché,
rester, "coller" à sa place, meme lorsqu'on retire la souris de la
zone de sous menu ?


non, pas en CSS
et sinon, même en JS, quel en est l'interet ?

Bon, dans le code après onload = ....
tu peux essayer de virer ou annuler la ligne :
U[i].onmouseout = function() {roll(this);};

mais, en fait ça va cacader :-(


<script type="text/javascript">
/* javascript pour l'idiot d'Internet Explorer */
// is it IE ?
var ieúlse; /*@cc_on ie=true; @*/

function nomenu() {
var U = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0;i<U.length;i++)
if(U[i].getElementsByTagName('UL') &&
U[i].getElementsByTagName('UL').length>0)
U[i].getElementsByTagName('UL')[0].style.display = '';
}

function roll(quoi) {
nomenu();
quoi.getElementsByTagName('UL')[0].style.display = 'block';
}

onload = function() {
if(ie) /* supprimer cette ligne pour tous brouteurs */
{
var U = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0;i<U.length;i++)
if(U[i].getElementsByTagName('UL') &&
U[i].getElementsByTagName('UL').length>0)
U[i].onmouseover = function() {roll(this);};
}
}
</script>


Mais c'est très dommage de charger en JS un peu lourdingue
des navigateurs qui se débrouillent en CSS


--
Stephane Moriaux et son [moins] vieux Mac

1 2