Wah sedang rehat nih,dan gak tau mau ngapain. Buka laptop dan kepikiran mau bikin sesusatu untuk nulis artikel di blog. Kali ini saya iseng iseng membuat menu website yang responsive tanpa bootstrap. Alhamdulillah bisa jalan dan berhasil,hehe. Cukup mudah dan sederhana, cuma butuh jquery saja. Penasaran pengen lihat bagaimana cara membuatnya, yuk di simak. Cukup buat file index.html dan file style.css serta jquery. jika anda tidak memiliki jquery silahkan download disini. Sourcecode index.html sebagai berikut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>kiblatwebsite.blogspot.co.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn-menu").click(function(){
$("nav").slideToggle('2');
});
});
</script>
</head>
<body>
<div class="wrapper">
<header>
<h2>Membuat Menu Responsive Dan Keren</h2>
</header>
<div class="menu"> <a id="btn-menu" href="#"> + </a></div>
<nav>
<a href="#">Beranda</a>
<a href="#">Profil</a>
<a href="#">Berita</a>
<a href="#">Hubungi Kami</a>
</nav>
<main>
<h2>Lorem Ipsum is simply</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<h2>Lorem Ipsum is simply</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</main>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>kiblatwebsite.blogspot.co.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn-menu").click(function(){
$("nav").slideToggle('2');
});
});
</script>
</head>
<body>
<div class="wrapper">
<header>
<h2>Membuat Menu Responsive Dan Keren</h2>
</header>
<div class="menu"> <a id="btn-menu" href="#"> + </a></div>
<nav>
<a href="#">Beranda</a>
<a href="#">Profil</a>
<a href="#">Berita</a>
<a href="#">Hubungi Kami</a>
</nav>
<main>
<h2>Lorem Ipsum is simply</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<h2>Lorem Ipsum is simply</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</main>
</div>
</body>
</html>
Sedangkan isi style.css sebagai berikut
body{
padding: 0px;
margin:0px;
}
header,nav,main{
display: block;
}
header{
background: rgba(0,0,225,0.6);
padding: 10px;
color: #e7e7e7;
text-align: center;
}
nav{
height: 40px;
background: rgba(0,0,225,0.2);
}
nav a{
padding: 10px;
text-decoration-line: none;
transition: 2s;
float: left;
}
nav a:hover{
background: rgba(0,0,225,0.6);
transform: rotate(360deg);
transition: 2s;
color: #fff;
border:1px solid #fff;
}
main{
clear: both;
padding: 10px;
}
.menu{
color: #fff;
font-size: 35px;
display: none;
background: rgba(0,0,225,0.4);
text-align: right;
}
@media (max-width: 425px) {
.menu{
display: block;
}
.menu a{
text-decoration-line: none;
background: rgba(0,0,225,0.2);
padding: 0px 10px;
color: #fff;
}
.menu a:hover{
transform: scale(1,2);
}
nav{
display: none;
height: auto;
}
nav a{
float: none;
display: block;
border-bottom: 1px solid #e7e7e7;
}
nav a:hover{
transform: rotate(0deg);
border:none;
border-bottom: 1px solid #e7e7e7;
}
}
padding: 0px;
margin:0px;
}
header,nav,main{
display: block;
}
header{
background: rgba(0,0,225,0.6);
padding: 10px;
color: #e7e7e7;
text-align: center;
}
nav{
height: 40px;
background: rgba(0,0,225,0.2);
}
nav a{
padding: 10px;
text-decoration-line: none;
transition: 2s;
float: left;
}
nav a:hover{
background: rgba(0,0,225,0.6);
transform: rotate(360deg);
transition: 2s;
color: #fff;
border:1px solid #fff;
}
main{
clear: both;
padding: 10px;
}
.menu{
color: #fff;
font-size: 35px;
display: none;
background: rgba(0,0,225,0.4);
text-align: right;
}
@media (max-width: 425px) {
.menu{
display: block;
}
.menu a{
text-decoration-line: none;
background: rgba(0,0,225,0.2);
padding: 0px 10px;
color: #fff;
}
.menu a:hover{
transform: scale(1,2);
}
nav{
display: none;
height: auto;
}
nav a{
float: none;
display: block;
border-bottom: 1px solid #e7e7e7;
}
nav a:hover{
transform: rotate(0deg);
border:none;
border-bottom: 1px solid #e7e7e7;
}
}
Sedangkan lokasi filenya pastikan dalam satu folder ya,
hasil akhirnya bisa di lihat disini https://youtu.be/ax2b9LvDw04. Atau di http://www.demoredsscript.co.nf/menuresponsive/ Cukup sederhana sih tapi semoga bermanfaat. Ammiiiiiin !
