[Tutorial]Un Menu Elegante Y Moderno
Bueno este tuto ya lo avia posteado, lo repetire n.n. Es para hacer un menu elegante y moderno. (se me acabaron los eslogans xD):dash: Una captura:...

Bueno este tuto ya lo avia posteado, lo repetire n.n.
Es para hacer un menu elegante y moderno. (se me acabaron los eslogans xD):dash:
Una captura:
[attachment=938]

Bueno entonses para hacer esto vamos a las global


Cita:.img_list_hp {
-moz-border-radius:6px;
-webkit-border;
-radius:6px;
border:1px solid #C0C0C0;
border-radius:6px;
color:#FFF!important;
float:left;
font-size:11px;
margin:auto 5px auto auto;
padding:0;text-align:center;
width:auto
}

.img_list_hp:hover {
background-color:#bebebe;
}

.img_list_hp img {
padding:8px 15px;
}

.img_list_hp span {
background:url(http://emuxela.net46.net/images/gamenow/tcat.png) top left repeat-x;
display:block;
padding:0 10px
color: #666;
border-bottom: 1px solid #bebebe;
text-shadow: 1px 1px 0 #fff;
font-size: 12px;
}

.img_list_hp a {
color:#666!important;
text-decoration:none
}

#img_list_alt {
background-image:url(http://i31.servimg.com/u/f31/13/31/18/01/flesha10.png);
background-position:20px 0;
background-repeat:no-repeat;
padding-left:55px;
padding-top:13px
}



y luego en la plantilla de header o welcome user:


Cita:<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('¡Pasa el Mouse por encima de las imágenes para saber más sobre nuestro servicio!!');
});
});
</script>
<div><div class="img_list_hp"> <a href="LINK"><img src="ICON" alt="Descripcion" height="50"><span>Titulo </span></a></div>
<div style="clear: both;" id="img_list_alt">¡Pasa el Mouse por encima de las imágenes para saber más sobre nuestro servicio!!</div>



y listo :thumbsup: espero les sirva y les guste
Archivos Adjuntos

Jaja ese jQuery lo arreglé yo xD
Que bueno que lo posteaste de nuevo(:
Está bueno, no necesariamente tiene por que ser con jQuery, puede ser con CSS o con JavaScript, pero aún así, buen tuto !
Ah, ahce tiempo lo encontré en foroactivo. Que bueno que lo traes Big Grin
Si lo poneis asi tirara error, debeis poner bien la etiqueta div, darkner edita el post Wink

<div class="img_list_hp">
que bien se ve ese menu gracias amigo por postearlo de nuevo Big Grin
Otra cosa que observe, es que debes cerrar al final con </a> sino
aparecera como enlace todo el recuadro (lo que sobra en blanco) y la descripcion
Fire host el </a> si esta efectivamente pero lo otro ya lo corregi perdon se me olvido al postearlo xD
una duda... porque para todo pones elegante y moderno??
Colaboradores
~Night ZioGuE storm Sonrics rosab6565 leoclaros Gypaete firethost figueroa34 enrique7878 Edson Ordaz Dino dark_topo Comunidadb
This forum uses Lukasz Tkacz MyBB addons.