Script Menu jQuery

Synobazz

Hola, muy buenas.

Estoy haciendo una web para el grupo de musica de mi novia, y me a gustado mucho el efecto de este script -> http://www.jeremymartin.name/examples/kwicks.php?example=3

el problema es que no se trabajar mucho con el codigo con el dreamweaver y me gustaria que me echarais una manita para ver si soy capaz de poder usar este menu tan majo.

Bueno, empiezo con el codigo HTML,

<ul class="kwicksl" >

<li id="kwick1"></li>

<li id="kwick2"></li>

<li id="kwick3"></li>

<li id="kwick4"></li>

</ul>

todo esto lo pongo entre las etiquetas HTML

Luego, el codigo CSS,

.kwicks li{

width: 125px;

height: 100px;

margin-bottom: 3px;

}

#kwick1 {

background-color: #FF5100;

}

#kwick2 {

background-color: #B33900;

}

#kwick3 {

background-color: #FFD000;

}

#kwick4 {

background-color: #B39200;

margin-bottom: none;

}

Todo esto va en una pagina nueva CSS?¿? o como?

y finalmente el codigo Javascript,

$().ready(function() {

$('.kwicks').kwicks({

max : 205,

spacing : 3,

isVertical : true

});

});

todo esto dnd?¿?

Bueno, ya para terminar, tengo el archivo descargado que supongo que tendre que trabajarlo y subirlo al servidor dnd esta alojada mi web...

gracias por leerme y ayudarme en lo posible, se que aqui hay mucho nivel, a ver si algun dia consigo pillaros! ;)

Gracias.

TaMy

<ul class="kwicksl" >

<li id="kwick1"></li>

<li id="kwick2"></li>

<li id="kwick3"></li>

<li id="kwick4"></li>

</ul>

Lo de arriba en el body...

.kwicks li{

width: 125px;

height: 100px;

margin-bottom: 3px;

}

#kwick1 {

background-color: #FF5100;

}

#kwick2 {

background-color: #B33900;

}

#kwick3 {

background-color: #FFD000;

}

#kwick4 {

background-color: #B39200;

margin-bottom: none;

}

Lo de arriba en un .css que lo llamas desde el header mismo
<link rel="stylesheet" type="text/css" href="/css/kwicks.css" media="screen" />

$().ready(function() {

$('.kwicks').kwicks({

max : 205,

spacing : 3,

isVertical : true

});

});

esto lo pones en un .js aparte y lo incluyes desde el header así:

<script type="javascript" languaje="text/javascript" src="/js/kwicks.js"></script>

Ale ya está...

No te olvides de bajar el framework del jquery y de incluirlo igual que incluyes el kwicks.js

liebgott

Importante, puedes bajarte jQuery en el sitio oficial, pero si solo vas a usar ese efecto (y sobretodo no vas a usar otra libreria como prototype o mootools) es mejor que bajes directamente el jQuery 1.2.6 y el easing desde esa propia pagina.

Synobazz

Muchas gracias por responderme, ahora despues de comer me pongo a trabajar y a ver que tal queda ;)

Ya os avisare a ver que tal me queda!

Synobazz

Bueno, soy incapaz de ponerlo. :(

alguien me puede enviar un ejemplo con todos los archivos necesarios en una web con 2 marcos (superior y lateral izquierdo), supongo que no tendreis mucho problema en hacerlo asi rapido, solo para ver en que puñetas fallo... pq madremia he echo de todo!!!

mi email es alatac@gmail.com

estare eternamente agradecido!

Usuarios habituales

  • Synobazz
  • liebgott
  • TaMy