JQuery - Menu - Iniciar centrado

   
Vista:

Menu - Iniciar centrado

Publicado por Carlos Aviles (1 intervención) el 27/04/2012 00:17:53
Hola que tal mi duda es la siguiente, tengo un codigo de jquery q sireve para un menu lineal, que cuando pongo el cursor sobre el DIV despliega las opciones de derecha a izquierda, el problemas es que el div como es de posicion absoluta se mueve segun la resolucion de la pantalla y lo que hace mi codigo es iniciar el el DIV en un lugar especifico ! la pregunta es como hago para que dicho DIV siempre aparexca centrado ! aqui le spongo mi codigo Gracias !


CSS

1
2
3
4
5
6
7
8
9
.mh_wrapper{
  height:40px;
  line-height:40px;
  position:absolute;
  top:515px;
  left:700px; ---------- AQUI LE DIGO QUE INICIE EL DIV PARA QUE MAS O MENOS LO CENTRE
  font-family:"Helvetica Neue", "Trebuchet MS", Arial,Helvetica, Geneva,sans-serif;
  font-size:16px;
}

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
$(function() {
                //graceful degradation
                $('#ui_element').find('ul').css({
                    'left'	:	'1940px'
                }).siblings('.mh_right').css({
                    'left'	:	'0px'             ------------AQUI ES DONDE INICIA EL DIV OSEA EN LOS 700PX
                });
                var $arrow = $('#ui_element').find('.mh_right');
                var $menu  = $('#ui_element').find('ul');
                $arrow.bind('mouseenter',function(){
                    var $this 	= $(this);
                    $this.stop().animate({'left':'-350px'},50);
                    $menu.stop().animate({'left':'-200px'},400,function(){
                        $(this).find('a')
                        .unbind('mouseenter,mouseleave')
                        .bind('mouseenter',function(){
                            $(this).addClass('hover');
                        })
                        .bind('mouseleave',function(){
                            $(this).removeClass('hover');
                        });
                    });
                });
                $menu.bind('mouseleave',function(){
                    var $this 	= $(this);
                    $this.stop().animate({'left':'1940px'},400,function(){
                        $arrow.stop().animate({'left':'0px'},70);
                    });
                });
            });
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
Imágen de perfil de xve

Menu - Iniciar centrado

Publicado por xve (557 intervenciones) el 27/04/2012 08:22:43
Hola Carlos, si utilizas valores absolutos, es decir píxeles, nunca te quedara centrado... para ello tienes que utilizar en el css margin:auto;, el cual te lo centrará siempre según la resolución del navegador, incluso si se redimensiona el navegador, seguirá quedando centrado.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar