Mostrar selección de idioma con un listado y CSS

Experiencia de usuario
18/1/2005
|
Daniel Torres Burriel
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

Este es uno de esos recursos que por sencillos no se le ocurren a uno con facilidad. ¿Quién no ha tenido la necesidad de incluir una serie de opciones para poder seleccionar el idioma de un sitio web? Pues bien he visto un sistema muy apañado y basado es nuestros queridos estándares web. Se puede ver en Horizontal Drop Down Menus, y el código, lo pongo a continuación.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
}
ul li {
position: relative;
}
ul li ul {
position: absolute;
left: 0; /* Set 1px less than menu width */
top: 18px;
display: none;
}
a.eng{
background: transparent url('images/flags/england-flag.gif') no-repeat right; /* IE6 Bug */
}
a.eng:hover{
background: transparent url('images/flags/england-flag.gif') no-repeat right; /* IE6 Bug */
}
a.france{
background: transparent url('images/flags/france-flag.gif') no-repeat right; /* IE6 Bug */
}
a.france:hover{
background: transparent url('images/flags/france-flag.gif') no-repeat right; /* IE6 Bug */
}
a.italy{
background: transparent url('images/flags/italy-flag.gif') no-repeat right; /* IE6 Bug */
}
a.italy:hover{
background: transparent url('images/flags/italy-flag.gif') no-repeat right; /* IE6 Bug */
}
a.japan{
background: transparent url('images/flags/japan-flag.gif') no-repeat right; /* IE6 Bug */
}
a.japan:hover{
background: transparent url('images/flags/japan-flag.gif') no-repeat right; /* IE6 Bug */
}
a.netherlands{
background: transparent url('images/flags/netherlands-flag.gif') no-repeat right; /* IE6 Bug */
}
a.netherlands:hover{
background: transparent url('images/flags/netherlands-flag.gif') no-repeat right; /* IE6 Bug */
}
a.spain{
background: transparent url('images/flags/spain-flag.gif') no-repeat right; /* IE6 Bug */
}
a.spain:hover{
background: transparent url('images/flags/spain-flag.gif') no-repeat right; /* IE6 Bug */
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: transparent url('images/flags/germany-flag.gif') no-repeat right; /* IE6 Bug */
padding: 0;
}
/* Fix IE. Hide from IE Mac */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A;background: transparent url('images/flags/germany-flag.gif') no-repeat right; } /* Hover Styles */
li ul li a { padding:0; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">German</a>
<ul>
<li><a href="#" class="eng">English</a></li>
<li><a href="#" class="france">French</a></li>
<li><a href="#" class="italy">Italian</a></li>
<li><a href="#" class="japan">Japanese</a></li>
<li><a href="#" class="netherlands">Netherlands</a></li>
<li><a href="#" class="spain">Spain</a></li>
</ul>
</li>
</ul>
</body>
</html>

¿Quieres darnos tu impresión sobre este post?

Una respuesta a “Mostrar selección de idioma con un listado y CSS”

  1. en este ejemplo se hace referencia a un archivo «drop_down.js», el codigo de ese archivo donde esta?? me gustaria tenerlo para entender un poco mas el ejemplo

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.