Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje12-08-2011, 02:25 (UTC)    
Título del mensaje: Re: Sweet Menu con jQuery
Responder citando
ipwg escribió:
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


Una pregunta donde se ponen los codigos me podrias decir
ya que esta chido el menu
↑
Mensaje12-08-2011, 10:07 (UTC)    
Título del mensaje:
Responder citando
pone todos los código en texto por encima de la página. en caso de querer el menú en una página especifica añade el código html en la página que decees.
los códigos javascript y los css (no el html). siempre polos en texto por encima de la página.

Saludos!
Design-PWG
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
↑
Mensaje14-08-2011, 13:24 (UTC)    
Título del mensaje: Re: Sweet Menu con jQuery
Responder citando
Excelente aporte esto codigo me servira mucho amigo saludos

______________
Visitar sitio web


↑
Mensaje01-02-2012, 15:19 (UTC)    
Título del mensaje:
Responder citando
Este tema sera removido, ya que no cumple las reglas para realizar aportes.

Reglas para realizar aportes:
http://www.paginawebgratis.es/forum/viewtopic.php?t=66177


saludes,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es
www.team-soporte.es.tl | @jeremymolina
↑
Mostrar mensajes anteriores:   
  • Página 2 de 2

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

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