si, utilizo jquery, exactamente...
y todo el codigo es el siguiente:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<title>Sophian Web Site</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var visto = null;
function mostrar(num) {
obj = document.getElementById(num);
obj.style.display = (obj==visto) ? 'none' : 'block';
if (visto != null)
visto.style.display = 'none';
visto = (obj==visto) ? null : obj;
}
</script>
</head>
<body onLoad="aggEvento()">
<div id="wrap">
<div id="contacto"><img src="contacto.jpg"/></div>
<div id="logo"><img src="logo.jpg"/></div>
<div id="contenido">
<div id="menu">
<ul>
<li><div class="nosotros"><a href="opcion1.html" target="frame" onclick="$('#oculto').slideUp('normal')"></a></div></li>
<div id="1"></div>
<li><div class="nosotros"><a href="javascript:void(0)" onclick="$('#oculto').slideDown('normal')"></a></div></li>
<div id="oculto" class="oculto">
<li><a href="opcion2.html" target="frame">Uno</a></li><li>Dos</li><li>Tres</li>
</div>
<li><div class="nosotros"><a href="opcion3.html" target="frame" onclick="$('#oculto').slideUp('normal')"></a></div></li>
<div id="3"></div>
</ul>
</div>
<div id="frame">
<div id="framesup"><img src="nosotros.jpg"/></div>
<div id="frameinf">
<iframe marginheight="0" frameborder="0" src="opcion1.html" name="frame" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
y el css
Código:
* {margin:0; padding: 0;}
body {
font-family:Georgia; font-size: medium; background: #FFE337; color:#838383
}
div#wrap {margin:auto; width: 800px; background:#000000; height:600px;}
div#contacto {padding: 25px 65px 0 0; text-align:right; background-color:transparent}
div#logo {width:auto; margin:0 0 50px 40px; }
div#contenido {padding:0 40px 40px 40px; overflow:auto;}
div#menu {float: left; width:160px;}
div#frame {margin:0 0 0 190px; }
div#framesup{ margin:0 0 5px 0;}
div#frameinf{background-color:#ffffff; height:380px; padding:10px}
ul#nav{ list-style-type:none;}
#oculto {display:none}
/* NOSOTROS */
.nosotros img{border:o}
.nosotros {background-image: url('nosotros_menu.jpg'); background-repeat:no-repeat; width:160px; height:24px; float:left;display: inline;}
.nosotros a{float:left; text-decoration: none; width:160px; height:24px;}
.nosotros a:hover,.nosotros a:active,.nosotros a:focus, .currentnos{background-image: url('nosotros_menu_r.jpg');}
Un saludo, espero que me puedas ayudar! Muchas gracias!!
Pablo