SEÇÃO 1 - links
TITULO - caixas de texto
SEÇÃO - página em iframe
PASSO 1
Copie e cole estes dois blocos (CSS e JAVASCRIPT) antes de </ head >
<style>
body {
color:#000000;
text-align:left;
padding: 5px;
}
.title {
font-size: 16px;
cursor: pointer;
border: 1px solid #01CCFF; border-image: none; color: #ff0000; padding: 7px;
}
a {
font-size: 14px;
padding: 10px;
display:block;
color:#054A72;
text-decoration:none;
}
a:hover {
color:#ffffff;
background: #054A72;
text-decoration:none;
}
</style>
<script>
document.onclick = Gry_Click;
function Gry_Click(GRY) {
GRY = (GRY) ? GRY : ((window.event) ? event : null ) ;
var target = (GRY.target) ? GRY.target : ((GRY.srcElement) ? GRY.srcElement : null ) ;
GRYClick(target) ;
GRY.cancelBubble ;
}
function GRYClick(target) {
if (target.id) {
ObjectID = target.id ;
ObjectType = ObjectID.substring(0,5) ;
ObjectNyyum = ObjectID.substring(2) ;
switch(ObjectType) {
case 'TITLE' :
ItemId = getTpcId(target) ;
Gryid(ItemId) ;
return ;
break ;
case 'LK' :
ItemId = getTpcId(target) ;
setMark(ItemId) ;
return ;
default:
break ;
}
}
}
function Gry_GRYenuValue(target,styleProp, IEStyleProp) {
if (target.currentStyle) return target.currentStyle[ IEStyleProp ] ;
else if (window.getComputedStyle) {
compStyle = window.getComputedStyle(target,'') ;
return compStyle.getPropertyValue(styleProp) ;
}
}
function getTpcId(obj) {
if (obj.id && obj.id.substring(0,5)=='IITEM' ) {
return obj.id.substring(6,38) ;
}
if (!obj.parentNode) return null;
return getTpcId(obj.parentNode) ;
}
function Gryid(id) {
var item = document.getElementById('IITEM-'+id) ;
var i ;
for (i=0; i<item.childNodes.length; i++)
if (item.childNodes[i].id && item.childNodes[i].id.substring(0,5)=='ICONT') {
content = item.childNodes[i] ;
break ;
}
status = Gry_GRYenuValue(content,'display','display') ;
if (status!='block') {
content.style['display'] = 'block' ;
item.style['background'] = Gry_GRYenuValue(document.getElementById('c2'),'color','color') ;
} else {
content.style['display'] = 'none' ;
item.style['background'] = Gry_GRYenuValue(document.getElementById('c1'),'color','color') ;
}
}
function toggGry(GyName) {
object = document.getElementById(GyName) ;
if (object.disabled==true) object.disabled=false ;
else object.disabled=true;
}
</script>
PASSO 2
Copie e cole este bloco de código abaixo depois de < body >
<div id="main" style="text-align: center">
<div class="item" id="IITEM-1"><span class="sect"></span><div id="section">
<span class="title" id="TITLE1">SEÇÃO 1 - links</span></div><div style="display: none;" class="open" id="ICONT1"><br>
<a href="#"><b>Página 1</b></a>
<a href="#"><b>Página 2</b></a></div><p></p>
<div class="item" id="IITEM-2"><span class="sect"></span><div id="section">
<span class="title" id="TITLE2">TITULO - caixas de texto</span></div><div style="display: none; width:60%;" class="open" id="ICONT2">
<p>Lorem ipsum<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div><p></p>
<div class="item"><div class="item" id="IITEM-3"><span class="sect"></span><div id="section">
<span class="title" id="TITLE3">SEÇÃO - página em iframe</span></div><div style="display: none;" class="open" id="ICONT3"><br>
<iframe id="main" src="http://nicknipigon.blogspot.com.br/" scrolling="no" frameborder="0" frameborder="0" frameborder="0" style="height:200; width:100%"></iframe></div>
DICA:Observe cada IITEM é ele que você escolherá para ficar na sua página. Para ter dois ou mais da opção escolhida basta copia o bloco colar abaixo e renomear IITEM- e ICONT
