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 

Untuk membuat menu pada bagian ini sabaiknya 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

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;
}
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



Komentar