Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
[Tutorial]Un Menu Elegante Y Moderno
Páginas (3): 1 2 3   
wasmake   19 Apr, 2011, 6:20 am
#1
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
Gypaete   19 Apr, 2011, 6:27 am
#2
Jaja ese jQuery lo arreglé yo xD
Dino   19 Apr, 2011, 7:38 am
#3
Que bueno que lo posteaste de nuevo(:
~Night   19 Apr, 2011, 7:51 am
#4
Está bueno, no necesariamente tiene por que ser con jQuery, puede ser con CSS o con JavaScript, pero aún así, buen tuto !
ZioGuE   19 Apr, 2011, 9:35 am
#5
Ah, ahce tiempo lo encontré en foroactivo. Que bueno que lo traes Big Grin
firethost   19 Apr, 2011, 8:17 pm
#6
Si lo poneis asi tirara error, debeis poner bien la etiqueta div, darkner edita el post Wink

<div class="img_list_hp">
Sonrics   19 Apr, 2011, 9:52 pm
#7
que bien se ve ese menu gracias amigo por postearlo de nuevo Big Grin
firethost   20 Apr, 2011, 10:30 am
#8
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
wasmake   20 Apr, 2011, 3:02 pm
#9
Fire host el </a> si esta efectivamente pero lo otro ya lo corregi perdon se me olvido al postearlo xD
Edson Ordaz   20 Apr, 2011, 3:11 pm
#10
una duda... porque para todo pones elegante y moderno??
Páginas (3): 1 2 3   
  
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.