26/03/2008, 17:06
|
| | | Fecha de Ingreso: marzo-2008 Ubicación: Managua, Nicaragua
Mensajes: 14
Antigüedad: 16 años, 7 meses Puntos: 0 | |
Re: Menu con tablas, stilos y javascript No estoy seguro si es lo que estas buscando pero ahí te va un ejemplo, modifica lo que desees en el aspecto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selector de idiomas</title>
<style type="text/css">
table.language_selector
{
font-family: Verdana, Arial, Helvetica, sans-serif;
/*background-color:#5596B9;*/
}
table.language_selector tr
{
background:#5596B9;
border-right:solid 2px;
border-right-color:#CCCCCC;
}
table.language_selector tr:hover {background:#006498;}
table.language_selector tr.language:hover {background:#006498;}
table.language_selector tr.language {background: #006498;}
table.language_selector tr.actual {background: #B1B6B8;}
table.language_selector tr td
{
border-bottom:solid 1px;
border-bottom-color:#CCCCCC;
border-top:solid 1px;
border-top-color:#FFFFFF;
}
table.language_selector a:link, table.language_selector a, table.language_selector a:visited {
padding-left:2px;
padding-right:2px;
padding-bottom:0px;
padding-top:0px;
padding-bottom:0px;
margin-top:1px;
display: block;
text-decoration: none;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:left;
}
table.language_selector a:hover {
padding-left:2px;
padding-right:2px;
padding-bottom:0px;
padding-top:0px;
padding-bottom:0px;
margin-top:1px;
display: block;
text-decoration: none;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:left;
}
table.language_selector a img
{ border:0;}
</style>
<script src="../js/languages.js" type="text/javascript">
function languageSelector(swich){
if(swich=='on' ) {
document.getElementById('language_selector').style .visibility='visible';
}
if(swich=='off' ) {
document.getElementById('language_selector').style .visibility='hidden';
}
return false;
}
</script>
</head>
<body>
<div style="position: absolute; top: 38px; left: 240px; width: 111px; height: 30px;" onclick="languageSelector('on')">
<table cellpadding="0" cellspacing="0" border="0" onclick="languageSelector('on')">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="110" class="language_selector" >
<tr class="language">
<td align="center" valign="middle"><a>Idioma</a> </td>
<td align="center" valign="middle"><img src="../imagenes/language-selector-menu/down.png" height="12" width="12" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="0px" ><div id="language_selector" style="position: relative; top: 0px; left: 0px; z-index: 1000; visibility: hidden; height:0" onmouseout="languageSelector('off')" onmouseover="languageSelector('on')">
<table border="0" cellpadding="0" cellspacing="0" width="110" class="language_selector">
<tr id="row_lg_de">
<td><a href="#">Alemán</a> </td>
</tr>
<tr id="row_lg_bg">
<td align="center" valign="middle"><a href="#">Búlgaro</a> </td>
</tr>
<tr id="row_lg_cz">
<td align="center" valign="middle"><a href="#">Checo</a> </td>
</tr>
<tr id="row_lg_dk">
<td align="center" valign="middle"><a href="#">Danés</a> </td>
</tr>
<tr id="row_lg_sk">
<td align="center" valign="middle"><a href="#">Eslovaco</a> </td>
</tr>
<tr id="row_lg_es" class="actual">
<td align="center" valign="middle"><a href="#">Español</a> </td>
</tr>
<tr id="row_lg_fi">
<td align="center" valign="middle"><a href="#">Finés</a> </td>
</tr>
<tr id="row_lg_fr">
<td align="center" valign="middle"><a href="#">Francés</a> </td>
</tr>
<tr id="row_lg_gr">
<td align="center" valign="middle"><a href="#">Griego</a> </td>
</tr>
<tr id="row_lg_en">
<td align="center" valign="middle"><a href="#">Inglés</a> </td>
</tr>
<tr id="row_lg_it">
<td align="center" valign="middle"><a href="#">Italiano</a> </td>
</tr>
<tr id="row_lg_nl">
<td align="center" valign="middle"><a href="#">Neerlandés</a> </td>
</tr>
<tr id="row_lg_pl">
<td align="center" valign="middle"><a href="#">Polaco</a> </td>
</tr>
<tr id="row_lg_pt">
<td align="center" valign="middle"><a href="#">Portugués</a> </td>
</tr>
<tr id="row_lg_ro">
<td align="center" valign="middle"><a href="#">Rumano</a> </td>
</tr>
<tr id="row_lg_ru">
<td align="center" valign="middle"><a href="#">Ruso</a> </td>
</tr>
<tr id="row_lg_se">
<td align="center" valign="middle"><a href="#">Sueco</a> </td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
</body>
</html> |