0 CSS menu vertikal dengan show / hide efek

CSS menu dan "Web 2.0" efek transisi adalah topik yang sangat populer di situs saya dan secara umum saya menerima banyak permintaan kode tentang argumen ini.

Jadi saya menulis tutorial sederhana dengan dua contoh menu vertikal dengan menampilkan / menyembunyikan menu efek. Contoh pertama menggunakan kode JavaScript yang sederhana. Contoh kedua menggunakan Mootools untuk menampilkan / menyembunyikan menu dengan efek slide-in/slide-out bagus vertikal.

Download source code (itu termasuk Mootools kerangka) dan melihat di live preview untuk melihat bagaimana mereka woork.

Download this tutorial Live preview

1. Menu dengan sederhana show / hide efek
Langkah 1.1: Kode HTML
Ini adalah contoh dasar dengan acara sederhana / menyembunyikan efek yang Anda dapat menerapkan hanya dengan beberapa baris kode JavaScript (lihat langkah berikutnya). Menu kami adalah daftar <ul> wih tombol (link) yang memanggil fungsi javascript showElement sederhana () pada langkah berikutnya. HTML kode berikut dan Anda dapat menyesuaikan bagaimana Anda lebih suka hanya dengan mengubah kode CSS di file sumber:

<a href= "#" class= "button" onclick= "javascript:showElement('v-menu')">
<span> Klik Disini </ span>
</ A>
<Ul id = "v-menu" class = "v-menu" style = "display: none;">

<a href= "p1.html"> Teknologi </ a> </ li>
<a href= "p2.html"> Desain </ a> </ li>
<a href= "p3.html"> Css Galeri </ a> </ li>
<a href= "p4.html"> Hiburan </ a> </ li>
<a href= "p5.html"> Pemrograman </ a> </ li>

</ Ul>

Ingatlah untuk menambahkan properti "display: none" pada elemen ul menyembunyikan menu ketika seorang pengguna membuka halaman (itu hanya akan muncul ketika pengguna mengklik sebuah tombol).

1. Menu dengan sederhana show / hide efek
Langkah 1.2: fungsi JavaScript
Sekarang, pada tag kepala halaman, tambahkan script sederhana untuk menampilkan / menyembunyikan elemen HTML generik menggunakan CSS properti display:

<script type= "text/javascript">
fungsi showElement (lapisan) {
var = myLayer dokumen getElementById (lapisan).;
if (myLayer.style.display == "none") {
myLayer.style.display = "blok";
myLayer.backgroundPosition = "top";
} Else {
myLayer.style.display = "none";
}
}
</ Script>

showElement () fungsi mengambil masukan ID dari elemen HTML Anda ingin menampilkan / menyembunyikan. Ketika seorang pengguna mengklik tombol dan CSS properti tampilan diatur ke "none" (menu tersembunyi) script ini akan mengeset properti dengan "blok" nilai baru (menu terlihat).


2. Menu dengan Mootools beralih efek
Langkah 2.1: Kode HTML
Ini contoh kedua menambahkan slide-in/slide vertikal bagus keluar efek pada menu menggunakan efek Mootools beralih. Kode HTML tidak begitu berbeda dengan contoh sebelumnya. Anda memiliki:

<A href = "#" class = "tombol" id = "beralih"> <span> Klik Disini </ span>
</ A>
<Ul id = "v-menu" class = "v-menu" >

<a href= "p1.html"> Teknologi </ a> </ li>
<a href= "p2.html"> Desain </ a> </ li>
<a href= "p3.html"> Css Galeri </ a> </ li>
<a href= "p4.html"> Hiburan </ a> </ li>
<a href= "p5.html"> Pemrograman </ a> </ li>

</ Ul>

... Anda hanya perlu menambahkan ID ke tombol yang menampilkan / menyembunyikan menu Anda. Ini tidak perlu untuk menambahkan properti "display: none" saya gunakan di contoh sebelumnya di <ul> menyembunyikan menu ketika seorang pengguna load halaman pertama kalinya. Anda dapat melakukannya dengan menggunakan Mootools hide () fungsi (lihat langkah berikutnya).


2. Menu dengan Mootools beralih efek
Langkah 2.2: JavaScript / kode Mootools
Sekarang, pertama-tama, tambahkan link ke kerangka mootools di tag dari halaman Anda menggunakan baris kode ini:

<script type= "text/javascript" src= "mootools.svn.js"> </ script>

... .. Dan script berikut tepat di bawah kode sebelumnya:

<script type= "text/javascript">
jendela addEvent ('domready', function (). {
var myMenu = new Fx.Slide ('v-menu2');
myMenu.hide ();
$ ('Beralih') addEvent ('klik', function (e). {
e = new Acara (e);
myMenu.toggle ();
e.stop ();
});
});
</ Script>

Dengan cara ini ketika pengguna mengklik sebuah tombol, menu akan muncul / Disapper dengan vertikal bagus slide-in, slide-out efek myMenu.hide ();. Funcion menyembunyikan menu ketika halaman dibuka.


Sesuaikan menu Anda mengubah kode CSS
Anda dapat mengubah tampilan menu saya hanya mengubah beberapa baris kode CSS:

Download source code dan melihat di live preview untuk melihat bagaimana mereka woork.

Download this tutorial Live preview