Rabu, 05 Januari 2011

Show Hide or Appear Lost

Artikel kali ini akan membahas tidak jauh mengenai show/hide dengan menggunakan javascript dan HTML sob :D Jadi disini Beben si bloglang anu ganteng kalem tea hanya memberikan serentetan kode dan script show/hide, dalam penggunaannya silahkan tinggal kreasi sobat masing-masing :P Jika kode HTML mirip trik hover, ketika disorot maka akan muncul apa yg tersembunyi ;) Pada javascript ketika diklik maka akan timbul juga yg nyumput itu :-" Karena berupa kode dan script mentah maka disini kita memerlukan alat bantu online. Kita ambil saja yg ini Tryit Editor, buka dan nanti akan ada script<html>
<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>

</body>
</html>
Hapuslah terlebih dahulu script tersebut yah ;) Setelah dihapus, baru deh ini sobat praktekan kode-kodenya :D

Javascript show/hide

<script>
//<![CDATA[
function showHide() {
if (document.getElementById('openOff').style.display == 'block') {
document.getElementById('openOff').style.display = 'none';
} else {
document.getElementById('openOff').style.display = 'block';
}
}
//]]>
</script>

<style>
#openOff { }
</style>

<a href="javascript:showHide();">Open/Off</a>

<div id="openOff" style="display:none">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
</div>
Keterangan warna tulisan pada script:
  1. Script warna merah.
  2. Letakan diatas tag </head>
  3. Script warna kuning.
  4. Kode CSS yg biasanya diletakin sebelum kode ]]></b:skin> Silahkan kreasi sendiri, Beben percaya kalau masalah CSS pasti sudah pada mahir b-)
  5. Script warna biru.
  6. Kode HTML yg mana dimasukan didalam tag <body> ... </body> template.

HTML hover

<style>
#ekstramenu .current a, #ekstramenu li:hover > a {
background: red;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#ekstramenu li:hover > ul {
display: block;
}
#ekstramenu ul {
list-style-type:none;
color:#000000;
text-align:left;
display: none;
margin: 0;
padding: 5px;
width: 235px;
left: 0;
background: #999999;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>

<ul id="ekstramenu">
<li class="current"><a href="#">Shout Box</a>
<ul>
<li>
<!-- YOUR CONTENT HERE -->
PUTT YOUR CODED CONTENT HERE YOOO!!!
<!-- END CONTENT -->
</li>
</ul>
</li>
</ul>
Happy creaty \m/

Tidak ada komentar:

Posting Komentar