Senin, 25 November 2013

Membuat 3 menu tab di blog

copy paste code dibawah ini;
masukkan kedalam ruangan html/javascript

semoga berhasil .. .  .

save dan lihat hasilnya

<style>


.tabmenu1 {


text-align:center;


width:260px;


color:#333333


}


a.tabmenu {




background: pink;


width:84px;


text-decoration:none;


color:#333333;


display:inline-block;


padding-top:10px;


padding-bottom:10px;


text-align:center;


font:12 georgia;


letter-spacing:2px;


-webkit-transition-duration:0.5s;


}


a.tabmenu:hover {


background: #000;


color:#fff;


-webkit-transition-duration:0.5s;


}


#menu img { max-width:260px;}


 </style>


<center><div class="tabmenu1">


<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav1').innerHTML" >PAGE 1</a>


<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav2').innerHTML" >PAGE 2</a>


<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav3').innerHTML" >PAGE 3</a>


<div id="menu" style="width:260px;color:#333333;font:12px verdana;">


WELCOME


</div>


<div id="nav1" style="display: none;">


ISI 1


</div></div>


<div id="nav2" style="display: none;">


ISI 2


</div>


</div>


<div id="nav3" style="display: none;">


ISI 3,p.
j<p>
asdaqw<p>
sd


</div></div>

</div></div>

Tidak ada komentar:

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.