Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje20-08-2010, 09:41 (UTC)    
Título del mensaje: que le falta a este codigo para que funcione bien
Responder citando
Menu con CSS imitando Mootools

con ligeros cambios en el código CSS y modificando las imágenes, podría realizar el efecto acordeón tan típico de la librería Mootools.



Este es el código CSS que debéis poner antes de ]]skin

Código:
#Etique1 a:link, #Etique1 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;

background: transparent url('URL IMAGEN 1') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique1 a:hover {

background: transparent url('URL IMAGEN 1') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#Etique2 a:link, #Etique2 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;

background: transparent url('URL IMAGEN 2') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique2 a:hover {

background: transparent url('URL IMAGEN 2') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#Etique3 a:link, #Etique3 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;;

background: transparent url('URL IMAGEN 3') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique3 a:hover {

background: transparent url('URL IMAGEN 3') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#Etique4 a:link, #Etique4 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;

background: transparent url('URL IMAGEN 4') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique4 a:hover {

background: transparent url('URL IMAGEN 4') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#Etique5 a:link, #Etique5 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;

background: transparent url('URL IMAGEN 5') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique5 a:hover {

background: transparent url('URL IMAGEN 5') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#menu {

list-style:none;

margin:0;

padding:0;

display: block;

}

#menu li {

padding:0;

float:left;

}

#menu li a {

display:block;

width:115px;

height:85px;

}

#menu li a:hover{

display:block;

width:115px;

height:85px;

}




Las imágenes para el menú son de 195x84 pixeles.

http://3.bp.blogspot.com/_WlrpZ6HxL6s/SH0BY0hwm2I/AAAAAAAABVo/Ww5LUS8Y4Io/s1600-h/PizHome1.png




Para insertarlo en vuestro blog, añadís un elemento HTML y pegáis


Código:
<ul id="menu">

<li id="Etique1">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 1"></a>

</li>

<li id="Etique2">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 2"></a>

</li>

<li id="Etique3">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 3"></a>

</li>

<li id="Etique4">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 4"></a>

</li>

<li id="Etique5">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 5"></a>

</li></ul>


espero que me podais sacar el codigo para que funcione bien

gracias y saludos


o si alguien con conocimientos de como crear codigos y quisiera aser el trabojo,pues dejo el enlace,

Enlase de demostracion;

http://mootoolsmenus.blogspot.com/

enlace como se ase;

http://gemablog-.blogspot.com/2008/02/mootools-men-con-efecto-persiana.html


yo lo e echo tantas veces y ya llevo dos dias y no me sale,que estoy super cansado ya!!!!!
en enlace para si alguien se digna a aser un trabajo de codigos para tener en la web un Mootools de imagenes con efecto Persiana

espero que alguien que sepa, lo haga y saque el codigo para meterlo en HTLM


Ultima edición por arteaida el Vie Ago 20, 2010 8:52 am; editado 3 veces
↑
Mensaje20-08-2010, 14:19 (UTC)    
Título del mensaje:
Responder citando
jeje ciertamente tampoco lo consegui pero tambien se puede hacer eso en flash


con macromedia y buen ingenio =)
es como un menu ^-^
↑
Mensaje20-08-2010, 14:50 (UTC)    
Título del mensaje:
Responder citando
pues nadie puede aser un codigo,alguien que sepa ,o es tan dificil,

yo tengo 52 años y nunca e ido al colegio,pero aqui abra personas que sepan aserlo....supongo,a mi me cuesta la misma vida,pero yo creo que si alguien me lo desmenuza como he de aserlo de seguro lo ago,pero nesecito un maestro que me enseñe, y me diga los pasos exactos para aser el codigo y me funcione...XD

si algun verdadero Maestro de enceñar me lo desmenuza para un analfabeto como yo ,lo ago del tiron.....

aqui esta el enlace

http://gemablog-.blogspot.com/2008/02/mootools-men-con-efecto-persiana.html
↑
Mensaje20-08-2010, 15:35 (UTC)    
Título del mensaje:
Responder citando
arteaida escribió:
pues nadie puede aser un codigo,alguien que sepa ,o es tan dificil,

yo tengo 52 años y nunca e ido al colegio,pero aqui abra personas que sepan aserlo....supongo,a mi me cuesta la misma vida,pero yo creo que si alguien me lo desmenuza como he de aserlo de seguro lo ago,pero nesecito un maestro que me enseñe, y me diga los pasos exactos para aser el codigo y me funcione...XD

si algun verdadero Maestro de enceñar me lo desmenuza para un analfabeto como yo ,lo ago del tiron.....

aqui esta el enlace

http://gemablog-.blogspot.com/2008/02/mootools-men-con-efecto-persiana.html



miraos yo se lo ago sera el flash

ahora le tomo una vista previa para que veaa el ejemplo de como puedo hacerlo

vale =)

espere que ya lo subo
↑
Mensaje20-08-2010, 15:46 (UTC)    
Título del mensaje:
Responder citando
Aqui te dejo las vistas previas del menu (un ejemplo) que hize para que vea vs el resultado
lo hize en flash

el tamaño y colores los puedo cambiar no se preocupe por eso

hacy se ve sin pasar el cursor encima... (cerrado)




hacy se ve con el cursor encima(se abre)



puede ver que cada cuadrito de color es una imagen diferente (cualquiera se expande)




repito es un ejemplo rapido lo acavo de hacer para que lo pueda ver vss

depaso..

si tiene tiempo le agradeceria que votara por mi..
http://equipopwg.es.tl/Tallerista-Mod.htm
es para elegir a el tallerista moderador =)

aqui le dejoo el link ^-^

http://equipopwg.es.tl/Tallerista-Mod.htm

soe skulldarknight

↑
Mensaje20-08-2010, 18:30 (UTC)    
Título del mensaje:
Responder citando
me parese muy bien pero y el codigo que nesecito .no me lo puedes pasar o por lo menos dime los pasos exactos de como se ase para yo poderlo aser,no?

me parece a mi que no te boy a votar colega,aportas menos que el zapatero...XD
jajajajajajajajaj


Ultima edición por arteaida el Vie Ago 20, 2010 3:54 pm; editado 1 vez
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.