Problema de links en Kwicks (jQuery)

TRON #1 Nov '09 Vault Dweller

Hola, estoy haciendo un menu estilo este. El problema es que no consigo que cada parte del menú tenga un hipervinculo... no se como meterlo.

El código que tengo es el siguiente.

<div id="arriba">
<ul class="kwicks">
<li id="kwick_1"></li>
<li id="kwick_2"></li>
<li id="kwick_3"></li>
<li id="kwick_4"></li>
</ul>
</div>

/* This css file serves as a template for styling your kwicks.  Feel free to modify, but please make note of the comments - some of them are important. */
.kwicks {
/* recommended styles for kwicks ul container */
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
/* these are required, but the values are up to you (must be pixel) */
width: 125px;
height: 100px;

/*do not change these */
display: block;
overflow: hidden;
padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li {
/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
margin-right: 5px; /*Set to same as spacing option. */
float: left;
}
.kwicks.vertical  li{
/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
margin-bottom: 5px; /*Set to same as spacing option. */
}
#kwick_1 { 
background-image: url(http://www.******.com/templates/ja_purity/css/img/equipo.jpg);
background-position: top left;
}
#kwick_2 {
background-color: #5a69a9;
}
#kwick_3 {
background-color: #c26468;
}
#kwick_4 { 
background-color: #bf7cc7;
}
.kwicks.horizontal #kwick_4 {
margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_4 {
margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}

si me pudierais echar un cable la verdad es que me ahorráis un quebradero de cabeza.

muchas gracias de antemano.

pd: he probado a meter un href dentro del li pero no me lo coje, y en el ejemplo del dev no tiene links, así que no se como se pondrían

NeB1 #2 Nov '09

#1 si dentro del <li> pones <a href="./index.php">hola</a></li> no te funciona enserio?!

espero que no hayas hecho <li href...> xDDD

squ4r3 #3 Nov '09

hola, soy #1, me posteó el mensaje un amigo porque estaba baneado hasta esta tarde.

#2 , he probado como dices, pero claro, yo no quiero que haya un texto que pinches, sino que quiero que todo el boton sea clickable, la imagen la pongo de fondo con css pero no se por donde cogerlo para que te salga la manita del click y poder linkear...
tambien he probado a meter la imagen como html dentro del li y tampoco me la pilla

algo estoy haciendo mal :S

NeB1 #4 Nov '09

#3 vale, pues inserta este código en el header de tu web, y despues haremos unos pequeños cambios al html: (Este código dá por hecho que estás gastando jQuery)

ESTO DENTRO DEL HEADER

<script language="text/javascript" type="text/javascript">
    $(document).ready(function(){
        $("li").click(function(){
            window.location.href=$(this).attr('id');
        });
    });
</script>

ESTO SERÁ EL NUEVO CÓDIGO DEL MENÚ

<div id="arriba">
    <ul class="kwicks">
        <li id="index.php"></li>
        <li id="pagina2.php"></li>
        <li id="pagina3.html"></li>
        <li id="pagina4.html"></li>
    </ul>
</div>

squ4r3 #5 Nov '09

primero: GRACIAS! ya funciona. lo he modificado un poquillo y para mi sorpresa, ha funcionado xD

no podía utilizar el id para decirle la ruta, que creo que es lo que has hecho con el script del header, porque tengo definida cada id en css para ponerle el fondo, así que no podia poner www.google.es

entonces se me ha ocurrido intentar entender lo que has puesto, y he dejado el script de header así:

ESTO DENTRO DEL HEADER

<script language="text/javascript" type="text/javascript">
    $(document).ready(function(){
        $("li").click(function(){
            window.location.href=$(this).attr('a');
        });
    });
</script>

ESTO SERÁ EL NUEVO CÓDIGO DEL MENÚ

<div id="arriba">
    <ul class="kwicks">
        <li id="kwick_1" a="www.google.es"></li>
        <li id="kwick_2" a="www.getonmyhorse.com"></li>
        <li id="kwick_3" a="talycual.com"></li>
        <li id="kwick_2" a="esto_y_lo_otro.net"></li>
    </ul>
</div>

soy muy noob, igual he hecho alguna burrada que haga que te tires de los pelos, pero lo he hecho por intuición para intentar que funcionase xD

pero claro, ahora no valida, "a" no es un atributo válido. Esto tampoco me preocupa mucho, ahora lo que ya me permitiría bordarlo es que se viera la manita cuando haces hover, porque solo se ve la flecha, y claro, así la gente no sabrá que puede pinchar :S

gracias de nuevo =)

EDIT:

me autorrespondo lo de la manita, por si alguien tiene el mismo problema. He añadido al css:

#kwick_1:hover { 
	cursor: pointer;
}

así con todos los #kwick_

pues ya lo tengo hecho

NeB1 #6 Nov '09

#5 malegro muchísimo que te funcione, pero sobretodo me alegro de que lo hayas entendido y lo hayas podido modificar a tu manera ^^.

Si quieres que te valide, simplemente cambia el atributo "a" que realmente no es un atributo por, por ejemplo "class" o "href" (nunca he probado un href en un li, tampoco creo que te valide).

Y muy bien por encontrar la propiedad cursor de CSS, para ser un "noob" te sacas las castañas del fuego solito :-)

solo recordarte que si en tu misma web pones más <li> tendrás que cambiar esto:

$("li").click por

$(".kwicks > li").click

(no sé si por eso o por esto $(".kwicks li").click, pero creo que por lo de antes)

squ4r3 #7 Nov '09

Siempre antes de preguntar algo me gusta buscar por internet, así aprendo y lo resuelvo antes. Pero esto en concreto no lo había encontrado en google, lo del hover fue fácil xD

La verdad es que en mi web tengo más li, un menú a la derecha, y de momento me va bien sin hacer cambios, que se supone que debería pasar si tengo más <li> sin modificar lo que me has dicho?

por si afecta en algo, es un Joomla al que le estoy intentando meter mano.

Saludos y gracias de nuevo, así da gusto postear en MV

NeB1 #8 Nov '09

$("li").click(function(){
window.location.href=$(this).attr('a');
});

Al hacer esto le dices que a todos los "li" les añada una función al evento onclick, y dicha función será redireccionarte.

Problema de links en Kwicks (jQuery)

Usuarios habituales

Tags