Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

November 18, 2012

Tutorial Buat Navigate Box

hello hello, hai selamat petang semuanya. ok petang ni nina nak share korang buat navigate box. apa tu? ha bunyi dia macam tahu kan. hehe dia macam menu bar juga lah tp yang ni jimat ruang. semua boleh masuk dalam satu box ni. rupa dia? ha mcam ni ha.. :D
langkah 1 :
mula mula korang copy code dekat bawah ni dan pastekan di ruangan http://htmledit.squarefree.com/ (ada tulisan nanti delete dulu baru paste code ni). korang boleh edit di situ dulu dan dia ada preview terus tab korang tu. senang sikit kan..
<style>
.adv2 ul{background:url(http://i.imgur.com/idEbA.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555}
.adv2 p{padding:5px;text-align:left;width:250px;color:#555;}
a.tablo{-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#fff;
width:20px;
text-decoration:none; 
border:1px dashed #BBBBBB; 
border-radius:33px;
color:#555; 
display:inline-block;
text-align:center;
}
a.tablo:hover{background:#ccc;color:#fff;}
 </style>
<div id="adv2" class="adv2">
<center><style>
.babo{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:3px solid #F2F4F2;text-align:center;width:250px;color:#555}
a.tablo{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#F2F4F2;
width:20px;
text-decoration:none; 
border:3px solid #fff; 
color:#fff;
box-shadow:1px 1px 3px #eee;
border-radius:33px;
display:inline-block;
text-align:center;
font:16px calibri;
}
a.tablo:hover{background:#F7E8DE;color:#fff;}
#wnsb img{max-width:245px;}
 </style>
<div class="babo">
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </div>
<div id="wnsb" style="width:250px;color:#ccc; padding:5px;border:3px solid #F2F4F2;border-top:none;font:11px arial; letter-spacing:1px;">
Navigate around. Replace this with anything/your own words.
</div>
<div id="1" style="display: none;">
Remove this and replace with YOUR WORDS/CODES.
</div>
<div id="2" style="display: none;">
You can also put cbox codes here.
</div>
<div id="3" style="display: none;">
Your banner here.
</div>
<div id="4" style="display: none;">
Your credit sides also can put here.
</div>
</center>
langkah 2 :
dah siap edit ? ok pergi dashboard -> design --> add a gadget --> HTML/Javascript
langkah 3:
copy code tadi yang sudah siap di edit dan pastekan dekat ruangan HTML/Javascript
langkah 4 :
dah paste code tu JANGAN TEKAN RICH TEXT tu tau. nanti tak jadi ye. save terus! :)


No comments:

Post a Comment

Thank you for comment. Come again :)

WARNING!
AKTA 588, AKTA KOMUNIKASI DAN MULTIMEDIA 1998
Seseorang yang menggunakan applikasi dengan memulakan penghantaran apa-apa komen, permintaan, cadangan atau komunikasi lain yang lucah, sumbang, palsu, mengancam atau jelik sifatnya dengan niat untuk menyakitkan hati, menganiayai, mengugut atau mengganggu orang lain; atau tanpa mendedahkan identitinya dan dengan niat untuk menyakitkan hati, menganiayai, mengugut atau mengganggu mana-mana orang di mana-mana nombor atau alamat elektronik, adalah melakukan satu kesalahan dan boleh didenda tidak melebihi RM 50,000.00 @ dipenjarakan selama tempoh tidak melebihi 1 tahun @ kedua-duanya.