Saturday 19 January 2013

Tutorial : Simple Tab Menu

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

 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!

7 comments

19 January 2013 at 14:47

hehe thanks yaw dik ;)

19 January 2013 at 17:16

share ilmu..tambah pahala..Allah suka..masuk syurga..ok akk pantun nih..

20 January 2013 at 13:30

eh ? kenapa hazirah try x jdy ekk ?

20 January 2013 at 13:50

dah try tpy x leh napa ekk ?

21 January 2013 at 19:16

TQ yeay jadi..

21 January 2013 at 19:16

TQ yeay jadi..

3 January 2016 at 01:55

Kite guna ye ;)

Post a Comment