Discussion :

[Heilong]

Bonjour à tous,

J'ai repris un tutoriel trouver sur un site web pour réaliser un menu contenant des sous menus, et utilisant un effet Slide de mootools 1.2.

Ce menu est fait avec des listes HTML, et lorsque l'on survole un élément du menu, le sous menu correspondant déroule en mode vertical.

J'aimerais que ce menu se déroule mais en mode horizontal, je ne sais pas trop ou modifier, CSS ou Javascript.

Voici le code pour mieux voir :

HTML :

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
 
<div id="menu-container">    
        <ul id="drop_down_menu">
            <li class="menu"><a href="#">HOME</a>
                <ul class="links">
                    <li><a href="#">LINK 1</a></li>
                    <li><a href="#">LINK 2</a></li>
                </ul>
            </li>
            <li class="menu"><a href="#">FEATURES</a>
                <ul class="links">
                    <li><a href="#">LINK 1</a></li>
                    <li><a href="#">LINK 2</a></li>
                    <li><a href="#">LINK 3</a></li>
                </ul>
 
            </li>
            <li class="menu"><a href="#">BUY</a>
                <ul class="links">
                    <li><a href="#">LINK 1</a></li>
                    <li><a href="#">LINK 2</a></li>
                    <li><a href="#">LINK 3</a></li>
                    <li><a href="#">LINK 4</a></li>
 
                </ul>
            </li>
            <li class="menu"><a href="#">SUPPORT</a>
                <ul class="links">
                    <li><a href="#">LINK 1</a></li>
                    <li><a href="#">LINK 2</a></li>
                </ul>
            </li>
 
        </ul>
    </div>

CSS :

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
 
#menu-container 
{
    font-size:11px;
    width:1024px;
    height:40px;
    background-color:#2790CA;
}
 
#drop_down_menu
{
    text-align:left;
    list-style-type:none;
    text-align:center;
    float:right;
}
 
#drop_down_menu li
{    
    background-color:#2790CA;
    width:150px;
    float:left;
}
 
#drop_down_menu li a
{
    font-size:12px;
    font-weight:bold;
    color:#FFFFFF;
    cursor:pointer;
    text-decoration:none;
}
 
 
#drop_down_menu li ul
{
    margin:0px;
    padding:0px;
    list-style-type:none;
    margin-top:10px;
}
 
#drop_down_menu li ul li 
{
    display:block;
    float:none;
    clear:both;
    padding-top:10px;
}
 
#drop_down_menu li ul li a
{
    color:#FFFFFF;
    font-weight:normal;
    text-decoration:none;
    display:block;
}
 
#drop_down_menu li ul li a:HOVER
{
    text-decoration:underline;
    color:#CCCCCC;
}

JS :

Code js :

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
    window.addEvent('domready', function(){
        $('drop_down_menu').getElements('li.menu').each( function( elem ){
            var list = elem.getElement('ul.links');    
            var myFx = new Fx.Slide(list).hide();            
            elem.addEvents({
                'mouseenter' : function(){                     
                    myFx.cancel();
                    myFx.slideIn();                    
                },
                'mouseleave' : function(){ 
                    myFx.cancel();
                    myFx.slideOut();                    
                }
            });    
        })
    });

A cela s'ajoute la librairie mootools 1.2.
Mon but est que le sous menu correspondant au menu sur lequel la souris est positionné déroule horizontalement, les sous menu les uns à côté des autres.

Merci de l'aide,

[Kerod]

As-tu essayé en mettant un display:inline à tes li du sous-menu ?

[Heilong]

Bonjour,

J'ai modifié cette partie du code CSS :

Code :

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

1
2
3
4
5
6
7
8
 
#drop_down_menu li ul li 
{
    display:inline;
    float:none;
    clear:both;
    padding-top:10px;
}

Le menu est toujours déroulant verticalement, il y a juste que l'espace (padding-top:10px) n'existe plus entre les liens.

[Kerod]

Salut,

Maintenant il faudrait que tu mettes un position:absolute au ul.links pour sortir du flux du li parent

[Heilong]

Bonjour,

J'ai rajouté le code suivant :

Code :

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

1
2
3
4
5
 
ul.links
{
	position:absolute;
}

Au passage de la souris sur les menus, les sous menu ne fonctionnent plus, aucun menu ne se déroule.