ayuda con menu
Publicado por José (1 intervención) el 06/08/2012 00:31:43
Hola amigos hoy necesito de su ayuda con un menú que lo estoy desarrollando en JQuery, este se compone de 3 DIV que son menu, line_slide, submenu. algo así
http://img571.imageshack.us/img571/442/menu1v.png
y he tenido problemas con la barra naranja que se desplaza siguiendo al ratón y que no puedo seleccionar los submenus
por favor ayúdenme, gracias.
html
codigo de jquery.
y por ultimo el css
http://img571.imageshack.us/img571/442/menu1v.png
y he tenido problemas con la barra naranja que se desplaza siguiendo al ratón y que no puedo seleccionar los submenus
por favor ayúdenme, gracias.
html
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
<div id="menu">
<ul>
<li pos="0"><a href="control_index.php">Inicio</a></li>
<li pos="1"><a href="control_empresa.php">Empresa</a></li>
<li pos="2"><a href="control_servicios.php">Servicios</a></li>
<li pos="3"><a href="control_soporte.php">Soporte</a></li>
<li pos="4"><a href="control_catalogo.php">Catalogo</a></li>
<li pos="5"><a href="control_usuarios.php">Acceso Usuarios</a></li>
<li pos="6"><a href="control_contacto.php">Contacto</a></li>
</ul>
<div id="menu_slide">
<div id="linea_menu"></div>
</div>
</div><!--End Menu-->
<div id="submenu">
<ul id="s_0"></ul>
<ul id="s_1" style="display:hidden">
<li><a href="control_empresa.php">Quienes Somos</a></li>
<li><a href="control_objetivos.php">Objetivos</a></li>
<li><a href="control_medioambiente.php">Medioambiente</a></li>
<li><a href="control_clientes.php">Clientes</a></li>
</ul>
<ul id="s_2" style="display:hidden">
<li><a href="control_servicios.php">Asesorías</a></li>
<li><a href="control_soluciones.php">Soluciones a Medida</a></li>
<li><a href="control_instalaciones.php">Instalaciones</a></li>
<li><a href="control_mantenciones.php">Mantenciones</a></li>
</ul>
<ul id="s_3" style="display: hidden">
<li> <a href="control_soporte.php">Centro de descargas</a></li>
<li><a href="control_garantia.php">Garantía</a></li>
<li><a href="control_servicio_tecnico.php">Servicio Técnico</a></li>
<li><a href="control_faq.php">FAQ</a></li>
</ul>
<ul id="s_5" style="display: hidden">
<li><a href="#">Chat</a></li>
<li><a href="#">Foro</a></li>
</ul>
</div>
codigo de jquery.
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
$(document).ready(function(){
$('#menu ul').mousemove(function(event) {
//alert(event.pageX);
var margin = (event.pageX-30)-this.offsetLeft;
//$('#menu_slide #linea_menu').animate({marginLeft: margin}, 20);
if(margin <604&& margin >0)
{$('#menu_slide #linea_menu').animate({marginLeft:(margin)+"px"},20);}
});
$('#menu ul li').mouseover(function(){
var pos = $(this).attr('pos');
var margin = $(this).offset().left;
$('#s_' + pos).show().css('float:left',margin);
}).mouseout(function(){
var pos = $(this).attr('pos');
$('#s_' + pos).hide();
});
/*$('#menu_slide #linea_menu').mouseover(function(){
var pos = $(this).attr('pos');
var margin = $(this).offset().left;
$('#s_' + pos).show().css('float:left',margin);
})
$('#submenu ul li').mouseover(function(){
$(this).hide();
}).mouseout(function(){
$(this).show();
});
$('#menu_slide').mouseover(function(){
$(this).hide();
}).mouseout(function(){
$(this).show();
});
$('#linea_menu').mouseover(function(){
$(this).hide();
}).mouseout(function(){
$(this).show();
// }); */
});y por ultimo el css
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
#wrap #header #header_content #bottom #menu
{ margin:0 auto;text-align:center;
margin-top:10px;
font-size:12px;
text-transform:uppercase;
color:#454545;
height:20px;}#wrap #header #header_content #bottom #menu ul
{list-style: none;
padding:0;text-align:left;
margin:0; float:left;}#wrap #header #header_content #bottom #menu a
{text-decoration: none;
color:#454545;
}#wrap #header #header_content #bottom #menu ul li
{ float:left;padding-left:15px;
padding-right:15px;
padding-bottom:5px;
height:25px; display:block; cursor:pointer;}#wrap #header #header_content #bottom #menu ul li:first-child
{ background: none;}#wrap #header #header_content #bottom #menu ul li span
{ display:block;}#wrap #header #header_content #bottom #menu #menu_slide
{ float:left; clear:both; width:700px; height:5px;text-align:left;
margin-top:-10px;
}#wrap #header #header_content #bottom #menu #menu_slide #linea_menu
{border-bottom:5px solid #FC6C13;
width:80px; height:5px; padding:0px; margin:0px; float:left;margin-left:0px;
left:0px;}#wrap #header #header_content #bottom #submenu
{ clear:both;border-top: 1px solid #C1C1C1;
color:#C1C1C1;
font-size:12px;
font-weight:bold;
padding-left:20px;
padding-top:10px;
}#wrap #header #header_content #bottom #submenu ul
{ margin:0; padding:0;list-style:none;
display:none;margin-top:-20px;
padding-top:20px;
}#wrap #header #header_content #bottom #submenu #s_1
{margin-left:60px;
}#wrap #header #header_content #bottom #submenu #s_2
{ margin-left:150px;
}#wrap #header #header_content #bottom #submenu #s_3
{ margin-left:240px;
}#wrap #header #header_content #bottom #submenu #s_4
{ margin-left:330px;
}#wrap #header #header_content #bottom #submenu #s_5
{ margin-left:435px;
}#wrap #header #header_content #bottom #submenu ul li
{ float:left;padding-right:30px;
height:1px;}#wrap #header #header_content #bottom #submenu ul li a
{color:#C1C1C1;
text-decoration:none;
} #wrap #header #header_content #bottom #submenu ul li a:hover
{color:#000000;
text-decoration:none;
}Valora esta pregunta
0