Pseudo frame + menu déroulant = sous-menu caché
Bonjour à tous,
Je travaille actuellement sur le développement d'une application Web.
Je voudrais que le menu principal soit fixe. J'utilise donc des pseudos frames avec des div.
Je me suis fortement inspiré de ce site : http://www.dynamicdrive.com/style/la...frames-layout/
Le problème, c'est que mon menu principal est un menu déroulant, et que les sous-menus ne s'affichent pas (caché par les autres pseudos frames).
Comment y remédier ?
Voici mon CSS "LAYOUT":
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
| /* LAYOUT */
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#frame_content_top {
position: absolute;
top: 0;
left: 0px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
/*height: 125px;*/ /*Height of top frame div*/
height:25px;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
z-index: 1;
}
#frame_content_left {
position: absolute;
top: 125px; left : 0; width : 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
background-image: url(../images/content_menu_bg.png) !important;
background-position: right top;
background-repeat: repeat-y;
left: 0;
width: 200px;
}
#frame_content_bottom {
position: absolute;
top: auto;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
bottom: 0;
right: 0;
height: 50px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
color: grey;
}
#content_container {
position: fixed;
top: 125px; /*Set top value to HeightOfTopFrameDiv*/ left : 200px;
/*Set left value to WidthOfLeftFrameDiv*/
right: 0;
bottom: 30px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/ right : 0;
bottom : 30px; /*Set bottom value to HeightOfBottomFrameDiv*/ overflow
: auto; background : #fff;
z-index: 1;
} |
Voici mon CSS "MENU":
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
| #main_menu,
#main_menu ul /* Liste */ {
padding: 0; /* pas de marge intérieure */
margin: 0; /* ni extérieure */
list-style: none; /* on supprime le style par défaut de la liste */
line-height: 21px; /* on définit une hauteur pour chaque élément */
text-align: center;
/* on centre le texte qui se trouve dans la liste */
}
#main_menu /* Ensemble du menu */ {
font-weight: bold; /* on met le texte en gras */
font-family: Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size: 12px; /* hauteur du texte : 12 pixels */
}
#main_menu a /* Contenu des listes */ {
display: block;
/* on change le type d'élément, les liens deviennent des balises de type block */
padding: 0; /* aucune marge intérieure */
background: #000; /* couleur de fond */
color: #fff; /* couleur du texte */
text-decoration: none;
/* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width: 144px; /* largeur */
}
#main_menu a:hover {
color: #000;
background: #fff;
}
#main_menu li /* Elements des listes */ {
float: left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right: 1px solid #fff;
/* on met une bordure blanche à droite de chaque élément */
}
#main_menu li.selected /* Elements des listes */ {
color: red;
border-right: 1px solid red;
border-bottom: 3px solid red;
/* on met une bordure rouge en bas de l'élément sélectionné */
}
#main_menu li.right /* Elements des listes */ {
float: right;
/* pour IE qui ne reconnaît pas "transparent" */
border-right: 1px solid #fff;
/* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #main_menu li {
border-right: 1px solid transparent;
/* on met une bordure transparente à droite de chaque élément */
}
#main_menu li ul /* Sous-listes */ {
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#main_menu li ul li /* Éléments de sous-listes */ {
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top: 1px solid #fff;
/* on met une bordure blanche en haut de chaque élément d'une sous liste */
} |
Mon Html :
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
| <div id="main_container">
<!-- PSEUDO FRAME TOP -->
<div id="frame_content_top">
<ul id="main_menu">
<li>
<a href="/mon_appli/">Dashboard</a>
</li>
<li class="selected">
<a href="/mon_appli/projects/" class="selected">
Projects
</a>
<ul>
<li>
<a href="/mon_appli/projects/project1/">
project1
</a>
</li>
<li>
<a href="/mon_appli/projects/project2/">
project2
</a>
</li>
</ul>
</li>
<!-- etc ... -->
</ul>
</div>
<!-- PSEUDO FRAME LEFT -->
<div id="frame_content_left">
<ul>
<li class="selected">
<a href="/mon_appli/projects/project1/">
Project
</a><br/>
</li>
<li>
<a href="/mon_appli/projects/project1/action1/">
action1
</a><br/>
</li>
<li>
<a href="/mon_appli/projects/project1/action2/">
action2
</a><br/>
</li>
<!-- etc ... -->
</ul>
</div>
<!-- PSEUDO FRAME CONTENT -->
<div id="content_container">
<div id="content">
<div class="innertube">
CONTENU
</div>
</div>
</div>
<!-- PSEUDO FRAME BOTTOM -->
<div id="frame_content_bottom">
<div class="innertube">
<center>FOOTER</center>
</div>
</div>
</div> |
