Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Mostrar selección de idioma con un listado y CSS
Experiencia de usuario
18/1/2005
|
Daniel Torres Burriel
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>
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