<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/* digunakan untuk icon menu pada framework ionic */
@import 'https://unpkg.com/ionicons@4.2.2/dist/css/ionicons.min.css';
body, html{
margin:0;
padding: 0;
font-family: serif;
height: 100%;
width: 100%;
}
.menubar{
float: left;
width: 100px;
height: 100%;
background: aqua;
overflow: hidden;
margin-left: -100px;
transition: 0.8s all;
}
.menu{
margin-left: 0;
}
.menubar ul{
margin: 0;
padding: 0;
}
.menubar ul li{
list-style: none;
}
.menubar ul li a{
text-decoration: none;
color: #fff;
height: 80px;
width: 100%;
font-size: 40px;
line-height: 80px;
text-align: center;
display: block;
transition: 0.6s all;
}
.menu ul li a:hover{
background: #abcdef;
}
.icon{
float: left;
padding:0 10px;
font-size: 40px;
text-decoration: none;
color: #2c3e50;
font-family: 'Ionicons';
cursor: pointer;
}
/* value content menggunakan kode dari icon ionic */
.icon:before{
content: '\f32a';
}
/* value content menggunakan kode dari icon ionic */
.icons:before{
content: '\f166';
}
</style>
</head>
<body>
<div class="menubar">
<ul>
<li><a class="ion-logo-instagram" href=""></a></li>
<li><a class="ion-logo-facebook" href=""></a></li>
<li><a class="ion-logo-twitter" href=""></a></li>
<li><a class="ion-logo-whatsapp" href=""></a></li>
<li><a class="ion-md-photos" href=""></a></li>
<li><a class="ion-md-aperture" href=""></a></li>
<li><a class="ion-ios-videocam" href=""></a></li>
<li><a class="ion-logo-game-controller-b" href=""></a></li>
<li><a class="ion-logo-xbox" href=""></a></li>
</ul>
</div>
<a class="icon"></a>
<script type="text/javascript">
$('.icon').on("click", function(){
$('.icon').toggleClass('icons');
$('.menubar').toggleClass('menu');
});
</script>
</body>
</html>
NB : Simpan dan silahkan mencobanya di browser atau aplikasi anda
0 Komentar