Secara umum, ini dilakukan dengan menggunakan mouse hover onmouseover dan mouse penghapusan Onmouseout.
Pertama adalah struktur HTML
Salinan kode adalah sebagai berikut:
<body>
<Div id = "Div1">
<span> sidebar </span>
</div>
</body>
Lalu ada gaya CSS:
Salinan kode adalah sebagai berikut:
#Div1 {
Lebar: 150px;
Tinggi: 200px;
Latar belakang:#999999;
Posisi: Absolute;
Kiri: -150px;}
menjangkau{
Lebar: 20px;
Tinggi: 70px;
Line-Height: 23px;
Latar Belakang:#09C;
Posisi: Absolute;
Kanan: -20px;
Atas: 70px;}
Sidebar gaya default disembunyikan seperti yang ditunjukkan pada gambar:
Saat mouse dipindahkan, seperti yang ditunjukkan pada gambar:
Ini kode lengkapnya:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> unt judul dokumen </iteme>
<type style = "text/css">
#Div1 {
Lebar: 150px;
Tinggi: 200px;
Latar belakang:#999999;
Posisi: Absolute;
Kiri: -150px;}
menjangkau{
Lebar: 20px;
Tinggi: 70px;
Line-Height: 23px;
Latar Belakang:#09C;
Posisi: Absolute;
Kanan: -20px;
Atas: 70px;}
</tyle>
<script>
window.onload = function () {
var odiv = document.geteLementById ('div1');
odiv.onmouseover = function ()
{
StartMove (0,10); // Parameter pertama adalah nilai target dari atribut div kiri.
}
odiv.onmouseout = function ()
{
startMove (-150, -10);
}
}
var timer = null;
fungsi startmove (target, kecepatan)
{
var odiv = document.geteLementById ('div1');
clearInterval (timer);
timer = setInterval (function () {
if (odiv.offsetleft == target)
{
clearInterval (timer);
}
kalau tidak
{
odiv.style.left = odiv.offsetleft+kecepatan+'px';
}
}, 30)
}
</script>
</head>
<body>
<Div id = "Div1">
<span> sidebar </span>
</div>
</body>
</html>