Senin, 05 Oktober 2009

Membuat Menu Horizontal Pada ASP.Net 2.0

Ketika menampilkan struktur menu, tampilan default dari control Navigation Menu pada Toolbox adalah vertikal. Tapi bagaimana caranya mengubah tampilan menu secara horizontal seperti yang ada pada menu situs facebook.com??



Tampilan menu secara horizontal akan diperlukan terutama jika ingin menaruh menu tadi di sebelah atas atau di bagian header.

Berikut cara membuat menu secara horizontal.


1. Buat web project baru, klik File, pilih New, klik WebSite, kemudian pilih Empty Website atau ASP.Net Website

2. Tambahkan file SiteMap dengan cara klik menu File, pilih New File atau tekan kombinasi tombol Ctrl+N untuk menaruh file baru. Pilih template Site Map. Atau dengan cara klik kanan pada web project, klik add New Item, pilih SiteMap File. Beri nama File SiteMap, misal Web.sitemap.

3. Buat struktur menu dari file Web.sitemap tadi.

4. Tambahkan file xx.aspx dengan cara yang sama di atas(no 2), lalu pilih template Web Form. Beri nama Default.aspx.

5. Drag control navigasi Menu pada ToolBox, lalu letakkan pada halaman Default.aspx atau Web Form.

6. Klik tanda [segitiga] yang ada di sebelah kanan atas control Menu untuk memunculkan Smart Tag. Dari Smart Tag, pilih Choose Data Source, lalu pilih

7. Setelah muncul Data Source Configuration Wizard, pilih Site Map. Maka otomatis akan menampilkan root,node dari siteMap, control Menu akan mempunyai struktur menu yang dibuat di file site map sebelumnya.

8. Klik kanan pada control Menu, lalu pilih Properties untuk menampilkan properties dari control Menu tadi. Pilih property Orientation, ubah nilainya dari Vertical menjadi Horizontal. Lalu ubah nilai property StaticDisplayLevel dari 1 menjadi 2.

9. Lakukan proses debugging pada file Default.aspx dengan cara klik menu Debug, pilih Start Debugging atau tekan tombol F5. Akan keluar window berikut, pilih yang pertama untuk menaruh file Web.config baru pada project.

10. Setelah itu pada browser akan muncul menu yang tampil secara horizontal.

Dari Berbagai Sumber(http://dna.blogsome.com)

0 komentar: