Discussion :

[maximenet]

Bonjour,

J'aimerai pouvoir enlever le border-bottom de mon Titre de menu qd j'ai dérouler son sous menu.

Voilà mon code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
		<div class="top_menu" id="left_header">
			<!--<img src="style/images/style1/pro5.jpg">-->
			<dl>
				<dt onMouseOver="javascript:montre('smenu6');"><a href="#"><span id="smenu6a">L'entreprise</span></a></dt>
				<dd id="smenu6">
					<ul>
						<li><a href="#">Présentation</a></li>
						<li><a href="#">Nous Contacter</a></li>
						<li><a href="#">Recrutement</a></li>
					</ul>
				</dd>
			</dl>
		</div>

donc là j'ai pas mis tout mon code HTML juste un bout.

Voilà mon code JavaScript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (id == 'close')
{
	for (var i = 1; i<=7; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
}
else
{
var d = document.getElementById(id);
var id_dt = id +'a';
var da = document.getElementById(id_dt);
	for (var i = 1; i<=7; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		if (document.getElementById('smenu'+i+'a')) {document.getElementById('smenu'+i+'a').style.background='#FFFFFF';}
	}
if (d) {d.style.display='block';}
if (da) {da.style.background='#FF00FF';}

Voilà donc en faite là j'ai laisser style.background dans mon javascript qui marche tres bien mais moi en faite j'aimerai que çà me face border-bottom='0';

qd je fait çà çà me fait une erreur.

[Debernad]

Car le nom de la variable pour ton style est "borderBottom" et non "border-bottom" ...
Pour les nom de variables de style CSS, tous les paramétres contenant un mot composé séparé par un tiret dans leur nom, sont transformés en un seul mot dont la premiére lettre du deuxiéme terme est en majuscule ...

[maximenet]

Merci pour ton conseil je ne le savais pas.

bon j'ai remplacer la propriété de style donc maintenant çà me fait plus d'erreur mais çà ne me fait rien du tout.

j'arrive pas a résoudre mon pb.

[maximenet]

en faite je crois que mon erreur viens du faite qu'on ne peut pas poser de border a id="smenu6a"

Qu'est ce qu'il faut modifier dans le style CSS pour pouvoir attribuer des border a un id ?

[Jorus]

Salut,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<type_de_balise>#<id_de_la_balise> {
    <style_que_tu_veux>
}

dans ton cas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
span#smenu6a {
    border-bottom: none;
}

@+
Jorus

[maximenet]

Euhh Jorus jcrois que c'est pas la réponse a mon probleme ou alors jsuis carément a l'ouest

[Jorus]

Euhh Jorus jcrois que c'est pas la réponse a mon probleme ou alors jsuis carément a l'ouest

yop, je crois que j'ai pigé maintenant. Tu veux le faire en javascript...
Désolé...
Essaye cette propriété

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 .style.borderBottomStyle

Je m'éloigne encore là ?

[maximenet]

non mais en faite comme je l'ai dit un peut plus haut, je ne peut pas mettre de mordure sur mon id="smenu6a"

meme qd je le fait manuellement dans ma feuille de style çà me le prend pas en compte.

[Jorus]

qu'as-tu mis dans ta feuille de style ?

[maximenet]

Bon la jtravail sur une autre piste, si j'arrive a faire qlq chose de correct je reviens donner ma soluce

[Debernad]

Il faut faire cela pour afficher ton bord et l'effacer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
// pour afficher le bord de ton menu
menu.style.borderBottom="solid black 3";
// pour effacer le bord de ton menu
menu.style.borderBottom="solid black 0";

[maximenet]

Bon je vous donne ma soluce , elle pourra peut etre servir a d'autre:
ma feuille de style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.border_bottom a
{
	border:4px solid #FF0000;
}
.border_no_bottom a
{
	border:4px solid #FF0000;
	border-bottom:0;
}

mon code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
			<dl>
				<dt onMouseOver="javascript:montre('smenu6');" id="smenu6a" class="border_bottom"><a href="#">L'entreprise</a></dt>
				<dd id="smenu6">
					<ul>
						<li><a href="#">Présentation</a></li>
						<li><a href="#">Nous Contacter</a></li>
						<li><a href="#">Recrutement</a></li>
					</ul>
				</dd>
			</dl>

et mon code Javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
<!--
function sous_menu(param,valid)
{
var enf = document.getElementById(param);
if(valid=='border_bottom')
	enf.className="border_bottom";
else if (valid=='border_no_bottom')
	enf.className="border_no_bottom";
}
//-->
<!--
function montre(id) {
if (id == 'close')
{
	for (var i = 1; i<=7; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		sous_menu('smenu'+i+'a','border_bottom');
	}
}
else
{
var d = document.getElementById(id);
var id_dt = id +'a';
var da = document.getElementById(id_dt);
	for (var i = 1; i<=7; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		sous_menu('smenu'+i+'a','border_bottom');
	}
if (d) {d.style.display='block';}
sous_menu(id+'a','border_no_bottom');
}
}
//-->
</script>

sachant que pour mon code HTML normalement j'ai 7 categorie de menu et donc le chiffre qu'il y a dans smenu6 et smenu6a varie entre smenu1 - smenu1a et smenu7 - smenu7a

bref en faite je c'est pas si mon code ests optimiser ou si j'aurai pas pu faire plus simple mais là en tout cas çà donne exactement le résultat que je voulais

PS: dans la fonction javascript pour ce qui est du test pour le 'close' c'est en faite que j'ai mis aussi un onClick dans le body en appellant cette fonction avec comme parametre close pour justement refermer le sous menu si la personne click ailleurs


Si qlq'un veut plus d'infos la dessus je suis pret a expliquer davantage