He visto muchos menús desplegables por internet.. muy chulos, pero muy complicados para mi gusto, asi que voy a explicar como hacer un menu horizontal desplegable sencillito y funcional, tán solo con html y css.

Lo primero es la estructura, para ella usaré una lista, asi queda todo bien recogidito:

<ul id=”menu-horizontal”>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a>
<ul>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a></li>
</ul>
</li>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a></li>
</ul>

La cosa es así: el <ul> es el menú en sí, cada <li> es un botón del menú y el <ul> dentro del <li> es desplegable de ese botón. ¿Me se entiende? xD

Vale, ahora voy a aplicarle un poco de estilo para que quede el menu en horizontal, ya que por defecto las listas son verticales. Se consigue fácil, agregandole a los elementos de la lista el atributo de flotante:

ul#menu-horizontal li {
float: left;
display: inline;
position: relative;
}

Y ahora que es horizontal, voy a ocultar el submenú, ya que no quiero que aparezca aún, solo se tiene que mostrar cuando pase el ratón por encima del botón que tiene submenu. El css en cuestión:

ul#menu-horizontal ul {
display: none;
position: absolute;
top: 24;
left:0;
margin-left:-40px;
}

ul#menu-horizontal ul li {
display: block !important;
}

ul#menu-horizontal li:hover ul,
ul#menu-horizontal li.iehover ul {
display: none;
}

ul#menu-horizontal li:hover ul,
ul#menu-horizontal li.iehover ul{
display: block;
}

Y.. perfecto! Ya funciona nuestro menu desplegable y horizontal, pero nos queda un paso. Hacerlo bonito. Para ello aplicamos un poco de estilo por aquí..

#menu-horizontal {
width:500px;
margin:0 auto;
}

#menu-horizontal li {
margin:0 1px;
width:98px;
min-height:19px;
text-align:center;
background:#BBB;
list-style:none;
padding:2px 0;
}

/* y otro poquito por aquí.. */

#menu-horizontal li:hover {
background:#C5014F;
}

#menu-horizontal li a {
font:bold 11px Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}

#menu-horizontal li ul li{
float:none;
width:98px;
margin:1px 0;
}

Y.. apañao.

No es para decir: Uy que bruto que bonito que está, pero todo es empezar

Compártelo

Hoy he trabajado con un atributo del campo select que no había utilizado aún, el multiple.
Éste nos permite seleccionar no sólo una, sino varias opciones de una lista desplegable.

Me han solicitado un formulario, para una empresa de traducciones, que contenga un campo con los idiomas que ofrecen y que permita al usuario seleccionar más de un idioma con el que trabajar, así que éste será mi ejemplo de hoy:

Ejemplo

Nota: doy por hecho que ya sabéis crear un formulario simple y enviarlo por email.

1.- Insertamos el select en nuestro formulario:

<select name=”traduccion-meta[]” multiple=”multiple” size=”4″>
<option value=”No”>Seleccione una opci&oacute;n</option>
<option value=”Ingles”>Ingl&eacute;s</option>
<option value=”Ruso”>Ruso</option>
<option value=”Chino”>Chino</option>
<option value=”Frances”>Franc&eacute;s</option>
<option value=”Rumano”>Rumano</option>
<option value=”Japones”>Japon&eacute;s</option>
</select>

Es importante que en el name pongamos los corchetes [] finales, ya que con esto indicamos que nos va a devolver un Array, si no los pusieramos sólo nos enviaría el último campo seleccionado y no nos valdría de nada tener un select multiple.
El atributo multiple=”multiple” es el que nos permite seleccionar varias opciones.
Y con size=”4″ lo que hago es que se me muestren solamente 4 opciones a primera vista, para ver el resto aparecen las barras de desplazamiento, si no indicara el tamaño me saldría un select demasiado grande para mi gusto.

Una vez tenemos nuestro select, pasamos a enviar los datos a través de la función mail() a nuestra dirección de email.

2.- El código para recoger y enviar el contenido de nuestro select multiple es:

foreach ($_POST['traduccion-meta'] as $idioma){
$msg.= $idioma.” - “;
}

Con el foreach recorremos el interior de nuestro Array y en cada vuelta sacamos los idiomas seleccionados y los añadimos al contenido del mensaje del email enviado.
Acordaros que para enviar el contenido de los campos de nuestro formulario lo haciamos así:

$msg.= $_POST['traduccion-meta];

Esta vez no lo podemos hacer así ya si sólo nos devolvería la palabra Array.

Y eso es todo, si no os acordáis de cómo enviar el formulario, echarle un vistazo a mis anteriores artículos sobre este tema.

Espero que os sirva de ayuda, cualquier duda ya sabéis,.. a preguntar

Compártelo

Empiezo a creer que lo mío con los formularios es una adicción xD
Después de meditarlo unos 3 minutos he llegado a la conclusión de que sólo hablo de formularios porque no tengo tiempo (y cuando lo tengo, no tengo ganas de ponerme al ordenador) para investigar a fondo el resto de scripts y códigos.. y cómo los formularios los gasto a diario.. pues eso xD

Al lío, hoy explico de forma resumida cómo crear un formulario del tipo ‘Recomienda esta web a un amigo‘.
El usuario tendrá que escribir su nombre, su email, el nombre del amigo al que quiere recomendar la página y el email de éste, también podrá escribirle un comentario si quiere. Cuando clique sobre el botón enviar, éste se enviará automáticamente a la dirección que haya indicado.

El html de nuestro formulario, sería el siguiente:

<form action=”<?=$_SERVER['PHP_SELF']?>” method=”post”>
<p>Tu nombre:</p>
<p><input name=”nombre1″ type=”text” id=”nombre1″ /></p>
<p>Tu e-mail:</p>
<p><input name=”email1″ type=”text” id=”email1″ /></p>
<p>Nombre de tu amigo/a:</p>
<p><input name=”nombre” type=”text” id=”nombre” /></p>
<p>E-mail de tu amigo/a:</p>
<p><input name=”email” type=”text” id=”email” /></p>
<p>Comentarios:</p>
<p><textarea name=”comentarios” cols=”30″ rows=”6″></textarea></p>
<p><input type=”reset” value=”borrar” />
<input type=”submit”  value=”enviar”/></p>
</form>

Y usando la maravillosa función mail() mandamos los datos recogidos a la dirección de email que nos indican:

$msg= “Hola “.$_POST['nombre'] .”!”;
$msg.= “\n”. $_POST['nombre1'].” (”. $_POST['email1'] .”) nos ha pedido que te invitemos a visitar nuestra web,”;
$msg.= ” y ha querido escribirte el siguiente comentario: \n”.$_POST['comentarios'];
$msg.= “\nVisita www.dominio.com y descubre miles de recursos a los que puedes acceder.”;

$email = $_POST['email'];

$subject = “Recomendacion enviada desde Dominio.com por: “.$_POST['nombre1'];
mail($email, $subject, $msg, “FROM: Dominio.com<info@dominio.com>\n”);

Recuerda cambiar ‘dominio.com’ por el dominio de tu web!

Para los que no les haya quedado muy claro les dejo el ejemplo completo:

<?php if (!isset($_POST['email'])) { ?>

<form action=”<?=$_SERVER['PHP_SELF']?>” method=”post”>
<p>Tu nombre:</p>
<p><input name=”nombre1″ type=”text” id=”nombre1″ /></p>
<p>Tu e-mail:</p>
<p><input name=”email1″ type=”text” id=”email1″ /></p>
<p>Nombre de tu amigo/a:</p>
<p><input name=”nombre” type=”text” id=”nombre” /></p>
<p>E-mail de tu amigo/a:</p>
<p><input name=”email” type=”text” id=”email” /></p>
<p>Comentarios:</p>
<p><textarea name=”comentarios” cols=”30″ rows=”6″></textarea></p>
<p><input type=”reset” value=”borrar” />
<input type=”submit”  value=”enviar”/></p>
</form>

<?php }else{

$msg= “Hola “.$_POST['nombre'] .”!”;
$msg.= “\n”. $_POST['nombre1'].” (”. $_POST['email1'] .”) nos ha pedido que te invitemos a   visitar nuestra web,”;
$msg.= ” y ha querido escribirte el siguiente comentario: \n”.$_POST['comentarios'];
$msg.= “\nVisita www.dominio.com y descubre miles de recursos a los que puedes acceder.”;

$email = $_POST['email'];
$subject = “Recomendacion enviada desde Dominio.com por: “.$_POST['nombre1'];
mail($email, $subject, $msg, “FROM: Dominio.com <info@dominio.com >\n”);

?>

<p>Mensaje enviado.</p>
<p>Su recomendaci&oacute;n se ha enviado a la siguiente direcci&oacute;n <strong><?php echo   $email; ?></strong> correctamente.</p>
<p>Gracias por confiar en Dominio.com</p>

<?}?>

Todo vuestro! Que disfrutéis del verano!!

Compártelo

A la hora de hacer un rollover de una imagen, ¿qué es mejor? ¿Javascript o CSS? Estas preguntas las he visto en muchos sitios y me apetece dar mi versión ^^

De primeras creo que los dos métodos son geniales, sólo que hay que adaptarlos a su caso, vamos a ver los dos:

Rollover con CSS viene muy bien para una o unas cuantas imagenes, sin enlaces, ya que nos ahorramos tener que programar una función (tres en este caso) y resulta mucho más fácil de manipular.

Para hacer un rollover con css vamos ha hacer aparecer ésta cómo fondo de un bloque. El html:

<div id=”miavatar”></div>

Puedes ponerle el nombre que quieras, igual que si prefieres una ‘clase’ a una ‘id’. El css:

#miavatar {
width: 178px;
height: 178px;
background-imagen: url(imagena.jpg);
}
#miavatar:hover {
background-image:url(imagenb.jpg);
}

Con ‘hover’ especificamos que está el cursor encima de ese div.
El ejemplo de lo que acabo de poner sería tal que así..

(*) Aprovecho para poner mi careto en manga que está tanto de moda.. xD

Un problema de aplicar rollover a través de css es que si cargamos muchas imágenes (y pesadas) para que aparezcan, tardarán más de la cuenta en aparecer, por lo que cuando se pase el ratón por encima no aparecerán al momento, sino que tardarán.

Bueno, paso a la otra acera, rollover de imágenes con Javascript. Este es imprescindible cuando queremos cambiar una imagen sin que sea fondo, sino a través de la etiqueta img (muy útil si tenemos la imagen enlazada a alguna url).

Lo primero añadir las funciones dentro del <head>, no són cosecha mía, éstas funciones las puedes encontrar en multitud de páginas, pero cómo funcionan realmente bien, voy a ahorrarme tiempo en reinventar lo inventado

La primera función la necesitaremos en la tercera, para que cree un objeto javascript de nuestras imagenes a cargar y así no tener que esperar a que aparezcan cuando pasemos el ratón por encima, de aquí no tenemos que modificar nada:

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

En la segunda es donde está la chicha, aquí se indica que se tiene que hacer el cambio de imagen:

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

Y en la tercera y última, indicamos las imagenes que se tienen que cargar al entrar en la página, se pueden poner tantas cómo quieras, cada una con un nombre distinto, eso sí.

var preloadFlag = false;
function preloadImages() {
if (document.images) {
imagenb = newImage(”imagenb.jpg”);
preloadFlag = true;
}
}

Por último indicamos que se cargen al entrar en la web:

window.onLoad=preloadImages();

Y este es tódo el código que iría en nuestro head, una vez puestas las funciones ya podemos usarlas en todas las imágenes que queramos, adaptándolas de esta forma:

<a onmouseover=”changeImages(’nombreimagen’, ‘imagenb.jpg’); return true;” onmouseout=”changeImages(’nombreimagen’, ‘imagena.jpg’); return true;” href=”direccion.php” title=”">
<img name=”nombreimagen” src=”imagena.jpg” alt=”" /></a>

Donde imagena es la imagen que aparece por defecto, e imagenb la que aparece al pasar el ratón por encima, recordad que cada imagen (y su enlace) deben de llevar un ‘name’ único, mientras se vayan añadiendo más, hay que ponerles nuevos ‘names’.
También decir que onmouseover aplica la función cuando está el ratón por encima y que onmouseout lo hace cuando el ratón sale de encima..

Y.. creo que no me dejo nada, el ejemplo de javascript no lo pongo ya que es practicamente “igual” al de css.. supongo que os haréis una idea

Compártelo