Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje17-06-2011, 20:46 (UTC)    
Título del mensaje: [jQuery] Sweet Menu con jQuery
Responder citando
Bueno muchos de ustedes habran pasado por este aporte.
+ http://www.paginawebgratis.es/forum/viewtopic.php?t=63311
Los que les traigo hoy es algo muy parecido..
Pero este un poco mas simple y mas modificable.

1- Agregaremos estos códigos, que no deben ser modificados.
Código:
      
<script type="text/javascript" src="http://ipwg.site90.net/Sweet/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ipwg.site90.net/Sweet/jquery.easing.js"></script>
<script type="text/javascript" src="http://ipwg.site90.net/Sweet/jquery.sweet-menu-1.0.js"></script>


2- Agregaremos el siguiente código Javascript que les explicare las partes que se pueden modificar.
Cita:
<script type="text/javascript">
$(document).ready(function(){



$('#exampleMenu').sweetMenu({
top: 50,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 400,
icons: [
'images/home.png',
'http://ipwg.site90.net/Sweet/images/comments.png',
'http://ipwg.site90.net/Sweet/images/red_heart.png',
'http://ipwg.site90.net/Sweet/images/male_user.png',
'http://ipwg.site90.net/Sweet/images/yellow_mail.png',

]
});
});
</script>


El color Rojo es el valor que se le dará para que valla Arriba o Mas abajo de la web. Si ponemos un valor mas bajo ira mas arriba y si ponemos un valor mas alto ira posicionado mas abajo.
El color Naranja es la duración del efecto. Si ponemos un valor bajo el efecto sera rápido y si ponemos un valor mas alto sera mas lento.
El color Marrón Son las url de las imágenes. Están ordenadas para que puedas usarlo en el punto 4

3- Añadiremos el código Css que no es necesario modificar.
Código:
   <style type="text/css">
         .sweetMenuAnchor{
                border-top: 1px solid #ffffff;
                border-right: 1px solid #ffffff;
                border-bottom: 1px solid #ffffff;
            border-top-right-radius: 4px;
            -moz-border-radius-topright: 4px;
            border-bottom-right-radius: 4px;
            -moz-border-radius-bottomright: 4px;
            color: #0071bb;
            font-size: 24px;
            font-weight: bold;
            text-align: right;
            text-transform: uppercase;
            font-family: arial;
            text-decoration: none;
            background-color: #888888;
            opacity: 0.6;
         }
         
         .sweetMenuAnchor span{
            display: block;
            padding-top: 10px;
         }
        </style>


4- Ahora el pondremos el codigo HTML.
Cita:
<ul id="exampleMenu">
<li><a href="URL">Home</a></li>
<li><a href="URL">Blog</a></li>
<li><a href="URL">Portfolio</a></li>
<li><a href="URL">Hire Me</a></li>
<li><a href="URL">Contact</a></li>

</ul>


Fuente:
ajaxshake

Demo online
http://ipruebas.es.tl/sweet.htm


Ultima edición por ipwg el Mar Sep 27, 2011 11:21 pm; editado 3 veces
↑
Mensaje17-06-2011, 22:20 (UTC)    
Título del mensaje:
Responder citando
waw Muy bueno me encanto el menu
Exelente aporte
______________
http://img.webme.com/pic/a/ayuda031/firma012221.png imagen redimensionada por exceso de tamaño
↑
Mensaje17-06-2011, 22:22 (UTC)    
Título del mensaje:
Responder citando
ayuda031 escribió:
waw Muy bueno me encanto el menu
Exelente aporte


Muchas gracias amigo. Siempre es bueno aportar y mas cosas que pueden ser muy utiles!

Saludos!
↑
Mensaje18-06-2011, 04:14 (UTC)    
Título del mensaje:
Responder citando
Magnifico aporte creo que lo utilizare en mi web me gusto mucho

Salu2
______________
Miguel García | Desarrollador web freelance
↑
Mensaje18-06-2011, 05:36 (UTC)    
Título del mensaje:
Responder citando
@solamente-sencillo
Muchas gracias me alegra que te halla gustado amigo.

Saludos!
↑
Mensaje18-06-2011, 14:53 (UTC)    
Título del mensaje:
Responder citando
Esta muy bueno, me gusto
______________
↑
Mensaje18-06-2011, 14:55 (UTC)    
Título del mensaje:
Responder citando
kilometro6 escribió:
Esta muy bueno, me gusto

Muchas gracias, que bueno que te haya gustado kilometro6

Saludos!
↑
Mensaje18-06-2011, 17:14 (UTC)    
Título del mensaje:
Responder citando
muy bueno

PD: me parece que este:
http://www.paginawebgratis.es/forum/viewtopic.php?t=63311
es parecido a este
http://www.paginawebgratis.es/forum/viewtopic.php?t=56950
↑
Mensaje18-06-2011, 19:36 (UTC)    
Título del mensaje:
Responder citando


Muchas gracias!

PD: si es el mismo aporte .
↑
Mensaje19-06-2011, 15:37 (UTC)    
Título del mensaje:
Responder citando
excelente aporte me gusto el efecto

puedo publicarlo en mi web? indicando fuente ? saludos
______________
Twitter ZoneFacil
Facebook ZoneFacil
↑
Mensaje19-06-2011, 16:24 (UTC)    
Título del mensaje:
Responder citando
fantástico, muy pero muy bueno, me gusto mucho.
______________
@JuanjoApps
JuanjoApps
↑
Mensaje19-06-2011, 16:34 (UTC)    
Título del mensaje:
Responder citando
Valla!

Exelente.

Te felicito mucho, lo usare en mi web
______________
Off
↑
Mensaje19-06-2011, 16:38 (UTC)    
Título del mensaje:
Responder citando
zonefacil escribió:
excelente aporte me gusto el efecto

puedo publicarlo en mi web? indicando fuente ? saludos

Claro. Recuerda que te dije por privado que puedes tomar todos mis aportes

wariocodes escribió:
fantástico, muy pero muy bueno, me gusto mucho.

Muchas gracias wario, me gusta mucho que comentes!

fafo-ayuda escribió:
Valla!

Exelente.

Te felicito mucho, lo usare en mi web

Espero verlo en tu web . Muchas gracias por tomarte el tiempo de visitar el aporte!

Saludos y Muchas gracias a todos!
↑
Mensaje20-06-2011, 04:19 (UTC)    
Título del mensaje:
Responder citando
fiebre jquery?
buen aporte supongo

pero seria mejorq que crearan cosas en vez de editarlas, como hace adan-2994, el sabe programar en jquery...
______________
PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG!
↑
Mensaje20-06-2011, 15:22 (UTC)    
Título del mensaje:
Responder citando
dedydamy0 escribió:
fiebre jquery?
buen aporte supongo

pero seria mejorq que crearan cosas en vez de editarlas, como hace adan-2994, el sabe programar en jquery...


Este código no esta editado para nada. Lo traje y mencione la fuente
Gracias por comentar!

Saludos!
↑
Mostrar mensajes anteriores:   
  • Página 1 de 2

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

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