Cara Sederhana Membuat Menu Navbar Menggunakan CSS Flexbox

Hallo Rekan-rekan Source Code Aplikasi, di pembahasan artikel ini kita akan merancang fitur navbar sederhana dengan css flexbox. Flexbox sendiri kepanjangan dari Flexible Box yang berfungsi bagi  mengatur element-element child dimana mampu beradaptasi dengan parentnya.

Pada kasus ini kita akan merancang fitur navbar sederhana dengan css flexbox, pemakaian flexbox disini bagi mengatur item-item agar gampang diatur. Baiklah seketika saja kita praktekkan membuatnya, silahkan ikuti strategi berikut:

Langkah pertama-tama

Rekan-rekan buka text editor kemudian bikin file HTML selaku struktur awal, kemudian ketikkan code html seperti dibawah ini:

<header>
        <img class=logo src=logo-distro.png alt= di pembahasan artikel ini kita akan merancang fitur navbar sederhana dengan css flexbox Cara Sederhana Membangun Fitur Navbar Menggunakan CSS Flexbox>
        <nav>
            <ul class=navbar>
<li><a href=#>Home</a></li>
<li><a href=#>Product</a></li>
<li><a href=#>Counter</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Contact</a></li>
</ul>
</nav>
        <a href=# class=btn-login>login</a>
    </header>

di code diatas saya menyisipkan sebuah gambar logo serta item fitur menggunakan unordered-list. Jadi rekan-rekan dapat siapkan logo pun agar menarik.

Langkah kedua

Berikutnya tentu kita akan menambhakan sebuah style dari css agar tampilan semakin cantik, yuk ketikkan style css berikut:

*{  
            margin: 0;
            padding: 0;
            box-sizing: border-box;            
        }
        body{
            background-image: url(desainer-vb.jpg);
background-repeat: repeat;
            background-size: cover;
background-position: center top;
height: 100vh;
font-weight: 800;
font-size: 20px;         
        }
        
        a{
            text-decoration: none;
        }
        header{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 70px;
        }
        .logo{
            cursor: pointer;
            width: 150px;
        }
        .navbar{
            list-style: none;
        }
        .navbar li{
            display: inline-block;
            padding: 0 15px;
            text-transform: uppercase;
        }
        .navbar li a{
            transition: all .3s ease 0s;
            color: #fff;
        }
        .navbar li a:hover{
            color: #FFCC03;
        }
        .btn-login {
            cursor: pointer;
            color: #fff;
            font-size: 16px;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 10px 30px;
            border-radius: 5px;
            background: #C70910;            
        }

jadi di property css yang dimanfaatkan ialah display=flex ,agar setiap item fitur gampang di atur lalu agar tampilan fitur seketika berada di tengah menggunakan justify-content: space-between.

Baiklah kalau telah coba rekan-rekan simpan kemudian simpan dan buka di browser masing-masing bagi melihat hasilnya.

Saya rasa lumayan pada pembahasan di kesempatan kali ini mengenai Cara Sederhana Membangun Fitur Navbar Menggunakan CSS Flexbox. Semoga bermanfaat serta menambahkan referensi belajar dan selamat mencoba. terima kasih.

 

Sumber https://kursuswebsite.org