plugin superfish, impossible de le faire fonctionner

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'en ai (presque) honte, mais je n'arrive pas à faire fonctionner superfish pour mon menu déroulant.

Voici le code complet :

Code:

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
 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 
    <link rel="stylesheet" type="text/css" media="screen" href="App_Themes/Defaut/superfish.css" /> 
    <script type="text/javascript" src="Scripts/jquery/jquery-1.4.js"></script> 
    <script type="text/javascript" src="Scripts/jquery/superfish.js"></script> 
 
 
    <script type="text/javascript"> 
 
        $(document).ready(function(){ 
        $("ul.sf-menu").superfish(); 
        }); 
 
    </script>     
 
 
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul class="sf-menu">
          <li>menu 1</li>
          <li>menu 2
             <ul>
                <li>Sous menu 2.1</li>
                <li>Sous menu 2.2</li>
             </ul>
          </li>
          <li>menu 3</li>
          <li>menu 4
             <ul>
                <li>Sous menu 4.1
                   <ul>
                      <li>Sous sous menu 4.1.1</li>
                      <li>Sous sous menu 4.1.2</li>
                      <li>Sous sous menu 4.1.3</li>
                   </ul>
                </li>
                <li>Sous menu 4.2</li>
             </ul>
          </li>
          <li>menu 5</li>
       </ul> 
        </div>    
    <div>
        <asp:ContentPlaceHolder id="Main" runat="server"></asp:ContentPlaceHolder>
    </div>
 
    </form>
</body>
</html>

Les fichiers sont bien en place (js, css, images). J'utilise les versions les plus récentes et compatibles des .js

Au final, j'obtiens ceci (les menus se déroulent partiellement, la petite flèche indiquant le sous menu n'est pas là, etc...)

Pièce jointe 58162

Avez vous une idée ? Merci beaucoup !
T.

02/02/2010, 13h01
Sourrisseau

Essaye toujours

de changer la version de jquery et de mettre la version 1.3.2. Peut-être y a t il une incompatibilité avec la dernière version de jquery.

Dis moi si cela a résolu le problème .
02/02/2010, 13h43
tiboleo

J'ai essayé mais le problème ne change pas.
T.

Bonsoir.

Chaque élément de la liste doit contenir un lien, exemple :

Code:

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
<ul class="sf-menu">
	<li>
		<a href="#">menu item 1</a>
	</li>
	<li>
		<a href="#">menu item 2</a>
		<ul>
			<li>
				<a href="#">Sous menu 2.1</a>
			</li>
			<li>
				<a href="#">Sous menu 2.2</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">menu 3</a>
	</li>
	<li>
		<a href="#">menu 4</a>
		<ul>
			<li>
				<a href="#">Sous menu 4.1</a>
				<ul>
					<li>
						<a href="#">Sous sous menu 4.1.1</a>
					</li>
					<li>
						<a href="#">Sous sous menu 4.1.2</a>
					</li>
					<li>
						<a href="#">Sous sous menu 4.1.3</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Sous menu 4.2</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">menu 5</a>
	</li>
</ul>

03/02/2010, 08h41
tiboleo

Bonjour et merci,

J'ai fait la modif' mais là encore, le problème demeure.
Incompréhensible...

T.
03/02/2010, 21h37
danielhagnoul

Bonsoir.

Le fichier exemple fourni avec le plugin et une copie du fichier exemple modifié avec votre menu fonctionnent parfaitement chez moi.

Je vous conseille de vérifier tous vos liens (css, js) et de contrôler avec Firebug, en dernier ressort de tester en remplaçant le contenu de votre fichier par celui du fichier exemple. Le fait que vous travaillez dans un environnement ASP.NET n'est peut-être pas sans conséquence.

Bonjour.

Pas de mieux...

Le plugin Superfish ne fonctionne toujours pas.
Sur le code "test" ci dessous, il y a 2 autres plugins :

corner.jquery : fonctionne
formToWizard : ne fonctionne pas

Code:

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
102
103
104
105
106
107
108
109
110
111
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Accueil.aspx.cs" Inherits="TestsGraphiques.Accueil" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="App_Themes/Defaut/Defaut.css"/>
    <link type="text/css" rel="stylesheet" href="App_Themes/Defaut/superfish-navbar.css"/>
    <link type="text/css" rel="stylesheet" media="screen" href="App_Themes/Defaut/superfish.css"/>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="Scripts/jquery.corner.js" type="text/javascript"></script>
    <script src="Scripts/superfish/jquery.hoverIntent.js" type="text/javascript"></script>
    <script src="Scripts/superfish/superfish.js" type="text/javascript"></script>   
    <script type="text/javascript" src="Scripts/formToWizard.js"></script> 
 
     <script type="text/javascript">
 
         $jQuery(document).ready(function() {
        $("ul.sf-menu").superfish();
    });
 
    jQuery(document).ready(function() {
        $('#monDiv').corner();
    });
 
    $(document).ready(function() {
        $("#Etape").formToWizard();
    });
    </script>
 
 
</head>
<body>
    <form id="Etape" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
      <div">
        <ul class="sf-menu">
	        <li>
		        <a href="#">menu item 1</a>
	        </li>
	        <li>
		        <a href="#">menu item 2</a>
		        <ul>
			        <li>
				        <a href="#">Sous menu 2.1</a>
			        </li>
			        <li>
				        <a href="#">Sous menu 2.2</a>
			        </li>
		        </ul>
	        </li>
	        <li>
		        <a href="#">menu 3</a>
	        </li>
	        <li>
		        <a href="#">menu 4</a>
		        <ul>
			        <li>
				        <a href="#">Sous menu 4.1</a>
				        <ul>
					        <li>
						        <a href="#">Sous sous menu 4.1.1</a>
					        </li>
					        <li>
						        <a href="#">Sous sous menu 4.1.2</a>
					        </li>
					        <li>
						        <a href="#">Sous sous menu 4.1.3</a>
					        </li>
				        </ul>
			        </li>
			        <li>
				        <a href="#">Sous menu 4.2</a>
			        </li>
		        </ul>
	        </li>
	        <li>
		        <a href="#">menu 5</a>
	        </li>
        </ul> 
 
        </div>    
        <br />
        <div id="monDiv" style="width:400px; height:400px; background-color:Gray">
        </div>
 
            <fieldset>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            </fieldset>
            <fieldset>
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>            
            </fieldset>
            <fieldset>
                <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
            </fieldset>        
 
    <asp:Button ID="Button1" runat="server" Text="Button" />                                                                        
 
    </form>
</body>
</html>

Si l'un de vous a une idée...

Merci beaucoup en tout cas !
T.

09/02/2010, 15h41
tiboleo

Bon, j'ai trouvé (et naturellement j'ai honte...:()
C'est Defaut.css qui faisait parasite avec superfish.css

Pour formToWizard, je rédige un autre post.
T.