Menu déroulant qui ne se déroule pas

**Pelote2012** · 20/02/2013, 12h32

Bonjour,

Ayant fait des remarques sur la structures pourrie généré par le composant menu de MS

J'essaie celui de jqueryUI

Code html :

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
102
103
104
105
106
107
108
109
110
111
<!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 id="ctl00_Head1">
    <script src="/script/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="/script/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
    <script src="/script/ModalPopupResult.js" type="text/javascript"></script>
    <script>        $(function () { $("#NavigationMenu").menu(); });  </script>
    <link href="/CSS/ui-lightness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" type="text/css" /><title>
	Accueil
</title><meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link id="ctl00_lnkCss" href="CSS/ConfMob.css" rel="stylesheet" type="text/css" /></head>
<body>
    <form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTMwNjIzNjgzNWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFF2N0bDAwJExvZ2luU3RhdHVzJGN0bDAxBRdjdGwwMCRMb2dpblN0YXR1cyRjdGwwM0kJ3vgOaHwvi78z3M2Y7AUwb93n+6zENuma6U3M1HXx" />
</div>
 
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/WebResource.axd?d=h48DFe8Kbot9mLoOT4kirSShad5xB6H-j16s4zDFgSBbYhUaQgbu_SEgFG2KHa8LAb60-t9eQQoE-t64PqUl3lXSuJJEPuioN7tPIuysRkw1&amp;t=634956729572066818" type="text/javascript"></script>
 
 
<script src="/ScriptResource.axd?d=frGR4UadezrPVVWRpDUEtoc1w0lWcmc1PtsEa11YmVVVUlzumdotoi-upntwHj4JgpAGLM0jqFuRIbwNeZipsUjLJv0_cKnCkKhJ1KQn0Cdn5TJicMj-w-H84QnwO4LyEfodc1XG0HlsLEBEjtvLP9u-dmr0prai0Kpl6kRWpzA3GOwv-LgRXfxXUyDHXp780&amp;t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Échec du chargement de l\u0027infrastructure ASP.NET Ajax côté client.');
//]]>
</script>
 
<script src="/ScriptResource.axd?d=YxCfqo9N_0SVCuTiS8embVdGBL56jkhz0EiLk62AQ-JdDxUIJcieouQAk9XDjzgMzoAWl4LEzVCUrwcs09nig5Ov09ktAJWw7GbMN5ytQLwn0s2if0J9FG6aDZbg9GcsfB8JWQwK49BVshuDkWp2xuBnVYnB2epue-hGnnorRAU0H6AbBz2SYMw26EL0Ktst0&amp;t=ffffffff940d030f" type="text/javascript"></script>
<div>
 
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKmwqRyAvj3tOMGEHO+ynuArvOjrqjKyYOzt4bNSh9flIuItHQWHw2DYWo=" />
</div>
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$SM', 'aspnetForm', ['tctl00$UP',''], [], [], 90, 'ctl00');
//]]>
</script>
 
    <div id="ctl00_UP">
 
            <div id="Page">
                <div id="Connexion">
                    Mon Compte :
                    <span id="ctl00_LoginName">Admin@configMobilier.fr</span>
                    |&nbsp;<a id="ctl00_LoginStatus" href="javascript:__doPostBack('ctl00$LoginStatus$ctl00','')">Déconnexion</a>
                </div>
                <div id="Header">
                    <div id="NomSite">
                        <img id="ctl00_ImgFT" src="Images/Quadria-Gris.jpg" style="border-width:0px;" />
                    </div>
                </div>
                <div id="Content">
                    <ul id="ctl00_NavigationMenu" class="menu_deroulant">
                        <li><a href="/Default.aspx" title="">Accueil</a></li>
                        <li><a href="/Societes/lst_Societe.aspx" title="">Sociétés</a></li>
                        <li><a href="#" title="">Base articles</a>
                            <ul>
                                <li><a href="/Articles/Edit_Grossistes.aspx">Grossistes</a></li>
                                <li><a href="/Articles/Edit_Composant.aspx">Composants</a></li>
                                <li><a href="/Articles/Edit_couleur.aspx">Coloris</a></li>
                                <li><a href="/Articles/Lst_Element.aspx">Elements</a></li>
                                <li><a href="/Articles/Lst_Article.aspx">Articles</a></li>
                                <li><a href="/Articles/Lst_Custom.aspx">Customs</a></li>
                                <li><a href="/Articles/Lst_Configuration.aspx">Configurations</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div id="Contenu">
                        <div id="c">
 
    <h1>
        <span id="ctl00_Contenu_lblTitre">Accueil</span>
    </h1>
 
 
                        </div>
                    </div>
                </div>
                <div id="Bottom">
                    <span id="ctl00_locCopright" class="lnk">Copyright 2013 xxx-</span>
                    - <a href="MailTO:MCO_Devs@quadria.fr" class="lnk">Nous contacter</a>
                </div>
            </div>
 
</div>
    <div id="MsgBack" title="Download complete">
        <div class='subcontent-box' id='Errortitre'>
        </div>
    </div>
    </form>
</body>
</html>

Code css :

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
/*MENU*/
/* On choisi la largeur de notre menu, et on répartit les éléments */
.menu_deroulant
{
    padding: 0;
    list-style-type: none;
    width: 400px;
    text-align: center;
    display: table;
    background-color: #FFCC66;
    background-image: -moz-linear-gradient(center top , #333333, #222222);
    background-repeat: repeat-x;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
    border-radius: 4px 4px 4px 4px;
    padding: 10px 0;
}
 
/* On place le texte de nos menu centré */
.menu_deroulant li
{
    display: table-cell;
    text-align: center;
}
 
.menu_deroulant li ul
{
    list-style-type: none;
    display: none;
    position: absolute;
    background-color: #EC8D00;
    margin: 10px 0;
    margin-left: 50px;
    padding-right: 50px;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 6px 6px;
    border-style: solid;
    border-width: 0 1px 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 
}
 
/* On remet le sous menu en vertical */
.menu_deroulant li ul li
{
    display: block;
    border: none;
}

La première bar appraît bien mais pas mes sous menu

**Pelote2012** · 20/02/2013, 15h31

Bon voilà une correction, mais du point de vue CSS, c'est pas encore ça

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function () {
 
        //Lorsqu'on entre dans le menu
        $('ul.menu_deroulant li').mouseenter(function(){
            $(this).find('ul:first').stop(true, true).slideDown();                                        
        });        
 
        // Lorsqu'on sort du menu
        $('ul.menu_deroulant li').mouseleave(function(){
            $(this).find('ul:first').stop(true, true).slideUp();                    
        });    
 
});

Code css :

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
/*MENU*/
/* On choisi la largeur de notre menu, et on répartit les éléments */
.menu_deroulant
{
    padding: 0;
    list-style-type: none;
    width: 400px;
    text-align: center;
    display: table;
    background-color: #FFCC66;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
    border-radius: 4px 4px 4px 4px;
    padding: 10px 0;
}
 
/* On place le texte de nos menu centré */
.menu_deroulant li
{
    display: table-cell;
    text-align: center;
    list-style-type: none;
}
 
.menu_deroulant li ul
{
    list-style-type: none;
    display: none;
    position: absolute;
    background-color: #EC8D00;
    margin: 10px 0;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 6px 6px;
    border-style: solid;
    border-width: 0 1px 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
 
/* On remet le sous menu en vertical */
.menu_deroulant li ul li
{
    display: block;
    border: none;
}
 
.menu_deroulant a
{
    line-height: 19px;
    padding: 10px 10px 11px;
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="menu_deroulant" id="NavigationMenu" runat="server">
                        <li><a href="/Default.aspx" title="">Accueil</a></li>
                        <li><a href="/Societes/lst_Societe.aspx" title="">Sociétés</a></li>
                        <li><a href="#" title="">Base articles</a>
                            <ul>
                                <li><a href="/Articles/Edit_Grossistes.aspx">Grossistes</a></li>
                                <li><a href="/Articles/Edit_Composant.aspx">Composants</a></li>
                                <li><a href="/Articles/Edit_couleur.aspx">Coloris</a></li>
                                <li><a href="/Articles/Lst_Element.aspx">Elements</a></li>
                                <li><a href="/Articles/Lst_Article.aspx">Articles</a></li>
                                <li><a href="/Articles/Lst_Custom.aspx">Customs</a></li>
                                <li><a href="/Articles/Lst_Configuration.aspx">Configurations</a></li>
                            </ul>
                        </li>
                    </ul>

**Pelote2012** · 20/02/2013, 17h04

Code css :

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
ul
{
    padding-left: 0px;
}
li
{
    padding-left: 0px;
}
.menu_deroulant
{
    padding: 0;
    list-style-type: none;
    text-align: center;
    display: table;
    background-color: #FFCC66;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
    border-radius: 4px 4px 0 0;
    padding: 10px 0;
    z-index: 1;
    width:380px;
}
 
/* On place le texte de nos menu centré */
.menu_deroulant li
{
    display: table-cell;
    text-align: center;
    list-style-type: none;
    width: 125px;
}
 
.menu_deroulant li ul
{
    list-style-type: none;
    display: none;
    position: absolute;
    background-color: #EC8D00;
    margin: 10px 0;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 6px 6px;
    border-style: solid;
    border-width: 0 1px 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
 
/* On remet le sous menu en vertical */
.menu_deroulant li ul li
{
    display: block;
    border: none;
}
 
.menu_deroulant a
{
    line-height: 19px;
    padding: 10px 10px 11px;
}

et voilà

Menu déroulant qui ne se déroule pas [UI]

jQuery

Discussions similaires

Partager

Partager