2

Este menú funciona muy bien, abre las páginas dentro de la misma ventana, pero no me deja abrir en una nueva ventana.

Lo he intentado ya de varias maneras pero nada pero no logro abrir una nueva ventana.

Este es mi código:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cmenu.js"></script>
<link type="text/css" rel="stylesheet" href="cmenu.css" />
<script>
$(document).ready(function(){
    $('.menu').cmenu();
});
</script>
<table border=7 ALIGN=CENTER width="100%">
    <tr>
      <td>
         <br>
         <table>
            <br>
            <center>
               <tr>
                  <td width="210">
                     <br><br>
                  </td>
                  <td>
                     <ul class="menu">
                        <li  action="index.php" label="Inicio">
                           <img src="images/index.png" />
                        </li>
                        <li   action="nuevo.php" label="Nuevo Registro">
                           <img src="images/nuevo.png" />
                        </li>
                        <li   action="reportes.php" label="Reportes">
                           <img src="images/reportes.png" />
                        </li>
                     </ul>
                  </td>
                  <td width="210">
                     <br><br>
                  </td>
               </tr>
            </center>
            <tr>
               <td>
                  <br><br>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Archivo cmenu.css

.menu{
    list-style: none;

}
.selected{
    background-color: #EFF8FF;
    z-index:1;
    position:absolute;
    height:150px;
    width: 128px;
    border-radius:5px;
    border: 1px solid #5DA9D1;
    display:none;
    text-align: center;
    border:1px solid #5DA9D1;
}
.selected label{
    font-weight: bold;
    font-family: Arial;
    font-size: 11px;
    color:#4C43F9;
    position:relative;
    top:128px;

}
.menu li{
    /* position:relative; */
    float:left;
    height:128px;
    width:128px;
    cursor: pointer;
    border-radius:5px;
}
.menu li img{
    position:absolute;
    z-index:10;
}
.container{
    background-color: white;
    margin:0 auto;
    width: 960px;
}

Archivo jquery.cmenu.js

(function($){
    $.fn.cmenu=function(){
     return  this.each(function(){
         var cmenu=$(this);
         var menuItems=cmenu.find('li');
         menuItems.bind('mouseover',function(event){
                    var prevDiv=$(this).find('.selected');
                    if (prevDiv.size()==1){
                            prevDiv.show();
                        }
                        else{
                            var div= $('<div>');
                            var label= $('<label>');
                            div.addClass('selected');
                            label.html($(this).attr('label'));
                            div.append(label);
                            $(this).prepend(div);
                            $(this).find('.selected').show();
                        }
                })
        menuItems.bind('mouseout',function(event){
            cmenu.find('.selected').hide();
        })
        cmenu.find('img').bind('click',function(event){
           var action = $(this).parent().attr('action');
           location.href=action;
        });
     });// end fn.cmenu
 }
})(jQuery);

Y por último el archivo jquery-1.4.2.min.js este lo puedes descargar de https://blog.jquery.com/2010/02/19/jquery-142-released/ porque esta muy extenso.

1
  • 1
    ¿En serio te funciona eso? El atributo action es para formularios, no se puede usar en otras etiquetas (a mi tu código no me hace nada). Por otra parte usas etiquetas y atributos desaprobados hace mucho tiempo y tienes varias etiquetas sin cerrar.
    – user7176
    el 29 ago. 2016 a las 9:45

2 respuestas 2

4

En vez de action en el tag <li> usa un hipervinculo <a>

<ul class="menu">
  <li>
    <a href="http://www.google.com" target="_blank">
      <img src="images/index.png" />
    </a>
  </li>
  <li>
    <a href="http://es.stackoverflow.com/" target="_blank">
      <img src="images/nuevo.png" />
    </a>
  </li>
  <li>
    <a href="reportes.php" target="_blank">Reportes
      <img src="images/reportes.png" />
    </a>
  </li>                     
</ul>

En el atributo href colocas la url a la que quieres ir, y en el atributo target colocas donde quieres que se abra el link, en este caso se coloca _blank para que se abra en una nueva pestaña.

14
  • Hola, buen día, agradezco sus comentarios, olvide poner esta parte del codigo que es javascript, he anexado el script faltante al mensaje original. Es por ello que funciona el action y que no puedo utilizar el atributo href, de verdad he intentado todo pero sin el resultado esperado.
    – Stravos77
    el 29 ago. 2016 a las 13:17
  • @JuanPinzón Pero ahora si se pulsa en la imagen no ocurriría nada, mientras que antes sí se ejecutaría una acción con lo cual el resultado no sería similar en ambos casos (aunque no tengo muy claro como funciona todo esto del target en el li y puede que me equivoque)
    – Alvaro Montoro
    el 29 ago. 2016 a las 13:21
  • 1
    SI se quiere que la imagen sea un hipervinculo, se la colocala dentro del tag <a>, ahora edito la respuesta. Aunque el OP edito su pregunta el dia de hoy, yo tampoco entendia el uso de action en el tag <li>. el 29 ago. 2016 a las 13:24
  • He intentado colocar <a> y realiza la función, es decir, se abre en una ventana nueva la web que requiero, pero la pagina en la que me encuentro trata de abrir otra web y marca error y lo que quiero es que me abra el link en una ventana nueva, pero que no mueva la pagina donde estoy, he ahi donde no encuentro como acomodarlo.
    – Stravos77
    el 29 ago. 2016 a las 13:53
  • @Stravos77 Coloca todo tu codigo javascript, hasta ahora no queda del todo claro lo que estas haciendo, que hace $('.menu').cmenu();? puede ser que ahí estés redirigiendo la pagina actual a otra. el 29 ago. 2016 a las 13:58
1

Las páginas se abren en la misma ventana porque en jquery.cmenu.js tienes esto:

var action = $(this).parent().attr('action');
location.href=action;

Si quieres que se abra en una nueva ventana podrías hacer algo como esto:

var action = $(this).parent().attr('action');
window.open(action);

Edición a partir de tus comentarios en esta respuesta.

Para modificar el código y que algunos enlaces se abran en la misma ventana y otros en una venta/pestaña nueva, lo que puedes hacer es añadir un nuevo atributo al li que especifique el "objetivo" (target) del li. Para ello puedes usar data-atributos (y ya de paso actualizar el action y cambiarlo a data-action para que el código sea válido.

La idea sería hacer algo como esto en el HTML:

<ul class="menu">
    <li data-target="_new" data-action="index.php" label="Inicio">
        <img src="images/index.png" />
    </li>
    <li data-target="_new" data-action="nuevo.php" label="Nuevo Registro">
        <img src="images/nuevo.png" />
    </li>
    <li data-target="_self" data-action="reportes.php" label="Reportes">
        <img src="images/reportes.png" />
    </li>
</ul>

Y cambiar el código en jquery.cmenu.js en esta parte:

cmenu.find('img').bind('click',function(event){
   var action = $(this).parent().attr('data-action');
   var target = $(this).parent().attr('data-target');
   if (target == "_new") {
       window.open(action);
   } else {
       location.href=action;
   }
});

Esto lo que hará es permitirte especificar la página a enlazar (con data-action) y el método (con data-target). En enlace de las dos primeras imágenes de la lista se abrirá en una ventana/pestaña nueva, mientras que la última se abrirá en la misma ventana.

10
  • Esto provocaría que todas las paginas se abran en ventanas nuevas? porque mi dilema es que no todas las opciones requiero que se abran así, pero de verdad esta muy bien lo que me comentas, no le había querido mover a ese archivo por que no quería echarlo a perder. Lo voy a checar y te comento que resulto, muchas gracias.
    – Stravos77
    el 29 ago. 2016 a las 14:24
  • En efecto, abre todas las opciones en ventanas nuevas, aunque creo que lo puedo implementar solo en ciertas secciones, de verdad muchas gracias, han sido de mucha ayuda, saludos y bendiciones.
    – Stravos77
    el 29 ago. 2016 a las 14:28
  • Podrías modificar el código un poco más para que sea válido y puedas hacer lo que quieres. Deja y edito la respuesta en un segundo
    – Alvaro Montoro
    el 29 ago. 2016 a las 14:34
  • a okas, esta bien, muchas gracias.
    – Stravos77
    el 29 ago. 2016 a las 14:41
  • @Stravos77 actualicé la respuesta. Pruébala y dime si te funciona. Saludos
    – Alvaro Montoro
    el 29 ago. 2016 a las 14:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.