elaborar un menú en una web

[RafaRG]

bueno, el caso es que quisiera hacer un menú un tanto especial en una web (más concretamente, en un blog de blogger). mi idea es que al darle a un enlace, se me muestre un div donde tengo varios enlaces. cada enlace cargaría un div distinto sobre el primer div. sería como hacer una ventana con un menú arriba. ahora bien, no se me ocurre una buena forma para hacerlo. ¿debería hacerlo con un java script que mostrase el contenido (div) al darle al enlace? ¿se podría usar frames de una forma especial sin que se recargue la página entera?...
os dejo una imagen de la ventana con el menú de navegación arriba. en el recuadro gris es donde quiero que se muestren los contenidos de cada enlace:

muchas gracias

[RafaRG]

vale, creo que ya he descubierto la manera : D
se trata de ir haciendo funciones de java script, de las cuales 3 muestran el contenido y 6 lo ocultan. ose dejo el código para compartir mi descubrimiento.
no obstante, si a alguien se le ocurre una forma más eficaz de resolverlo, me gustaría verlo.
un saludo

Código PHP:

  <style type="text/css">
#ID {
    background-color:red;
    position:absolute; top:100px; left:50px;
    width:100px;
    height:70px;
    padding:10px;
    }
#ID2 {
    background-color:green;
    position:absolute; top:100px; left:50px;
    width:100px;
    height:70px;
    padding:10px;
    }
#ID3 {
    background-color:blue;
    position:absolute; top:100px; left:50px;
    width:100px;
    height:70px;
    padding:10px;
    }
#cubridor {
    position:fixed; top:0px; left:7px;
    background-color:rgba(0,0,0,0);
    width:55px;
    height:30px;
    }
#cubridor2 {
    position:fixed; top:0px; left:63px;
    background-color:rgba(0,0,0,0);
    width:55px;
    height:30px;
    }
#cubridor3 {
    position:fixed; top:0px; left:119px;
    background-color:rgba(0,0,0,0);
    width:55px;
    height:30px;
    }
</style>
<script> 
function OTROID(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'block') ? 'none' : 'block'; 
  enla.innerHTML = (enla.innerHTML == 'Principal') ? 'Principal' : 'Principal'; 
} 
function OTROID2a(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'none') ? 'none' : 'none'; 
  enla.innerHTML = (enla.innerHTML == 'Principal') ? 'Principal' : 'Principal'; 
} 
function OTROID3a(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'none') ? 'none' : 'none'; 
  enla.innerHTML = (enla.innerHTML == 'Principal') ? 'Principal' : 'Principal'; 
}
function OTROID2(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'block') ? 'none' : 'block'; 
  enla.innerHTML = (enla.innerHTML == 'Intereses') ? 'Intereses' : 'Intereses'; 
} 
function OTROIDa(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'none') ? 'none' : 'none'; 
  enla.innerHTML = (enla.innerHTML == 'Intereses') ? 'Intereses' : 'Intereses'; 
} 
function OTROID3b(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'none') ? 'none' : 'none'; 
  enla.innerHTML = (enla.innerHTML == 'Intereses') ? 'Intereses' : 'Intereses'; 
} 
function OTROID3(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'block') ? 'none' : 'block'; 
  enla.innerHTML = (enla.innerHTML == 'Espacio') ? 'Espacio' : 'Espacio'; 
} 
function OTROIDb(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'none') ? 'none' : 'none'; 
  enla.innerHTML = (enla.innerHTML == 'Espacio') ? 'Espacio' : 'Espacio'; 
} 
function OTROID2b(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'none') ? 'none' : 'none'; 
  enla.innerHTML = (enla.innerHTML == 'Espacio') ? 'Espacio' : 'Espacio'; 
} 
</script> 
<a href="#" onclick="OTROID(this,'ID'), OTROID2a(this,'ID2'), OTROID3a(this,'ID3'); return false" />Principal</a>
<a href="#" onclick="OTROID2(this,'ID2'), OTROIDa(this,'ID'), OTROID3b(this,'ID3'); return false" />Intereses</a>
<a href="#" onclick="OTROID3(this,'ID3'), OTROID2b(this,'ID2'), OTROIDb(this,'ID'); return false" />Espacio</a>
<div id="ID" style="display:block"> <div id="cubridor"></div>Este texto se verá cuando yo quiera </div> 
<div id="ID2" style="display:none"> <div id="cubridor2"></div>Este texto se verá cuando yo quiera 2</div> 
<div id="ID3" style="display:none"> <div id="cubridor3"></div>Este texto se verá cuando yo quiera 3</div> 
  

PD: suprimiré un botón, ya que sino tendré que hacer 16 funciones para el menucito :S

[carlospc]

Hola, hace poco publiqué uno en mi blog, quizas te interese: Menu tipo Pestañas TAB con JQuery y CSS el ejemplo en funcionamiento lo puedes ver aqui, para darle el acabado que quieres puedes ponerle border-radius a las pestañas y listo.

Suerte...

[RafaRG]

vaya hombre, con lo fácil que era y la que he liado yo... XDDD
muchas gracias de todas formas. lo tendré en cuenta para la próxima vez que se me ocurra hacer este tipo de menú
un saludo y gracias por el aporte.
PD: buen trabajo con tu web. yo también estoy haciendo una con el estilo de windows 7 (aunque no tan curradísima).