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 :DJavascript 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://<![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>
- Script warna merah. Letakan diatas tag </head>
- Script warna kuning. Kode CSS yg biasanya diletakin sebelum kode ]]></b:skin> Silahkan kreasi sendiri, Beben percaya kalau masalah CSS pasti sudah pada mahir b-)
- Script warna biru. 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/
#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>
Loading... |
5 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...