cfrank65
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by cfrank65
-
-
Hi
I tried to adapt a youtube tutorial to w3schools navigation but it is not working as I expect. Can I get help? also the youtube tutorial detail is posted. thank you , frank
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hamburger Menu Icon</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('.icon').click(function(){
$('.icon').toggleClass('active');
})
})
</script>
<style>
body{
margin:0;
padding:0;
background:#ff5c40;
}
.icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:80px;
height:80px;
cursor:pointer;
background:#000;
}
.hamburger{
width:50px;
height:6px;
background:#fff;
position:absolute;
top:50%;
left:20%;
transform:translate:(-50%,-50%);
box-shadow:0 2px 5px rgba(0,0,0,.2);
transition:.5s;
}
.hamburger:before,
.hamburger:after{
content:'';
position:absolute;
width:50px;
height:6px;
background:#fff;
box-shadow:0 2px 5px rgba();
}
.hamburger:before{
top:-16px;
}
.hamburger:after{
top:16px;
}
.icon.active .hamburger{
background:rgba(0,0,0,0);
box-shadow:0 2px 5px rgba(0,0,0,0);
}
.icon.active .hamburger:before{
top:0;
transform:rotate(45deg);
}
.icon.active .hamburger:after{
top:0;
transform:rotate(135deg);
}
<!-- https://www.youtube.com/watch?v=U17mz-RFfAY -->
</style>
</head>
<body>
<div class="icon">
<div class="hamburger"></div>
</div>
</body>
</html>
animated hamburger icon
in General
Posted
I forgot to mention, the positioning of the hamburger icon is not working, at least what I tried. also I would like to ask, is it working on all browsers?thank you, frank