Cara Membuat Nav Bar Situs Web Transparan

Dengan mengatur gaya bilah navigasi Anda dengan cara tertentu, Anda dapat memperkuat merek dan desain untuk bisnis Anda. Menggunakan kombinasi kode HTML dan CSS (Cascading Style Sheet) untuk menentukan tampilan bilah navigasi Anda, Anda dapat membuat tampilan dan nuansa yang konsisten di seluruh situs Anda. Jika Anda memilih untuk membuat bilah navigasi transparan, ini berarti warnanya akan sama dengan latar belakang atau latar belakang elemen yang memuatnya.

1

Buat bagian HTML untuk bilah navigasi Anda. Dalam file HTML untuk halaman yang Anda kerjakan, cari bagian yang ingin Anda tambahi bilah navigasi. Gunakan elemen untuk menampungnya sebagai berikut:

Di antara tag pembuka dan penutup, Anda dapat menempatkan tautan navigasi Anda.

2

Sertakan elemen jangkar untuk setiap tautan navigasi yang Anda butuhkan. Di dalam elemen "nav", tambahkan elemen jangkar untuk setiap tautan yang Anda inginkan agar dapat dijelajahi pengguna. Berikut ini adalah contoh elemen tautan yang tertaut ke bagian situs:

Tentang

Ini menautkan ke bagian dalam situs yang terletak di folder bernama "tentang" yang ada di direktori yang sama dengan halaman tempat kode ini muncul. Untuk menautkan ke halaman, bukan folder, markup akan muncul seperti berikut untuk HTML :

Tentang

3

Tambahkan bagian gaya ke halaman Anda. Untuk mengatur gaya bilah navigasi, Anda memerlukan bagian untuk kode CSS. Di bagian head halaman Anda, sebelum tag penutup, tambahkan satu sebagai berikut:

Di dalamnya, Anda dapat menambahkan deklarasi untuk memberi gaya pada elemen di halaman Anda.

4

Tata jangkar. Di bagian CSS halaman Anda, tambahkan deklarasi untuk mengatur gaya jangkar di bilah navigasi Anda. Misalnya, untuk memberi gaya semua elemen jangkar di dalam with "nav" sebagai atribut ID-nya, Anda dapat menggunakan pemilih berikut:

/ style declarations /

}

Ini menunjukkan jangkar di semua negara bagian. Di dalam bagian ini Anda dapat menambahkan deklarasi gaya apa pun yang ingin Anda terapkan, misalnya:

dekorasi-teks: tidak ada; lebar: 100px; tampilan: blok; float: kiri;

Ini adalah properti standar untuk menampilkan jangkar berdampingan satu sama lain pada garis horizontal. Untuk mengatur gaya elemen itu sendiri, gunakan sintaks berikut:

lebar: 800px; }

5

Beri gaya pada latar belakang. Jika Anda tidak menerapkan properti latar belakang ke bilah navigasi Anda di CSS, itu akan ditampilkan dengan latar belakang transparan secara default. Namun, ini mungkin ditampilkan dengan latar belakang halaman atau elemen lain yang mengandung di belakangnya. Misalnya, deklarasi CSS berikut untuk elemen body akan menyebabkan gambar latar ditampilkan di belakang bilah navigasi:

tubuh {background-image: url ("bgpic.jpg"); }

Kecuali Anda menentukan gambar latar belakang atau warna untuk bilah navigasi, bilah navigasi akan ditampilkan dengan latar transparan.