PERTEMUAN KE-3 Desain Navigasi (Menu)

Capaian Pembelajaran Mahasiswa diharapkan mampu mendemontrasikan cara membuat navigasi atau menu dari sebuah website menggunakan HTML dan CSS.

Bahan Pokok Pembelajaran

Desain Navigasi
Style Navigasi
Tugas

Indikator Penilaian Ketetapan mahasiswa dalam mendemontrasikan bahan dari pokok pembelajaran

Desain Navigasi

Pada bab sebelumnya kita sudah mendesain layout website sederhana mengguna html dan css. Adapaun rancangan layout website yang sudah dibuat adalah seperti berikut ini:

(Gambar 3.1. halaman website sebelumnya)

Gambar diatas merupakan tampilan halaman website yang sudah selesai dibuat pada bab sebelumnya, selanjutnya adalah membuat navigasi atau menu menu dari website tersebut, Adapun menu yang akan dibuat meliputi beranda, daftar buku, tentang kami, kontak dan lainnya. Berikut ini adalah contoh dari menu atau navigasi yang akan dibuat (yang di tandai dalam kotak merah):

(Gambar 3.2. Contoh Navigasi)

Berikut ini adalah Langkah-Langkah dalam membuat atau mendesain navigasi (menu):

a. Buka file index.html

Silahkan buka Kembali file index.html yang sebelumnya sudah dibuat. Kemudian silahkan tulis skrip berikut ini pada bagian div judul.

Adapun skripnya seperti berikut ini:

<ul>

<li><a href=""> Beranda</a></li>

<li><a href="Daftar_Buku.html"> Daftar Buku</a></li>

<li><a href="Tentang_Kami.html"> Tentang Kami</a></li>

<li><a href="Kontak.html"> Kontak</a></li>

<li><a href="other.html"> Lainnya</a></li>

</ul>

Berikut ini adalah tampilan halaman index.html pada text editor:

(Gambar 3.3. Text Editor Desain Navigasi)

b. Tampilan halaman website

Berikut ini adalah tampilan halaman website di browser:

(Gambar 3.4. Tampilan Desain Navigasi)

2. Membuat Style Navigasi

Setelah desain navigasi dibuat pada tahapan di atas, selanjutnya adalah memberi style pada navigasi tersebut. Berikut ini adalah Langkah Langkah dalam memberi style navigasi:

a. Buka file stayle.css

Buka Kembali file stayle.css yang sudah dibuat sebelumnya. Kita akan membuat halaman navigasi yang semulanya vertical menjadi horizontal. Selanjutnya adalah menuliskan skrip berikut pada file

stayle.css.

.header ul li{

display: inline-block;

margin-top: 20px;

margin-right: 10px;

}

Adapun tampilan halaman website ketika di buka di browser adalah seperti gambar dibawah ini:

(Gambar 3.5. Tampilan Desain Style Navigasi)

b. Memberi Warna Pada Navigasi

Setelah selesai pada tahapan sebelumnya membuat atau memberi style horizontal pada navigasi, selanjutnya adalah kita akan membuat style warna pada navigasi tersebut. Adapaun warna navigasi yang akan di beri adalah warna hijau.

Silahkan buka Kembali file stayle.css dan tuliskan skrip berikut setelah skrip sebelumnya.

.header a{

text-decoration: none;

color: #3CB371;

padding: 5px;

}

Adapun tampilan halaman website ketika di buka di browser adalah seperti gambar dibawah ini:

(Gambar 3.6. Tampilan Desain Warna Style Navigasi)

c. Memberi Efek Warna Pada Navigasi

Setelah selesai memberi warna hijau pada navigasi, selanjutnya adalah membuat efek hover pada navigasi.

Efek hover merupakan sebuah animasi sederhana pada navigasi yang memberikan perubahan warna ketika user meletakan atau menunjuk salah satu navigasi tersebut. Silahkan buka Kembali file stayle.css dan tuliskan skrip berikut setelah skrip sebelumnya.

.header a:hover{

background-color: #7FFF00;

color: black;

}

Adapun tampilan halaman website ketika di buka di browser adalah seperti gambar dibawah ini:

(Gambar 3.7. Efek Hover Style)

3. Tugas

Silahkan rancang sebuah halaman website sederhana menggunakan html dan css dengan ketentuan berikut ini:

Desainlah header website dengan ketentuan judul font website sebesar 70px.
Desainlah navigasi website dengan ketentuan warna navigasi merah dan efek navigasi berwarna kuning.
Buatlah navigasi atau menu minimal memiliki 6 navigasi, dimana dua diantaranya bisa di akses atau berfungsi ketika di klik navigasi tersebut.