CSS : Membuat menu Navigasi dengan CSS

Halo kawan , di sini saya akan menuliskan artikel tentang membuat navigasi menggunakan CSS .

PENGERTIAN
Navigasi pada pada suatu web adalah sebagai ptunjuk atau button untuk menuju ke artikel atau post lain. Navigasi pada suatu web dapat terletak di atas , samping kiri kanan , dan bawah .

ALAT & BAHAN

PC / Laptop
Sublime Text
Browser

Disini saya akan memberi contoh navigasi di atas dan samping kiri . Kita buat file html dan masukkan CSS navigasi di dalam script <head> .. </head> dengan
sintag :

<script type="text/css"> ... </script>

Setelah itu ikuti script di bawah ini untuk membuat navigasi di samping kiri :

<!DOCTYPE html>
<html>
<head>
    <title> Drop down Navigation </title>
    <style type="text/css">
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        color: black ;
        background-color: #DCDCDC;
    }
    li a{
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none ;
    }
    li a:hover {
        background-color: black;
        color: white;
    }
    </style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>

Hasil script saat di run

Sekarang kita buat navigasi yang horizontal yang terletak di atas website. buat file dengan format html. lalu lihat contoh script di bawah ini :

<!DOCTYPE html>
<html>
<head>
    <title> Horisontal Navigation</title>
    <style type="text/css">
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #DCDCDC;
        color :black;
    }
    li {
        float: left;
    }
    li a{
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        color: black;
    }
    li a:hover {
        background-color: black;
        color: white
    }
    </style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>

Hasil script saat di run

Dan satu lagi , kita dapat membuat navigasi agar terlihat active saat artikel di buka dengan sintag CSS active . untuk contohnya lihat script di bawah ini :

<!DOCTYPE html>
<html>
<head>
    <title> Active Navigation </title>
    <style type="text/css">
    ul{
       list-style-type: none;
       margin: 0;
       padding: 0;
       overflow: hidden;
       background-color: #F08080;
       color :black;
    }
    li {
       float: left;
    }
    li a{
       display: block;
       color: black;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
       color: black;
    }
    li a:hover {
       background-color: #ffb6c1;
    }
    li.active {
       background-color: green;
    }

    </style>
</head>
<body>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>


Hasil script saat di run

Itu tadi merupakan contoh dari pembuatan navigasi , navigasi tersebut masih navigasi dasar belum ada dropdown nya . untuk pembuatan dropdownnya saya akan beri untuk post selanjutnya. Sekian dulu post kali ini, Terima Kasihh :)