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.
Well, for some reason your CSS tells the page NOT to render your hamburger. Which threw me off. (My screen is wider than 1025px)
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.
It’s a wee bit confusing though.
Thank you so much, @m_hutley .
1 Like
system
Closed
June 8, 2018, 8:12am
7
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.