Saya sedang membuat situs web dan memiliki daftar tombol vertikal di sepanjang sisi kiri situs. Saya ingin menyembunyikannya di bagian samping sehingga hanya tab yang ditampilkan. Ketika menu disembunyikan, saya ingin tab mengatakan sesuatu seperti Lainnya, lalu ketika menu terlihat, saya ingin tab mengatakan sembunyikan.
Jadi saya punya beberapa pertanyaan... Bagaimana cara membuat menu, yang pada dasarnya hanya sebuah div, meluncur keluar dari luar layar saat diklik, sementara teks pada tab berubah dan tujuan href berubah sehingga ketika fungsi slide selesai, tab akan bertuliskan sembunyikan, dan ketika diklik, itu akan mengirim div kembali keluar dari layar.
Jika Anda memiliki aplikasi facebook di ponsel Anda, pada dasarnya saya ingin meniru hal itu di situs web desktop saya.
Hal ini cukup mudah menggunakan jQuery. Berikut ini adalah langkah-langkah yang harus Anda ambil.
Penting - event toggle sudah tidak digunakan lagi di jQuery 1.8 dan dihapus di 1.9. Jawaban asli saya tidak akan berfungsi lagi. Versi baru ini akan bekerja di versi jQuery yang lebih lama dan yang lebih baru. Metode ini menggunakan penangan klik dan kelas yang disebut hidden
untuk menentukan apakah popout harus dianimasikan di dalam/luar layar.
jQuery
//when the trigger is clicked we check to see if the popout is currently hidden
//based on the hidden we choose the correct animation
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
left: 0
}, 'slow', function () {
$('#trigger span').html('Close'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
left: -40
}, 'slow', function () {
$('#trigger span').html('Show'); //change the trigger text at end of animation
});
}
/* minimal CSS */
#popout {
position: fixed; /* fix the popout to the left side of the screen */
top: 50px;
left: -40px; /* use a negative margin to pull the icon area of the popout off the edge of the page */
width: 75px;
border: 1px dotted gray;
color: gray;
}
#trigger { /* create a clickable area that triggers the slide in/out effect */
position: absolute; /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */
top: 0;
bottom: 0;
right: 0;
cursor: pointer;
}
http://jsfiddle.net/WMGXr/1/
$('#toggle').toggle(
function() {
$('#popout').animate({ left: 0 }, 'slow', function() {
$('#toggle').html('Close');
});
},
function() {
$('#popout').animate({ left: -40 }, 'slow', function() {
$('#toggle').html('Show');
});
}
);
<div id="popout">
<div id="toggle">Show</div>
<br style="clear: both" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray; background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }
Mengapa tidak menggunakan `Transisi CSS3 saja?
Ini cukup sederhana dan sementara itu didukung penuh oleh Internet Explorer (10) juga.
Berikut ini adalah tutorial yang bagus: Menggunakan transisi CSS
Dan contoh yang bagus dari menu tersebut: Menu geser dan dorong