Hallo Sahabat Dumetschool, pada pembahasan artikel ini kita akan membuat menu navbar sederhana dengan css flexbox. Flexbox sendiri kepanjangan dari Flexible Box yang berfungsi untuk mengatur element-element child dimana mampu beradaptasi dengan parentnya.
Dalam kasus ini kita akan membuat menu navbar sederhana dengan css flexbox, penggunaan flexbox disini untuk mengatur item-item agar mudah diatur. Baiklah langsung saja kita praktekkan membuatnya, silahkan ikuti langkah-langkah berikut:
Langkah pertama
Sahabat buka text editor kemudian buat file HTML sebagai struktur awal, kemudian ketikkan code html seperti dibawah ini:
<header>
<img class="logo" src="logo-distro.png" alt="">
<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>
pada code diatas saya menyisipkan sebuah gambar logo serta item menu menggunakan unordered-list. Jadi sahabat bisa siapkan logo juga agar menarik.
Langkah kedua
Selanjutnya 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 pada property css yang dipakai adalah display=flex ,agar setiap item menu mudah di atur lalu agar tampilan menu langsung berada di tengah menggunakan justify-content: space-between.
Baiklah jika sudah coba sahabat simpan kemudian simpan dan buka pada browser masing-masing untuk melihat hasilnya.
Saya rasa cukup dalam pembahasan pada kesempatan kali ini tentang Cara Sederhana Membuat Menu Navbar Menggunakan CSS Flexbox. Semoga bermanfaat serta menambahkan referensi belajar dan selamat mencoba. terima kasih.
The post Cara Sederhana Membuat Menu Navbar Menggunakan CSS Flexbox appeared first on Kursus Website Terbaik.