July 25, 2024

Membuat SPRY Menu Bar untuk sebuah web dengan menggunakan CSS

2 min read

Ada beberapa hal yang perlu diperhatikan agar tampilan sebuah web terlihat tampat menarik, seperti desain background pada header, layout, dan tampilan tombol menu. Tombol menu Spry Menu Bar dapat kita buat dengan menggunakan CSS.

Berikut adalah langkah – langkah pembuatan Spry Menu Bar dengan menggunakan CSS.

Langkah 1

Siapkan terlebih dahulu 2 file yaitu HTML dan CSS. Disini Html berperan sebagai desain struktur daripada web yang akan kita buat. Sedangkan CSS berperan sebagai file style daripada web yang kita buat.

Langkah 2

Pada file HTML kita buat terlebih dahulu struktur/layout webnya dengan mengunakan tag <div> dan selector id, seperti pada gambar.

Langkah 3

Selanjutya, pada file CSS kita tentukan berapa lebar (width), tinggi (height) ukuran web dan bakground yang ingin kita buat, serta menentukan ukuran dari header, menu, isi, dan footer. Adapun kode CSS nya seperti pada gambar.

Langkah 4

Pada File HTML tepatnya pada bagian isi dari tag <div id=”isi”> masukkan kode untuk list menunya. Adapun kode list menu nya adalah sebagai berikut :

<ul>
<li> <a href="#">About Us</a></li>

<li><a href="#">News</a></li>

<li><a href="#">Gallery</a></li>

<li><a href="#">Product</a></li>

</ul>

Lebih jelasnya, perhatikan gambar di bawah ini:

Langkah 5

Pada file CSS kita setting untuk tampilan dari pada menu nya. Adapun kode untuk menyetting listnya sebagai berikut :

List-style → tampilan list, text-decoration → tampilan dekorasi text seperti Underline, Overline, dan lain–lain. Berikut tampilan seluruh kode setelah ditambah dengan kode untuk <ul> dan <li>.

Berikut ini adalah tampilan web setelah ditambah kode ul dan li.

Langkah 6

Setelah itu, tambahkan kode ul & li lagi dalam menu Gallery dalam file HTML nya, seperti pada gambar di bawah ini.

Hasil Akhir

Dibawah ini adalah tampilan menu Dengan Spry Menu Bar dengan menggunakan CSS.

Semoga berhasil 🙂

0 thoughts on “Membuat SPRY Menu Bar untuk sebuah web dengan menggunakan CSS

  1. waduh koding na make gambar neh, sedikit ngak jelas…gimana neh, sedangkan untuk color text link na tabrakan dengan color back na, apakah ini karena ruang na sempit…

    tapi wow, ini yang ku mau, ajarin nanti na…

  2. buk herlin pnya q kox gax tampil ya spry barnya…malah jadi seperti list gtu…gmna solusinya…

  3. @bingung : di css na kamu tulis ngak

    id = #menu ul li ul{
    ini berfungsi untuk menghilangkan menu dropdown na, karena menggunakan display:none;}

    dan id = #menu ul li:hover ul {
    ini untuk menampilkan nya krena menggunakan display:block; }

    yang id = #menu ul li ul li{
    untuk mensejajarkan tampilan dari menu dropdown na…

    mungkin itu saja penjelasan na…

  4. Raise : Thanks BAntuan penjelasannya..Tu Selesai dicoba Kodenya Ku Print Screen ,jd Ghitu Deh,, Map yuach..

    @Secret : Emank Beda,,!!!
    langkah 5 : Hanya Tampilan UL Li saja( About US, new, Gallery, Product),kodenya Ada diatas Gambar langkah 5

    Langkah 6 : pada kode ul li yg product Baru ditambah lgi ul li untuk (product 1, product 2 dan strusnya).. perhatikan Kode diatasnya..

    Pada CssNya untuk mengatur Anak Dari menu Product( product 1, product 2 dan strusnya) perhatikan kode bagian #menu ul li ul,..

    Oke ThaNks,, slamat mencoba …!!!!!!!!!!

Leave a Reply

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

Copyright © All rights reserved. | Newsphere by AF themes.