Membuat Side Menu Menggunakan Framework Foundation

Halo kawan Dumenity, kali ini saya ingin berbagi tentang cara membuat side menu menggunakan framework foundation. untuk lebih jelasnya langsung kita simak saja tutorial berikut.

 

Download Framework Foundation disini lalu diekstrak, kemudian copy 3 folder berikut kedalam folder project kalian

Membuat Side Menu Menggunakan Framework Foundation-1.JPG

 

Selanjutnya buat file html baru dengan nama index.html di dalam folder project kalian.

Membuat Side Menu Menggunakan Framework Foundation-2.JPG

 

Sekarang kita buat ketik kode berikut  kedalam file html untuk menghubungkan semua file yang dibutuhkan pada tutorial ini.

 

Sekarang kita buat struktur untuk navigasi utama dengan mengetikan kode ini dibawah tag <body>

Membuat Side Menu Menggunakan Framework Foundation-4.JPG

 

Sekarang kita buat lagi untuk isi menu sebelah kiri dan kanan dengan mengetikan kode berikut diatas tag penutup </nav>

Membuat Side Menu Menggunakan Framework Foundation-5.JPG

 

Struktur navigasi sudah jadi, lalu kita akan membuat konten utama yang ada ditengah halaman web dengan memberika kode berikut dibawah tag penutup </aside> list menu sebelah kanan..

Membuat Side Menu Menggunakan Framework Foundation-6.JPG

 

Jika sudah sekarang coba save dan jalankan di browser kalian dan klik tombol di pojok kanan dan kiri atas... nanti akan terlihat halaman seperti ini

 

Membuat Side Menu Menggunakan Framework Foundation-8.JPG

 

Membuat Side Menu Menggunakan Framework Foundation-8.JPG

 

Nahh.. sekarang teman-teman bisa menerapkan pada website yang kalian punya, semoga artikel cara membuat side menu menggunakan framework foundation ini bisa bermanfaat untuk kalian.

3 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat