menu jquery et declenchement par mouseover

**alen22** · 22/07/2012, 18h18

salut,

j'utilise un menu avec jquery dans ma page web en jsp

mais mon problème avec ce menu est quant je glisse le curseur dans le menu une partie disparaitre et elle revient dés que je deplace le curseur en dehors de menu

dés départ le menu occupe toute la largeur de la page jsp mais quant je glisse le curseur dans le menu une partie disparaitre ( la partie entre le troisième menu (retrai) et le reste de la page

je veux fixer le menu pour qu'il prend toujours la largeur de la page quelque soit glisser ou non le curseur dans le menu

mon code est le suivant :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TTNCorresspendance</title>
<script language="javascript"  src="/ProjetVrai/include/jquery-1[1].2.6.js"></script>
<%-- <script language="javascript"  src="jquery/jquery-1[1].2.6.js"></script> --%>
<style>
#menu{ width:900px;  text-align: center; list-style-type:none; margin:0 }
#menu  li.sub{background:#1073B4;border-right:1px  solid; border-left-color:#FFFFFF; }
#menu li{ background: #127EC7; padding:0; margin:1px 1px 0px 0; position:relative;    }
#menu li a,#menu li{ list-style-type:none; float:left; width:120px; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; line-height:25px; font-size:12px; height:25px; font-weight:bold; color:#FFFFFF }
#menu ul{ padding:0; margin:0; display:block; background:#FFFFFF; position:absolute ; left:0; top:25px; display:none; width:110px} 
#menu  li a:hover{ background:#127EC7};
 
</style>
<script language="javascript">
 
function afficher(){
$('#sousmenu').show("slow");
$('#sousmenu1').hide("slow");
$('#sousmenu2').hide("slow");
$('#sousmenu3').hide("slow");
//document.getElementById('sousmenu').style.display='block';
}
 
function cacher(){
$('#sousmenu').hide("slow");
$('#sousmenu1').hide("slow");
$('#sousmenu2').hide("slow");
$('#sousmenu3').hide("slow");
//document.getElementById('sousmenu').style.display='none';
}
 
 
 
 
function afficher1(){
$('#sousmenu1').show("slow");
$('#sousmenu').hide("slow");
$('#sousmenu2').hide("slow");
$('#sousmenu3').hide("slow");
//document.getElementById('sousmenu').style.display='block';
}
 
 
 
function afficher2(){
$('#sousmenu2').show("slow");
$('#sousmenu1').hide("slow");
$('#sousmenu').hide("slow");
$('#sousmenu3').hide("slow");
//document.getElementById('sousmenu').style.display='block';
}
 
 
 
function afficher3(){
$('#sousmenu3').show("slow");
$('#sousmenu1').hide("slow");
$('#sousmenu2').hide("slow");
$('#sousmenu').hide("slow");
//document.getElementById('sousmenu').style.display='block';
}
 
 
document.onclick=cacher;
</script>
 
</head>
<body>
<table style="width: 100%;"  align="center" >
 
  <tr style=" width : 1101px;" bgcolor="#1073B4">
    <td width="660" bgcolor="#1073B4" colspan="2">
	<UL id="menu" style="text-align: center;">
        <LI class="sub" onmouseout="cacher()" onMouseOver="cacher()"><a  href="#">Acceuil</a></LI>
        <LI class="sub"><a  href="#"  onMouseOver="afficher2()">facture
        <UL id="sousmenu2">
            <LI  ><a href="#">nouvelle facture</a></LI>
            <LI><a href="#" >Liste facture</a></LI>
          </UL>
        </LI>
        <LI class="sub"  ><a  href="#"  onMouseOver="afficher3()">retrai</a>
        <UL id="sousmenu3">
 
            <LI><a  href="#">retrai</a></LI>
          </UL>
        </LI>
 
 
    </UL></td>
  </tr>
 
 
</table>
</body>
</html>

**NoSmoking** · 22/07/2012, 21h35

Bonsoir,

Code html :

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

1
2
<script language="javascript"  src="/ProjetVrai/include/jquery-1[1].2.6.js"></script>
<%-- <script language="javascript"  src="jquery/jquery-1[1].2.6.js"></script> --%>

utile de le mettre 2 fois ?

<script type="text/javascript"> serait de meilleur aloi voire <script> tout cours.

Tu comptes dupliquer ta fonction function afficher() à chaque ajout ?

- Regardes du coté des sélecteurs en utilisant la class des éléments à trouver, par exemple
- Regardes du coté de each()

menu jquery et declenchement par mouseover

jQuery

Discussions similaires

Partager

Partager