Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje06-10-2011, 21:25 (UTC)    
Título del mensaje: [CSS-jQuery] Menu horizontal 2

Hola !

Les traigo un menu parecido a este :


http://www.paginawebgratis.es/forum/viewtopic.php?t=66272

Pero este esta horizontalmente.

>>>Vista Previa Online<<<



Código:
<script type="text/javascript" src="https://sites.google.com/site/estaciondescargas/Estaciondescargas564.js"></script><script type="text/javascript">             $(function() {                 var d=300;                 $('#navigation a').each(function(){                     $(this).stop().animate({                         'marginTop':'-80px'                     },d+=150);                 });                  $('#navigation > li').hover(                 function () {                     $('a',$(this)).stop().animate({                         'marginTop':'-2px'                     },200);                 },                 function () {                     $('a',$(this)).stop().animate({                         'marginTop':'-80px'                     },200);                 }             );             });         </script>




<ul id="navigation">
    <li class="h"><a href=""><span>EDescargas</span></a></li>
    <li class="a"><a href=""><span>EDescargas</span></a></li>
    <li class="s"><a href=""><span>EDescargas</span></a></li>
    <li class="p"><a href=""><span>EDescargas</span></a></li>
    <li class="r"><a href=""><span>EDescargas</span></a></li>
    <li class="c"><a href=""><span>EDescargas</span></a></li>
</ul>




<style type="text/css"> ul#navigation {     position: fixed;     margin: 0px;     padding: 0px;     top: 0px;      list-style: none;     z-index:999999;     width:721px; } ul#navigation li {     width: 103px;     display:inline;     float:left;     } ul#navigation li a {     display: block;     float:left;     margin-top: -2px;     width: 100px;     height: 25px;     background-color:#E7F2F9;     background-repeat:no-repeat;     background-position:50% 10px;     border:1px solid #BDDCEF;     -moz-border-radius:0px 0px 10px 10px;     -webkit-border-bottom-right-radius: 10px;     -webkit-border-bottom-left-radius: 10px;     -khtml-border-bottom-right-radius: 10px;     -khtml-border-bottom-left-radius: 10px;     text-decoration:none;     text-align:center;     padding-top:80px;     opacity: 0.7;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);   } ul#navigation li a:hover{      background-color:#CAE3F2; } ul#navigation li a span{     letter-spacing:2px;     font-size:11px;     color:#60ACD8;     text-shadow: 0 -1px 1px #fff;       } ul#navigation .h a{     background-image: url(http://img.webme.com/pic/e/estaciondescargas/home.png); } ul#navigation .a a      {     background-image: url(http://img.webme.com/pic/e/estaciondescargas/card.png); } ul#navigation .s a      {     background-image: url(http://img.webme.com/pic/e/estaciondescargas/search.png); }  ul#navigation .r a   {     background-image: url(http://img.webme.com/pic/e/estaciondescargas/rss.png); } ul#navigation .p a     {     background-image: url(http://img.webme.com/pic/e/estaciondescargas/card.png); } ul#navigation .c a    {     background-image: url(http://img.webme.com/pic/e/estaciondescargas/maiil.png); }  </style>


Espero que les sirva
______________



Facebook

Web


Ultima edición por estaciondescargas el Mar Oct 25, 2011 4:14 pm; editado 2 veces
Mensaje06-10-2011, 22:39 (UTC)    
Título del mensaje:

Hola,
pues el menu ya lo había visto antes. Conozco el sitio de donde lo has sacado y te falta poner la fuente.
Es un muy buen menu, gracias por traerlo al foro.

Saludos!
______________
Mensaje06-10-2011, 22:43 (UTC)    
Título del mensaje:

Buenísimo aporte!!! Está genial
______________
Mensaje06-10-2011, 22:45 (UTC)    
Título del mensaje:

Igual amigo + Buen aporte ;D
______________
Votame
Click aqui
Mensaje07-10-2011, 11:18 (UTC)    
Título del mensaje:

Mensaje07-10-2011, 18:22 (UTC)    
Título del mensaje:

Esta fabuloso ese Menú

Saludos
______________


Super Mario la lleva, es lo mejor en Videojuegos, se los recomiendo
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group