Ellie
March 8, 2018, 11:52am
1
I’m making a hamburger menu but I can’t make it work. I don’t know much about jQuery so I don’t really know if this is really an issue or this is really how fadeToggle works and I’m just lacking some codes. I tried looking for possible solutions but I can’t find one since I don’t know what the real issue is.
This is how it looks like now. The menu fades immediately even if I don’t click close. And if I click the close button, menu shows then fade again. What I wanna do is like how usual hamburger menu works.
If anyone could give me any clue on what’s happening here, that would be a huge help. Thank you so much.
Here’s the jQuery code.
$(document).ready(function(){
$(".spinner-master2").click(function(){
$(".main-nav").fadeToggle();
});
});
Well first impulse is something else is triggering a fadeToggle. Without seeing the page, it’s hard to diagnose.
1 Like
On a second glance… something is changing your hamburger into an X, but the code you posted doesnt do that… so i’m even more strongly suspecting you’ve got a second fadeToggle in there… probably inside the code that does the Hamburger → X change.
Ellie
March 9, 2018, 12:28am
4
Hi, @m_hutley .
This is where I got the code for the hamburger. https://codepen.io/anon/pen/PGXzww (the second one there)
Here is the complete code:index-menu.html (3.1 KB)style-menu.css (4.8 KB)
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style-menu.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="jquery.scrollify.js"></script>
<script type="text/javascript">
$(function() {
$.scrollify({
section : ".section",
scrollSpeed: 500
});
});
</script>
<script>
$(document).ready(function(){
$(".spinner-master2").click(function(){
$(".main-nav").fadeToggle();
});
});
</script>
</head>
<body>
<div class="section" style="background-color: #ffffff; background-image: url(img/home-bg.png); background-size: cover; background-repeat: no-repeat; background-position: center center; text-align: center; margin: auto;">
<div>
<div style="display: flex; width: 1640px; justify-content: space-between; margin: auto; max-width: 100%; padding: 20px;">
<div>
<img src="logo-p1.png"/>
<img id="logo-right" src="logo-p2.png"/>
</div>
<div class="main-nav">
<ul style="display: flex;">
<li style="padding: 0 20px;"><a href="#about-us">ABOUT US</a></li>
<li style="padding: 0 20px;"><a href="#facility">FACILITY</a></li>
<li style="padding: 0 20px;"><a href="#services">SERVICES</a></li>
<li style="padding: 0 20px;"><a href="#about-us">GET STARTED</a></li>
</ul>
</div>
<div class="spinner-master2">
<input type="checkbox" id="spinner-form2" />
<label for="spinner-form2" class="spinner-spin2">
<div class="spinner2 diagonal part-1"></div>
<div class="spinner2 horizontal"></div>
<div class="spinner2 diagonal part-2"></div>
</label>
</div>
</div>
<div class="flex-container" style="min-height: 80vh;">
<div>
<h1 class="hosting-heading" style="font-family: sans-serif; font-size: 60px; color: #ffffff; margin: auto;">SOME HEADING</h1>
<p id="hosting-text" style="font-family: sans-serif; font-size: 24px; color: #ffffff; margin: auto; text-align: center;">SOME TEXT</p>
</div>
<div style="padding-top: 50px;">
<a class="get-started-button" href="#" style="border: 1px solid white; padding: 10px 40px;">GET STARTED</a>
</div>
</div>
</div>
</div>
</body>
</html>
css
@font-face {
font-family: 'GothamBook';
src: url(Gotham-Book.otf);
}
body {
font-family: 'GothamBook' !important;
}
html, body, .section, .slide {
/* Height and width fallback for older browsers. */
height: 100%;
min-width: 100%;
/* Set the height to match that of the viewport. */
min-height: 100vh;
/* Set the width to match that of the viewport. */
min-width: 100vw;
/* Remove any browser-default margins. */
margin: 0;
}
.section {
min-height: 100%;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.transparent-bg {
position: static;
}
.wrap {
max-width: 1060px;
width: 96%;
margin: 0 auto;
position: relative;
}
p {
margin: 0;
}
.flex-container {
padding: 20px;
display: flex;
flex-wrap: wrap;
min-height: 100vh;
align-items: center;
justify-content: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
max-width: 100%;
margin: auto;
}
/* HEADER STYLE */
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
margin: 0;
min-height: 100vh;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: #FFFFFF;
}
a {
text-decoration: none;
}
.flex-container img {
max-width: 100%;
}
/* SECOND VERSION */
.spinner-master2 * {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;}
.spinner-master2 {position:relative;height:50px;width:50px;}
.spinner-master2 input[type=checkbox] {display:none;}
.spinner-master2 label {cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:10px;left:0;}
.spinner-master2 .spinner2 {position:absolute;height:5px;width:100%;background-color:#ffffff;}
.spinner-master2 .diagonal.part-1 {position:relative;float:left;}
.spinner-master2 .horizontal {position:relative;float:left;margin-top:7px;}
.spinner-master2 .diagonal.part-2 {position:relative;float:left;margin-top:6px;}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal {opacity: 0;}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 {transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:10px;}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 {transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-16px;}
/* MEDIA QUERIES */
@media (min-width: 1025px) {
.main-nav{
display: block !important;
}
.spinner-master2 {
display: none !important;
}
.get-started-button {
display: none !important;
}
}
@media screen and (max-width: 1622px){
.flex-container {
-webkit-flex-direction: column;
flex-direction: column;
}
.column-reverse {
-webkit-flex-direction: column-reverse !important;
flex-direction: column-reverse !important;
}
}
@media (max-width: 1024px) {
.main-nav{
display: none;
}
.spinner-master2 {
display: block;
}
#logo-right {
display: none;
}
.main-nav ul {
display: flex !important;
flex-direction: column !important;
}
#get-started-button {
display: block;
}
}
@media (max-width: 750px) {
.hosting-heading {
font-size: 45px !important;
}
#hosting-text {
font-size: 20px;
}
}
@media (max-width: 500px) {
.hosting-heading {
font-size: 35px !important;
}
#hosting-text {
font-size: 15px;
}
}
@media (max-width: 400px) {
.hosting-heading {
font-size: 30px !important;
}
#hosting-text {
font-size: 18px !important;
}
}
Mmm CSS drawing and animations. Fun stuff.
What I can tell you is that the click trigger is being fired twice. What I cant tell exactly is why.
What I can do to fix it is instead bind the click trigger to $(".spinner-master2 label"), which causes the event to only fire once, and the code to work correctly.
1 Like
Ellie
March 9, 2018, 1:12am
6
This solved it.
Thank you so much, @m_hutley .
1 Like
system
June 8, 2018, 8:12am
7
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
