JQuery - ayuda con menu

   
Vista:

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

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&iacute;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&iacute;a</a></li>
                            <li><a href="control_servicio_tecnico.php">Servicio T&eacute;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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder