boxscroll
Texto Por Encima De La Pagina
<style type="text/css">
body{
color: #333;
font-size: 11px;
font-family: verdana;
}
a{
color: #fff;
text-decoration: none;
}
a:hover{
color: #DFE44F;
}
p{
margin: 0;
padding: 5px;
line-height: 1.5em;
text-align: justify;
border: 1px solid #73A405;
}
#wrapper{
width: 500px;
margin: 0 auto;
}
.box{
background: #fff;
}
.boxholder{
clear: both;
padding: 5px;
background-color: #9BCF24;
}
.tab{
float: left;
height: 32px;
width: 102px;
margin: 0 1px 0 0;
text-align: center;
background: #8DC70A url(http://img28.xooimage.com/files/6/7/0/greentab-d5e84a.jpg) no-repeat;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 9px 0 0 0;
}
</style>
<script type="text/javascript" src="http://img46.xooimage.com/files/a/a/0/prototype.lite-d5e717.js"></script>
<script type="text/javascript" src="http://img22.xooimage.com/files/a/6/5/moo.fx-d5e6fe.js"></script>
<script type="text/javascript" src="http://img40.xooimage.com/files/e/d/c/moo.fx.pack-d5e70d.js"></script>
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>Codigo Del Menu (coloquenlo Donde Quieran que valla el menu)
<div id="wrapper">
<div id="content">
<h3 class="tab" title="first">
<div class="tabtxt">Primero</div>
</h3>
<div class="tab">
<h3 class="tabtxt" title="second">Segundo</h3>
</div>
<div class="tab">
<h3 class="tabtxt" title="third">Tercero</h3>
</div>
<div class="tab">
<h3 class="tabtxt" title="fourth">Cuarto</h3>
</div>
<div class="boxholder">
<div class="box">
<p><strong>Primer Box</strong><br />
Contenido Aqui</p>
</div>
<div class="box">
<p><strong>Segundo Box</strong><br />
Contenido Aqui</p>
</div>
<div class="box">
<p><strong>Tercer Box</strong><br />
Contenido Aqui</p>
</div>
<div class="box">
<p><strong>Cuarto Box</strong><br />
Contenido Aqui</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>
___________________________________________________________
Primero
Segundo
Tercero
Cuarto
Primer Box
Contenido Aqui
Segundo Box
Contenido Aqui
Tercer Box
Contenido Aqui
Cuarto Box
Contenido Aqui
Fuente: http://www.hotscripts.com/