Foros del Web » Programando para Internet » Javascript »

problema con menu

 Estas en el tema de problema con menu en el foro de Javascript en Foros del Web. hola a todos.. tengo un simple menu. el cual es un objeto que se desplaza al elemento del menu que seleccionemos, pero tengo problemas al ...
  #1 (permalink)  
Antiguo 15/08/2011, 13:14
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 14 años, 9 meses
Puntos: 6
problema con menu
hola a todos.. tengo un simple menu. el cual es un objeto que se desplaza al elemento del menu que seleccionemos, pero tengo problemas al tratar de hacerlos bien en todos los navegadores especialmente en IE8.. este es el codigo:


Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #opciones-menu{
  5.  
  6.     -moz-border-radius: 20px 20px 20px 20px;
  7.     background-repeat: repeat-y;
  8.   
  9.     height:20px;
  10.     left: 0;
  11.     position:relative;
  12.     top: 0;
  13.     margin:20px 0px 0px 0px;
  14.     padding-top:20px;
  15.     padding-bottom:20px;
  16.     width: 985px;
  17.  
  18.  
  19. }
  20. #opciones-menu ul{
  21.  
  22. }                                                                       
  23. #opciones-menu ul li{
  24.  
  25.     display:block;
  26.     float:left;
  27.     width:200px;
  28.     list-style:none;
  29.     margin-left:20px;
  30.     background: #11a5c0;
  31.     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#0f788c));
  32.     background: -webkit-linear-gradient(#11a5c0, #0f788c);
  33.     background: -moz-linear-gradient(top, #11a5c0 0%, #0f788c 100%);
  34.     background: -ms-linear-gradient(#11a5c0, #0f788c);
  35.     background: -o-linear-gradient(#11a5c0, #0f788c);
  36.     background: -ms-linear-gradient(top, #11a5c0 0%,#0f788c 100%); /* IE10+ */
  37.     background: linear-gradient(#11a5c0, #0f788c);
  38.     -pie-background: linear-gradient(#11a5c0, #0f788c);
  39.     behavior: url(PIE.htc);
  40. }
  41. #opciones-menu ul li a{
  42.     color:white;
  43.     
  44.     font-family:Trebuchet MS;
  45.     text-decoration:none;
  46. }
  47.  
  48. #opciones-menu ul li .home:hover{
  49.     color:#DA230A;
  50. }
  51.  
  52. #contenedor{
  53.     width:100%;
  54.  
  55. }
  56.  
  57. #barra_mov{
  58.     margin-left:440px;
  59.     
  60.     position:absolute;
  61.     
  62.     top:15px;
  63.     width:40px;
  64.     height:15px;
  65.     background: #87e0fd; /* Old browsers */
  66.     -moz-border-radius:10px 10px 10px 10px; 
  67.     border-radius: 10px 10px 10px 10px;
  68.     behavior: url(PIE.htc);
  69. }
  70.  
  71. #barra_todo{
  72.     
  73.     position:relative;
  74.     
  75.     height:25px;
  76.     width:655px;
  77.     left:-32px;
  78.     margin:0px 0px 25px 0px;
  79.     margin-left:20px;
  80. }
  81.  
  82. </style>
  83. <script src="jquery-1.5.js" type="text/javascript"></script>
  84.     <script type="text/javascript">
  85.     function mover(argumento){
  86.     var longitud = new Array(4);    
  87.     
  88.     
  89.         if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1){
  90.         longitud[0] = 10;
  91.         longitud[1] = 214;
  92.         longitud[2] = 440;
  93.         longitud[3] = 660;
  94.         
  95.         
  96.         }else if (navigator.appName.indexOf("Explorer") != -1) { 
  97.         longitud[0] = -200;
  98.         longitud[1] = 214;
  99.         longitud[2] = 380;
  100.         longitud[3] = 660;
  101.         }else{ 
  102.                 
  103.         longitud[0] = 0;
  104.         longitud[1] = 214;
  105.         longitud[2] = 440;
  106.         longitud[3] = 660;
  107.         
  108.         }
  109.         switch(argumento){
  110.             case 1:
  111.         //  var ultimo = longtud[0]+"%";
  112.             jQuery("#barra_mov").animate({
  113.         
  114.                 marginLeft: longitud[0]+"px"
  115.             },333 );
  116.             
  117.  
  118.             
  119.             break;
  120.             case 2:
  121.             jQuery("#barra_mov").animate({
  122.         
  123.                 marginLeft: longitud[1]+"px"
  124.             }, 333 );
  125.                 //sentencias
  126.             
  127.             break;
  128.             case 3:
  129.             jQuery("#barra_mov").animate({
  130.         
  131.                 marginLeft: longitud[2]+"px"
  132.             }, 333 );
  133.                 //sentencias
  134.             break;
  135.             default:
  136.             jQuery("#barra_mov").animate({
  137.         
  138.                 marginLeft: longitud[3]+"px"
  139.             }, 222 );
  140.                 //sentencias
  141.                     
  142.             
  143.         }
  144.     
  145.     
  146.     }
  147.     
  148.     
  149.     </script>
  150. </head>
  151. <body>
  152. <div id="contenedor" align="center">
  153.     <div id="opciones-menu">
  154.         <ul>
  155.             <li><a id="hom" onmouseover="mover(1);" href="home.php">Home</a></li>
  156.             <li><a id="sol" onmouseover="mover(2);" href="#">Soluciones</a></li>
  157.             <li><a id="ser" onmouseover="mover(3);" href="javascript:void(0)">Servicios</a></li>
  158.             <li><a id="con" onmouseover="mover(4);" href="contac.php">Contacto</a></li>
  159.         </ul>   
  160.     </div>
  161.     <div id="barra_todo">
  162.         <div id="barra_mov" style=""></div>
  163.     </div>
  164. </div>
  165. </body>
  166. </html>

alguna sugerencia,consejo ??¿¿?

saludos y graciasss!!!

Etiquetas: html, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:06.