problème menu javascript / css

**calisca** · 30/07/2008, 16h14

Bonjour à tous
Voilà je suis entrain de réaliser un site où je dois disposer d'un menu principal qui se déroule en sous-menu et en sous-sous menu.

J'ai réussi à coder qqch de fonctionnel mais je rencontre 2 problèmes...
1) j'ai un texte de menu qui est trop long (tiendrait idéalement sur 3 lignes) mais je ne sais pas comment m'y prendre pour faire un seul "bouton multiligne". Si je fais un "Enter" dans mon texte, rien ne se passe (logique me direz-vous...) et je ne vois vraiment pas quoi faire d'autre... là je sèche !

2) lorsque la souris ne pointe nul part sur le menu, je souhaiterais que le dernier élément sélectionné ne soit plus surligné.

J'espère que qqun aura la solution ou tout du moins une ébauche d'idée à mes problèmes... D'avance un grand merci !

Voilà le code html:

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
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
 
<body bgcolor="B2B9C2">
  <title></title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="Robots" content="follow" />
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />
 
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
 <!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
 
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
    @import "menuv.css";
</style>
<div id="Layer1" style="position:absolute; left:370px; top:149px; width:149px; height:403px; z-index:1">
<ul id="menu">
    <li><a href="#menu1">menu 1</a>
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a>
                <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a>
                        <ul>
                            <li><a href="#">élément 1</a></li>
                            <li><a href="#">élément 2</a></li>
                            <li><a href="#">élément 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
 
      <li><a href="#">élément 3</a></li>
 
      <li><a href="#">élément 4</a> 
        <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#menu2" >menu 2</a>	
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
        </ul>
    </li>
    <li><a href="#menu3" >menu 3</a>	
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
        </ul>
    </li>
</ul>
</div>
<script type="text/javascript">
    initMenu();
</script>
<table width="2%" height="33" border="0" align="center">
  <tr> 
	<td rowspan="2" ALT="" bgproperties="fixed"><img src="site.jpg" width="1049" height="737" /></td>
  </tr>
</table>
</body>
</html>

voici le 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
.menu{
    position:absolute;
    /* solve a Opera7/IE display bug */
    width:152px;
    width/**/:150px;
    border-top: 0px #000 solid;
    border-left: 0px #000 solid;
    border-right: 0px #000 solid;
    margin:0;
    padding:0;
    }
 
.menu span{
    display:none;
    }
 
.menu ul{
    border-top: 0px #000 solid;
    border-left: 0px #000 solid;
    border-right: 0px #000 solid;
    margin:0;
    padding:0;
    position:absolute; /* important */
    width:152px;
    width/**/:150px;
    }
 
.menu li ul{
    visibility:hidden;
    }
 
/*distance sous menu par rapport au menu principal*/            
.menu li ul{
    margin-left:150px; /* be careful */
    margin-top:-25px;
    }
 
.menu a{
    text-align:center;
    background-color: #B6BDC6;
    color:#3F536A;
    text-weight:bold;
    display:block;
    width:150px;	/*largeurs menus*/
    border-bottom: 0px #000 solid;
    text-decoration:none;
    margin:0;
    padding: 3px 0 3px 0; /* em units can creat little graphic bug in mozilla */
    }
 
.menu a:hover{
    background-color: #A3A9B1;
    }
 
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #696E75;
}
 
.menu span{
    /* hide some accessibility stuff */
    display:none;
    }
 
.menu li{
    width:150px;
    display:block;    
    float:left;  
    list-style:none;
    margin:0;
    padding:0;
    }
 
/* IE PC selector */
* html .menu li {
    display:inline; /* solve a IE PC list bug */
    float:none; /* solve a IE5 clav nav bug */
    }
 
a.linkOver{
    background-color: #838B93;
    }

**rems033** · 30/07/2008, 19h21

tu as essayé avec un <br /> pour retourner à la ligne au sein de la balise <a></a> ?

problème menu javascript / css

CSS

Discussions similaires

Partager

Partager