Membuat Menu Navigasi Responsive Hanya Menggunakan Html Dan Css
Pada kesempatan kali ini kita akan mendesign Navigation Menu/Navigasi Samping Responsive Hanya menggunakan Html Dan Css , tidak ada sentuhan Javascript sedikitpun.
Anda mungkin pernah melihat menu navigasi di banyak situs web. umumnya navigasi menu adalah element antarmuka pengguna UI dalam halaman web yang menyertakan tautan kebagian lain dari situs web tersebut.
Pada program ini terdapat Navbar dibagian atas halaman dengan logo dibagian kiri dan menu button disebelah kanan untuk membuka element Navigasi Menu transisi dengan link tautan situs di dalamnya.
Terutama saya menggunakan media Query Css untuk membuat Navbar ini responsive untuk perangkat apapun Selular/Tab Maupun Dekstop, saya harap temen temen semua sudah memahami html dan css dasar untuk menerapkan ini , terutama saya menggunakan <input type="checkbox"> dan mengontrol kotak centang ini dengan tag <label>.
Ngoding
pertama temen temen buat dua file terlebih dahulu , yang satu untuk .html dan dua untuk .css atau mungkin boleh digabungkan.
File.html
<!DOCTYPE html>
<!-- By desaincode.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="brand">Brand</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
<div class="content">
<div>
Responsive Navigation Menu Design</div>
<div>Hanya HTML & CSS</div>
</div>
</body>
</html>
Selanjutnya Tambahkan css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav{
display: flex;
height: 80px;
width: 100%;
background: #577ee8;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .brand{
color: #fff;
font-size: 25px;
font-weight: 600;
text-transform: uppercase
}
nav ul{
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover{
color: #111;
background: #fff;
}
nav .menu-btn i{
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"]{
display: none;
}
@media (max-width: 1000px){
nav{
padding: 0 40px 0 50px;
}
}
@media (max-width: 920px) {
nav .menu-btn i{
display: block;
}
#click:checked ~ .menu-btn i:before{
content: "\f00d";
}
nav ul{
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul{
left: 0;
}
nav ul li{
width: 100%;
margin: 40px 0;
}
nav ul li a{
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a{
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover{
background: none;
color: #577ee8;
}
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: -1;
width: 100%;
padding: 0 30px;
color: #1b1b1b;
}
.content div{
font-size: 40px;
font-weight: 700;
}
Selesai. dan Silahkan Coba Lihat Hasilnya. Semoga bermanfaat :)
tes
BalasHapustes
Hapus