Belajar HTML Dan CSS Membuat Menu Navigasi Horizontal

Belajar HTML Dan CSS Membuat Menu Navigasi Horizontal
Belajar HTML Dan CSS Membuat Menu Navigasi Horizontal

Labkom99.com- Jika pada bagian pertama kita telah mencoba membuat template. Bagian ini kita mempelajari Cara Membuat Menu Navigasi Horisontal Menggunakan HTML dan CSS. Hari ini saya akan membagikan contoh manu yang dibuat oleh HTML dan CSS.


Alat / bahan baku

Notepad


Perhatian Sebelum Membuat Menu Navigasi Horizontal

Untuk membuat menu pada bagian ini sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas  pada pembahasan Bagaimana Cara Membuat Template HTML 

Baca Juga : Belajar HTML + CSS: Penggunaan Dan Penjelasan Element CSS Float


Metode / langkah Membuat Menu Navigasi Horizontal

Read More

Seperti yang ditunjukkan pada gambar di bawah ini, menu navigasi umumnya berasal dari perintah div dengan tag ul dan li.

<div>
   <ul>
     <li><a href=””>Home</a></li>
     <li><a href=””>HTML</a></li>
     <li><a href=””>CSS</a></li>
     <li><a href=””>JQuery</a></li>
     <li><a href=””>PHP</a></li>
   </ul>
</div>

Setelah selesai menulis tata letak menu , mulailah menulis CSS Style untuk navigasi, seperti yang ditunjukkan pada gambar.

Baca Juga : Belajar HTML + CSS: Membuat Berbagai Bentuk ” Shape ” Dengan HTML dan CSS3

*{
   margin: 0;
   padding: 0;  
 }

Kemudian cari div bar navigasi. Di sini saya akan menggunakan posisi absolut untuk memusatkannya. Jika kalian dapat mengganti jika memiliki metode pemusatan bar navigasi lainnya

div{
   background-color:#70a298; 
   width: 1000px;
   position:absolute;
   left:50%;
   margin-left: -500px;
}

Kemudian atur menu navigasi agar melayang ke kiri, dan hapus titik-titik di depan li untuk membuat bilah navigasi terlihat lebih baik.

Baca Juga : Belajar HTML Membuat Paragraf

div ul li{
         float:left;
         list-style-type: none;
}

Kemudian atur tab navigasi tingkat tab, dan lebar dan tinggi menu navigasi, warna teks, dan warna latar belakang dan menghapus garis bawah tab.

div ul li a{
           display: block;
           width: 200px;
           text-align: center;
           line-height: 40px;
           border:#0b0101;
           text-decoration: none;
}

Baca Juga : Software Sederhana untuk Membuat Homepage

Kemudian atur mouse untuk berubah warna melalui menu bar navigasi.

div ul li a:hover{
                  background: #f2f1eb;
}

Pada akhirnya, menu bar navigasi sempurna selesai dan dibawah  ini ada code lengkapnya

<! Doctype html> 
<html lang = “en”> 
    <head> 
        <title>LabKom99.Com</title> 
        <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />  
        <meta name=”keywords” content=”Belajar HTML, Template HTML “>
        <meta name=”description” content=”Belajar HTML Dengan Cepat”>
     </head>
        <style>
            *{
                margin: 0;
                padding: 0;  
            }
            div{
                background-color:#70a298; 
                width: 1000px;
                position:absolute;
                left:50%;
                margin-left: -500px;
            }
            div ul li{
                float:left;
                list-style-type: none;
            }
            div ul li a{
                display: block;
                width: 200px;
                text-align: center;
                line-height: 40px;
                border:#0b0101;
                text-decoration: none;
            }
            div ul li a:hover{
                background: #f2f1eb;
            }
        </style>
    <body>
        <div>
            <ul>
                <li><a href=””>Home</a></li>
                <li><a href=””>HTML</a></li>
                <li><a href=””>CSS</a></li>
                <li><a href=””>JQuery</a></li>
                <li><a href=””>PHP</a></li>
            </ul>
        </div>
    </body>
</html>

Hasilnya

Belajar HTML Dan CSS Membuat Menu Navigasi Horizontal


Kesimpulan

Pada membuat bagian ini adalah bagian dasar dalam membuat sebuah desain website. Menu merupakan bagian penting dalam alur navigasi website. Hanya dengan menggunakan tol notepad kalian sudah dapat mempraktikan artikel ini. Cukup copi paste kode yang sudah disediaakan. Untuk warna dan gaya silahkan sesuaikan dengan keinginan anda. Selamat Mencoba..

Related posts

Leave a Reply

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