Tutorial : Simple Tab Menu

by - 14:37:00

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ 

 Dengan menyebut nama Allah Yang Maha Pemurah lagi Maha Penyayang”


Alhamdulilah. Sukan Merentas Desa berjaan dengan lancar. Pembelajaran pun lancar seperti yang diharapkan. Biasalah kalau penat kan. Adat budak sekolah. In Shaa Allah tahun ni batc 96 akan melakar hari yang paling bersejarah. Last sekola :-( Mesti kita rindukan suasana ini. Hmm.

Haritu Akak Rodiyatul ada request nak simple tab menu macam saya. Terlebih dahulu Aisyhah nak ucapkan ribuan terima kasi dekat NABILA MEDAN. Nabila seorang yang baik dan comel. Aisyhah guna tutorial dia:-D Aisyhah dah mintak kat Nabila untuk repost tutorial. Btw Kitorang sama umur yang penting. Nabila goodluck untuk SPM :-D


<style>
.tabmenu1 {
text-align:center;
width:260px;
color:#333333
}
a.tabmenu {
cursor:vertical-text;
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" >TAJUK 1</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav2').innerHTML" >TAJUK 2</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav3').innerHTML" >TAJUK 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
</div></div>
</div></div>

1. Awak boleh edit dekat http://htmledit.squarefree.com/
2. Bila dah siap awak paste dekat HTML
3. Pastikan korang dah paste dan jangan click " RICH TEXT" Sebab takut nanti tak jadi.
4. Semoga berjaya!

You May Also Like

7 Comments