.png)
Cara Membuat Navbar Responsiv dengan CSS Sendiri
Selamat sore Guys kali ini kita akan membuat navbar yang responsive dengan css. Jika dibuat dengan bootstrap itu gampang, tetapi jika membuat dengan css secara manual bagaimana caranya? oke langsung saja. Pertama kita buat dulu struktur htmlnya seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Navbar</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.js"></script>
</head>
<body>
<header>
<h1>Best Website Since Google</h1>
</header>
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Blog</li></a>
<a href="#"><li>Shop</li></a>
<a href="#"><li>Gallery</li></a>
<a href="#"><li>Contact</li></a>
</ul>
<div class="handle">Menu</div>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Navbar</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.js"></script>
</head>
<body>
<header>
<h1>Best Website Since Google</h1>
</header>
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Blog</li></a>
<a href="#"><li>Shop</li></a>
<a href="#"><li>Gallery</li></a>
<a href="#"><li>Contact</li></a>
</ul>
<div class="handle">Menu</div>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
</body>
</html>
lalu buat cssnya seperti berikut:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: #00795f;
width: 100%;
padding: 40px 0;
color: #fff;
text-align: center;
}
a {
text-decoration: none;
font-weight: bold;
color: inherit;
}
nav ul {
background-color: #43a286;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height 0.04s;
-ms-transition: max-height 0.04s;
-moz-transition: max-height 0.04s;
-o-transition: max-height 0.04s;
transition: max-height 0.04s;
}
nav ul li {
display: inline-block;
padding: 20px;
}
nav ul li:hover{
background-color: #399077;
}
section {
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px 50px;
cursor: pointer;
color: #fff;
font-weight: bold;
display: none;
}
@media screen and (max-width: 500px){
nav ul {
max-height: 0;
}
.showing {
max-height: 20em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px 50px;
text-align: left;
}
.handle {
display: block;
}
}
Pada css diatas ada kode @media screen and (max-width: 500px) nah itulah yang membuatnya responsive Pada layar dengan lebar 500px css yang digunakan adalah nav ul {
max-height: 0;
}
.showing {
max-height: 20em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px 50px;
text-align: left;
}
.handle {
display: block;
}
Lalu ada sedikit kode javascript
<script>$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
Kode tersebut berfungsi jika tombol menu diklik maka akan menampilkan isi menunya dengan efek togle. Ok Sekianlah tutorial dari saya tentang cara membuat navbar yang responsive, semoga bermanfaat.
0 komentar :