CSS - Menu Navigasi Vertikal

Pada materi kali ini saya ingin menunjukkan kepada Anda beberapa opsi berbeda yang bias Anda saat Anda menata laman web. Disini kita akan coba buat Menu navigasi vertikal. Menu navigasi merupakan link berupa sedikit konten yang memberikan pesan informasi kepada pengunjung web, yang akan memudahkan visitor untuk mecari kategori yang dibutuhkan dalam sebuah situs.

Jadi di browser saya, ketika sudah mengerjakan project web, tampak hasilnya membosankan. Jadi timbul ide untuk melakukan penyegaran pada web dengan mencoba membuat navigasi bar yang menggunakan link sederhana. Disini link didesain sebaris, jadi mereka saling berdampingan. Tidak ada warna. Jadi kita bias mendesainnya kembali dengan memasukkan beberapa style dari CSS. Bisa juga anda desain bagian body, memasukkan beberapa warna latar belakang, padding, dan margin.

Pada desain menu ini, Salah satu hal yang saya inginkan lakukan adalah menunjukkan kepada Anda yang pertama dilakukan buatlah menu navigasi dengan html seperti contoh berikut:

<ul>
        <li><h3>kategori</h3>
        <li><a href="#">kategori 1</a></li>
        <li><a href="#">kategori 2</a></li>
        <li><a href="#">kategori 3</a></li>
        <li><a href="#">kategori 4</a></li>
    </ul>

Sekarang kita gunakan CSS, Jika hasil diatas terlihat seperti ini:

Hasilnya :

menu1

Kita akan hapus daftar penanda, jadi tidak perlu margin dan padding disitu dan menghapus pengaturan default dari browser, Saya coba masukkan margin:0; padding:0; dan list-style-type: none; jadi syntax bisa seperti ini:

<html>
<head>
<style type="text/css">
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<div id="sidebar">


 <ul>
        <li><h3>kategori</h3>
        <li><a href="#">kategori 1</a></li>
        <li><a href="#">kategori 2</a></li>
        <li><a href="#">kategori 3</a></li>
        <li><a href="#">kategori 4</a></li>
    </ul>
    </div>
</body>
</html>

Hasilnya :

menu2

Jadi terlihat dari result anda tidak terlalu memikirkan untuk menghitung berapa lebar,berapa banyak padding, berapa banyak border. Anda tidak harus melakukan matematika. Browser akan melakukannya untuk Anda. Sekarang kita coba memberi beberapa batasan sederhana, warna, warna latar belakang, dll. Hal pertama yang saya lakukan, saya ingin navigasi yang posisinya tergantung pada lebar halaman anda, atau overflow cukup menggunakan value auto saja. Mari kita test jika lebarnya sekitar 10% halaman dan kemudian ditambahkan beberapa margin.

Oh ya, untuk membuat menu navigasi vertical, anda gunakan style

<a>

elemen dalam daftar.

<html>
<head>
<style type="text/css">
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
 width: 10%;
            background-color: blue;
            position: fixed;
            height: 100%;
            overflow: auto;
}
li a{
            display: block;
            color: #000;
            padding: 8px 0px 8px 16px;
            text-decoration: underline;
        }
</style>
</head>
<body>
<div id="sidebar">


 <ul>
        <li><h3>kategori</h3>
        <li><a href="#">kategori 1</a></li>
        <li><a href="#">kategori 2</a></li>
        <li><a href="#">kategori 3</a></li>
        <li><a href="#">kategori 4</a></li>
    </ul>
    </div>
</body>
</html>

Hasilnya :

menu3

Oke, navigasi sudah mulai terbentuk, dengan menggunakan latar belakang biru, ya terserah anda nantinya warna kesukaannya apa,kemudian posisi kita gunakan “fixed” agar posisi tetap mesti digulir dan overflow: auto ini untuk mengaaktifkan pengguliran jika sidenav juga memilikinya.

display: block; diatas untuk Menampilkan link sebagai elemen blok. Jadi seluruh tautan daerah yang dapat diklik secara utuh dan anda bisa mengatur padding, height atau width jika anda mau.

Sekarang mengubah link aktif dan link hover, sebagaimana yang sudah dipelajadi di CSS styling links, saya coba tambahkan kode dibawah:

li a.active{
            background-color: #4caf50;
            color: white;
        }
li a:hover:not(.active){
            background-color: #555;
            color: white;
        }


Lengkapnya seperti ini:

<html>
<head>
<style type="text/css">
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
 width: 10%;
            background-color: blue;
            position: fixed;
            height: 100%;
            overflow: auto;
}
li a{
            display: block;
            color: #000;
            padding: 8px 0px 8px 16px;
            text-decoration: underline;
        }
li a.active{
            background-color: #4caf50;
            color: white;
        }
        li a:hover:not(.active){
            background-color: #555;
            color: white;
        }
</style>
</head>
<body>
<div id="sidebar">


 <ul>
        <li><h3>kategori</h3>
        <li><a href="#">kategori 1</a></li>
        <li><a href="#">kategori 2</a></li>
        <li><a href="#">kategori 3</a></li>
        <li><a href="#">kategori 4</a></li>
    </ul>
    </div>
</body>
</html>

Saat link hover,

Hasilnya :

menu4

Anda juga bisa memberi batasan (border) pada link, disamping itu mengatur posisi text link bisa menggunakan text-align:center untuk

<li>

atau

<a>

ke pusat link.

Lihat contoh berikut:

<html>
<head>
<style type="text/css">
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
 width: 10%;
            background-color: blue;
            position: fixed;
            height: 100%;
            overflow: auto;
}
li a{
            display: block;
            color: #000;
            padding: 8px 0px 8px 16px;
            text-decoration: underline;
        }
li a.active{
            background-color: #4caf50;
            color: white;
        }
        li a:hover:not(.active){
            background-color: #555;
            color: white;
        }
ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #fff;
}

li:last-child {
    border-bottom: none;
}
</style>
</head>
<body>
<div id="sidebar">


 <ul>
        <li><h3>kategori</h3>
        <li><a href="#">kategori 1</a></li>
        <li><a href="#">kategori 2</a></li>
        <li><a href="#">kategori 3</a></li>
        <li><a href="#">kategori 4</a></li>
    </ul>
    </div>
</body>
</html>

Oke kita coba test dengan contoh artikel dan tulisan, dengan menambahkan paragraph pada body.

p {
            margin-left: 10%;
            padding: 1px 16px;
            height: 1000px;
        }

Lengkapnya:

<html>
<head>
<style type="text/css">
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
 width: 10%;
            background-color: blue;
            position: fixed;
            height: 100%;
            overflow: auto;
}
li a{
            display: block;
            color: #000;
            padding: 8px 0px 8px 16px;
            text-decoration: underline;
        }
li a.active{
            background-color: #4caf50;
            color: white;
        }
        li a:hover:not(.active){
            background-color: #555;
            color: white;
        }
ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #fff;
}

li:last-child {
    border-bottom: none;
}
p {
            margin-left: 10%;
            padding: 1px 16px;
            height: 1000px;
        }
</style>
</head>
<body>
<div id="sidebar">


 <ul>
        <li><h3>kategori</h3>
        <li><a href="#">kategori 1</a></li>
        <li><a href="#">kategori 2</a></li>
        <li><a href="#">kategori 3</a></li>
        <li><a href="#">kategori 4</a></li>
    </ul>
<p>Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata Test Kata</p>



</p>
    </div>
</body>
</html>

Hasilnya :

menu5

Itulah penjelasan singkat jika anda berniat membuat menu navigasi vertical, anda bisa lakukan uji coba dengan menambahkan beberapa kode lagi sepeti

li {
    float: left;
}

agar linknya berada disebelah kiri, dll, ya tergantung ide dan kreatif anda. Semoga Berhasil.