effetto a passaggio su menu orizzontale

**spawn88** · 16-04-2012, 09:29

Buongiorno a tutti,
ho creato questo menu:

codice:

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5 <title></title>
6 <link rel="stylesheet" href="menu_style01.css" type="text/css" />
7 </head>
8 <body>
9 

10 

11 <div class="Hdropdown_red_tab__menu">
12 <ul>
13[*]<div style="margin-top:-15px;">[img]LOGO03.png[/img]</div>
14[*]Inserimento
15 <ul>
16[*]<a href="clipolform.php">Inserimento cliente e
polizza</a>
17[*]Inserimento Cliente
18[*]Inserimento Polizza
19[*]Inserimento Appendice
20[*]Inserimento Sinistro
21[/list]
22 
23[*]Visualizza
24 <ul>
25[*]Visualizza Polizza
26[*]Visualizza Appendice
27[*]Visualizza Sinistro
28[/list]
29 
30[*]Modifica
31 <ul>
32[*]Modifica Cliente
33[*]Modifica Polizza
34[*]Modifica Appendice
35[*]Modifica Sinistro
36[/list]
37 
38[/list]
39
40 </body>
41 </html>

colegato al seguente file css:

codice:

1 .Hdropdown_red_tab__menu{
2 border:none;
3 border:0px;
4 margin:-29px;
5 padding:0px;
6 font-family:verdana,geneva,arial,helvetica,sans-serif;
7 font-size:14px;
8 font-weight:bold;
9 color:8e8e8e;
10 }
11 .Hdropdown_red_tab__menu ul{
12 background:url(images/red_tab_dropdown_menu.gif) top left repeat-x;
13 height:43px;
14 list-style:none;
15 margin:0;
16 padding:0;
17 }
18 .Hdropdown_red_tab__menu li{
19 float:left;
20 padding:0px 8px 0px 8px;
21 }
22 .Hdropdown_red_tab__menu li a{
23 color:#666666;
24 display:block;
25 font-weight:bold;
26 line-height:43px;
27 padding:0px 25px;
28 text-align:center;
29 text-decoration:none;
30 }
31 .Hdropdown_red_tab__menu li a:hover{
32 color:#000000;
33 text-decoration:none;
34 }
35 .Hdropdown_red_tab__menu li ul{
36 background:#FFFFFF;
37 border-left:1px solid #003366;
38 border-right:1px solid #003366;
39 border-bottom:0px solid #003366;
40 display:none;
41 height:auto;
42 filter:alpha(opacity=95);
43 opacity:0.95;
44 position:absolute;
45 width:225px;
46 z-index:200;
47 }
48 .Hdropdown_red_tab__menu li:hover ul{
49 display:block;
50 }
51 .Hdropdown_red_tab__menu li li {
52 display:block;
53 float:none;
54 padding:0px;
55 width:225px; border-bottom:solid 1px #003366;
56 }
57 .Hdropdown_red_tab__menu li ul a{
58 display:block;
59 font-size:12px;
60 font-style:normal;
61 padding:0px 10px 0px 15px; line-height:30px;
62 text-align:left;
63 }
64 .Hdropdown_red_tab__menu li ul a:hover{
65 background:#003366;
66 color:#FFFFFF;
67 opacity:1.0;
68 filter:alpha(opacity=100);
69 }
70 .Hdropdown_red_tab__menu p{
71 clear:left;
72 }
73 .Hdropdown_red_tab__menu #current{
74 background:#003366 top left repeat-x;
75 color:#ffffff;
76 }
77 .Hdropdown_red_tab__menu ul li ul li{}

l'effetto che vorrei è che il rettangolo che appare su "inserimento" sia mobile e si sposti quando il mouse va' su "inserimento", "visualizza" o "modifica" (e non solo su inserimento)
inoltre vorrei che quando viene selezionata "un'opzione di menu" il rettangolo rimanga fisso sulla madre sei sotto-menu.
Come posso realizzare questo effetto?
Grazie a tutti in anticipo

**cavicchiandrea** · 16-04-2012, 10:17

Forse con jquery animate() puoi risolvere.

Discussione: effetto a passaggio su menu orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

effetto a passaggio su menu orizzontale

Permessi di invio