Tabs Mootools (Brainiac)

He escogido unas que me gustaron y las he probado en ESTE BLOG DE PRUEBAS. También las he dejado tal y como están en el hack original, tan sólo cambiando el color de las tabs de navegación (porque son en blanco... igual que el fondo de mi blog de pruebas... y no se veían).

A ver:

.- CSS: He preferido sacarlo del link, para poder cambiarlo a gusto:

.mootabs_title {
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
height: 24px;

}

.mootabs_title li {
float: left;
background-color: transparent;
padding: 2px 8px 2px 8px;
margin-right: 2px;
cursor: pointer;
color: #333;
font-family: "Trebuchet MS";
font-size: 12px;
height: 24px;
line-height: 24px;
}

.mootabs_title li.active {
border-top: 3px solid #55FF2A;
}

.mootabs_panel {
display: none;
position: relative;
width: 100%;
top: -1px;
font-family: "Trebuchet MS";
clear: both;
color: #fff;
overflow: auto;
text-align:left;
padding: 3px;
}

.mootabs_panel.active {
background-color: #272822;
display: block;

}

.mootabs_title li.over {
border-top: 3px solid #30DA06;
}

.- SCRIPTS:

<script charset='utf-8' src='http://www.silverscripting.com/mootabs/mootools.v1.1.js' type='text/javascript'/>

<script charset='utf-8' src='http://www.silverscripting.com/mootabs/mootabs1.2.js' type='text/javascript'/>



<script charset='utf-8' type='text/javascript'>

window.addEvent(&#39;domready&#39;, init);

function init() {

myTabs1 = new mootabs(&#39;myTabs&#39;, {height: &#39;350px&#39;, width: &#39;500px&#39;, changeTransition: Fx.Transitions.Back.easeOut, mouseOverClass: &#39;over&#39;});



}

</script>

.- HTML:

<div class='mootabs' id='myTabs'>

<ul class='mootabs_title'>

<li title='My Work'>My Work</li>

<li title='About Me'>About Me</li>

<li title='Contact'>Contact</li>

</ul>



<div class='mootabs_panel' id='My Work'>



<h1>Tab 1</h1>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



</div>



<div class='mootabs_panel' id='About Me'>

<h1>Tab 2</h1>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



</div>

<div class='mootabs_panel' id='Contact'>

<h1>Tab 3</h1>



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



</div>

</div>

Y ya está.

Puedes echarle un vistazo a las tabs onmouseover que tengo en ESTE BLOG DE PRUEBAS, en la sidebar. Se llaman "easy tabs" y las aprendí de esta plantilla de Milo. Mañana te comento cómo se hacen, ¿vale? :)