Tutorial Pemrograman

Cara Membuat Menu Navigasi Samping dengan CSS3

Umumnya tampilan menu navigasi berada di bawah header. Namun dengan bantuan dari CSS3, kita dapat memodifikasi bentuk serta letak menu navigasi. Salah satunya adalah meletakkan menu navigasi di samping kanan atau kiri website. Lalu bagaimana cara membuatnya, serta tampilannya nanti? Tidak sulit kok, kamu hanya perlu mengikuti beberapa langkah mudah di bawah ini:

1. Buka XAMPP yang terinstall dikomputer kamu. Untuk menghubungkan antara coding dan website, aktifkan Apache.

2. Buka teks editor, disini saya menggunakan Notepad++. Ketikkan kode HTML5 berikut ini.

Simpan kode HTML5 di folder xampplite → htdocs → buat folder baru dengan nama sideNavBar → simpan code HTML5 dengan nama index.php.

3. Untuk melihat hasil, buka browser di komputer kamu dan ketikkan alamat url: http://localhost/sideNavBar, dan lihat hasilnya.

4. Tampilan website menunjukkan beberapa simbol dan teks yang berantakkan. Untuk mempercantik tampilan, ketikkan kode CSS3 berikut.

Simpan kode HTML5 di folder xampplite → htdocs → buat folder baru dengan nama sideNavBar → simpan kode CSS3 dengan nama style.css.

5. Reload alamat url: http://localhost/sideNavBar, dan lihat hasilnya. Tampilan website sudah cukup baik, namun tombol share belum bisa digunakan.

6. Untuk mengaktifkan tombol share, kita perlu menambahkan kode JavaScript di file index.php. Buka kembali file index.php, dan ketikkan kode JavaScript berikut ini sebelum kode </body>.

Jangan lupa untuk Ctrl+S.

7. Reload alamat url: http://localhost/sideNavBar, dan cobalah untuk klik tanda share.

8. Selesai, dan hasilnya cukup menarik. Sekarang kamu bisa menerapkan kode di atas untuk menampilkan menu navigasi samping di website kamu.

Mudah sekali bukan. Sekian tutorial ‘Cara Membuat Menu Navigasi Samping dengan CSS3’. Selamat mencoba.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top