Membuat Menu Navigation Bar Fixed pada Posisi Atas

Update Terakhir pada

Assalamualaikum Wr. Wb.

Man teman Alhamdulillah kali ini kita akan share ilmu lagi.

Pada kesempatan kali ini, kita akan berlajar tentang membuat Menu Navigasi. Nah, menu Navigasi itu biasanya terletak pada bagian atas.
Digunakan untuk mengarahkan ke suatu halaman, berdasarkan nama menu Navigasi tersebut.

Di postingan ini kita akan membuat menu navigasi yang posisinya tetap di atas saat kita scroll halamannya ke bawah.

Konsep kali ini, kita akan membuat dalam bentuk Landing Page dan ada efek smooth scrollingnya. Materi tersebut sudah pernah diposting disini (“https://www.webhozz.com/blog/membuat-efek-smooth-scrolling-pada-css/).
Jadi, temanya gak jauh dari itu. Cuma disini akan ada menu navigasinya.

Oke, langsung aja kita mulai ya codingnya. Lets Go…

  1. Buatlah sebuah file HTML, lalu ketikkan script html berikut.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navbar Fixed</title>
    <link rel="stylesheet" href="ceseses.css">
</head>
<body>
    
    <nav>
        <ul>
            <li><a href="#menu1">Menu 1</a></li>
            <li><a href="#menu2">Menu 2</a></li>
            <li><a href="#menu3">Menu 3</a></li>
        </ul>
    </nav>

    <section id="menu1">
        <h2>Menu 1</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti molestias, iusto at adipisci sed sapiente ut ea distinctio accusamus odit? Blanditiis velit eveniet amet ex. Cumque sapiente vero quod esse?
        </p>
    </section>

    <section id="menu2">
        <h2>Menu 2</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti molestias, iusto at adipisci sed sapiente ut ea distinctio accusamus odit? Blanditiis velit eveniet amet ex. Cumque sapiente vero quod esse?
        </p>
    </section>

    <section id="menu3">
        <h2>Menu 3</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti molestias, iusto at adipisci sed sapiente ut ea distinctio accusamus odit? Blanditiis velit eveniet amet ex. Cumque sapiente vero quod esse?
        </p>
    </section>

</body>
</html>

2. Buat file CSS untuk script HTML yang tadi kita buat. Lalu ketikkan script berikut.

//=============================
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html, body, section
{
    position: relative;
    height: 100%;
}

html
{
    scroll-behavior: smooth;
}

nav ul
{
    list-style-type: none;
    background-color: chocolate;
    overflow: hidden;
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 1;
}

nav li
{
    float: left;
    margin-left: 20px;
}

nav ul li a
{
    display: block;
    padding: 15px;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover
{
    background-color:black;
    transition-duration: 2s;
}

section
{
    padding: 80px;
}

h2
{
    margin-bottom: 20px;
}

#menu1
{
    background-color: black;
    color: white;
}

#menu2
{
    background-color: white;
    color: black;
}

#menu3
{
    background-color: crimson;
    color: white;
}
//=============================

3. Sambungkan file HTML dan CSS tersebut, lewat file HTMLnya. Biasanya pada bagian .

<link rel="stylesheet" href="nama_file_cssnya.css">

4. Jalankan filenya di browser, maka tampilan saat awalnya seperti ini.

5. Lalu, coba scroll halamannya ke bawah. Sampai ke halaman baru. Seperti di bawah ini kita melihat Menu Navigasinya tetap di atas walaupun discroll.

6. Terus kita coba scroll hingga ke halaman yang terakhir.

Yah, kira-kira begitulah caranya. Untuk detailnya, gimana caranya menu navigasi tersebut bisa tetap di atas. Terdapat pada script berikut.

nav ul
{
    list-style-type: none;
    background-color: chocolate;
    overflow: hidden;
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 1;
}

Pada script tersebut yang paling berpengaruh dalam posisi fixed adalah berikut ini.

top: 0;
position: fixed;
width: 100%;
z-index: 1;

Adapun uraiannya adalah berikut ini.
top: 0; berfungsi supaya navigasi menempati posisi paling atas.
position: fixed; berfungsi agar navigasi tetap di atas saat di scroll ke bawah.
width: 100%; berfungsi agar menu navigasinya memiliki lebar sepenuh layar aplikasi browser.
z-index: 1; berfungsi seperti layer pada Photoshop, tujuannya adalah supaya layer navigasi menempati posisi paling atas.

Nah, gimana? Mudah kan???

Selamat mencoba ya, semoga bermanfaat. Amin.

Walaikumsalam Wr. Wb.