Develop Reference

responsive navigation toggle menu issue

I have been working on my portfolio website and I can't seem to get my responsive navigation working properly.
The normal navigation works fine, but the responsive navigation toggle menu presents issues on the mobile version. When the toggle is clicked it changes from the menu icon to the X icon, but the drop-down navigation menu doesn't appear.
I have been trying to solve this issue and cannot seem to find a solution. Any feedback would be appreciated, HTML, CSS & JavaScript below.
$(window).load(function() {
$('span.nav-btn').click(function() {
$('ul.nav').toggle();
})
$(window).resize(function() {
if ($(window).width() > 660) {
$('ul.nav').removeAttr('style')
}
})
});
function myFunction(x) {
x.classList.toggle("change");
}
nav {
letter-spacing: 1.9px;
float: right;
padding: 10px;
margin: 60px 150px 0px 0px;
}
.nav>li {
display: inline-block;
}
.nav>li>a {
color: #000;
font-size: 12px;
padding: 18px;
transition: all 0.5s ease;
text-transform: uppercase;
}
.nav>li>a:hover {
color: #c3dbc5;
}
.nav .current {
font-weight: bolder;
}
#media screen and (max-width: 900px) {
nav {
margin: 0px;
padding: 0px;
}
.nav {
display: none;
}
ul {
padding: 0px;
}
.nav>li {
margin-top: 50px;
padding: 15px 0px 0px 15px;
width: 100%;
list-style: none !important;
text-align: center;
}
.nav>li>a {
font-size: 16px;
}
.container_nav {
display: block;
cursor: pointer;
position: relative;
padding: 50px;
margin-top: 0px;
}
.container_nav.change {
display: block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
}
<nav role="navigation" id="nav">
<ul class="nav">
<li>Work</li>
<li>About</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<div class="container_nav" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<span class="nav-btn"></span>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You need to change a couple of things in your code to get things done.
Get your nav hamburger icon out of the nav container.
The comment says it right, remove the onclick function from the container_nav div.
Replace your entire jquery code with
$(document).ready(function () {
$("div.container_nav").click(function () {
$("div.container_nav").toggleClass("change");
$("ul.nav").toggleClass("toggle-menu");
});
});
You're adding .change both the time to the container_nav which isn't toggling the menu because nothing changes at .nav so rename your .container_nav.change class to .nav.toggle-menu.
The comment section is always open if you're stuck again.

changing the color of hamburger icon in a responsive sticky nav bar

I'm trying to change the color of a hamburger menu in a sticky nav for a responsive website.
At the moment, the nav bar and menus are styled and toggled with css and js.
Everything thing works fine, but recently i've had to make some changes and have run into this problem.
This is how it works;
- the nav bar sticks to the top of the screen and changes color on scroll.
- On narrow width screens, some js hides the menu text links and toggles a hamburger menu.
- on clicking the hamburger menu, an overlay menu is toggled
The problem i'm having is I've changed the background color of the sticky menu bar on scroll - but I can't see how to change the color of the hamburger icon on scroll.
here's what I have...
<!-- Script Sticky Menu -->
<script type="text/javascript">
window.addEventListener("scroll", function(){
if(window.pageYOffset > 50){
document.getElementById("main-nav").className = "scrolling";
} else {
document.getElementById("main-nav").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("nav-page-section").className = "scrolling";
} else {
document.getElementById("nav-page-section").className = "";
}
if(window.pageYOffset > 50){
document.getElementById("vb-logo-mobile").className = "scrolling";
} else {
document.getElementById("vb-logo-mobile").className = "";
}
})
</script>
Inside "nav-page-section" is a container for the hamburger button...
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
This css styles the button_container...
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
Initially, i added an additional line to the script...
if(window.pageYOffset > 50){
document.getElementsByClassName("button_container").className = "scrolling";
} else {
document.getElementsByClassName("button_container").className = "";
}
And added this css styling...
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
But that hasn't worked. I searched around for a way to target a specific tag ('span') within a classname ('button_container') but didn't find anything.
I keep looking at the span tag and thinking that's what's tripping me up - but i've tried many different variations of the script and nothing seems to work. When i add [0] after the classname - ('button_container')[0] - the hamburger menu disappears.
Anyone have any ideas?
Thanks.
Here is the full CSS and HTML...
/* 7. Main Menu - Hamburger */
/* icon+overlay */
.overlay-menu ul li a {
display: inline-block;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 20px;
font-family: 'HurmeGeometricSans1';
font-weight: 200;
overflow: hidden;
top: 5px;
}
.overlay-menu ul li a:after {
content: '';
position: absolute;
background: #E4002B;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.overlay-menu ul li a:hover:after, .overlay-menu ul li a:focus:after, .overlay-menu ul li a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 18px;
right: 18px;
height: 26px;
width: 30px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fff;
border: none;
height: 2px;
width: 90%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container.scrolling {
background: #E4002B;
color: #E4002B;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
<!-- start Hamburger Menu & Overlay Menu -->
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>V:WEAR</li>
<li>V:GEAR</li>
<li>V:MECHS</li>
<li>V:RDAS</li>
<li>V:LIQUID</li>
</ul>
</nav>
</div>
<!-- end Hamburger Menu & Overlay Menu -->

As far as I understand the spans in the button_container are the bars of the hamburger menu. So, to change color on scroll, I would say:
.scrolling .button_container span {
background-color: red;
}
Replace red with the preferred color.

document.getElementsByClassName("button_container").className
won't work since
document.getElementsByClassName("button_container")
is an array, and you have to iterate the array and assign to element you want.
if(window.pageYOffset > 50){
document.getElementsByClassName("button_container")[0].className = "scrolling";
} else {
document.getElementsByClassName("button_container")[0].className = "";
}

Jquery Slide Menu Toggle

I'm trying to build a slide in/out nav menu with jquery but I ran into a problem. If I click the 'fa-bars' icon, and only that, everything works smoothly. However, when I click the 'fa-times' icon to close the nav menu (which I want it to do) it works as desired but the 'fa-bars' icon is no longer clickable in order to re-open the menu. I know it has something to do with my JS code but I just can't crack it.
body {
overflow-x: hidden;
}
ul {
list-style: none;
margin-top: 0px;
padding: 0;
}
li {
font-size: 30px;
color: black;
}
.fa-bars {
position: static;
left: 100px;
top: 10px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.fa-bars:hover {
opacity: 0.7;
}
.fa-times {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.fa-times:hover {
opacity: 0.7;
}
nav {
background-color: lightslategrey;
width: 250px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1;
transform: translate3d(-250px, 0, 0);
transition: all 0.5s ease-in-out;
}
.active-nav {
transform: translate3d(0,0,0);
}
.closed-nav {
transform: translate3d(-250px, 0, 0);
}
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
<nav>
<ul>
<i class="fa fa-times fa-2x"></i>
<li>New TO</li>
<li>Street TO</li>
<li>Classy TO</li>
<li>Athletic TO</li>
</ul>
</nav>
JS:
$(function () {
$('.fa-bars').click(function () {
$('nav').toggleClass('active-nav');
});
$('.fa-times').click(function() {
$('.active-nav').toggleClass('closed-nav');
});
});
https://jsfiddle.net/sdvb45nj/

The problem starts when clicking the close button
$('.active-nav').toggleClass('closed-nav');
With the above code you will add closed-nav to the nav which will close ... after that you use
$('nav').toggleClass('active-nav');
With the above code you remove active-nav from nav while closed-nav still on
so you need to remove the closed-nav class and add active-nav ..
To solve that you can use
$('nav').removeClass('closed-nav').addClass('active-nav');
instead of
$('nav').toggleClass('active-nav');
$(function () {
$('.fa-bars').click(function () {
$('nav').removeClass('closed-nav').addClass('active-nav');
});
$('.fa-times').click(function() {
$('.active-nav').toggleClass('closed-nav');
});
});
body {
overflow-x: hidden;
}
ul {
list-style: none;
margin-top: 0px;
padding: 0;
}
li {
font-size: 30px;
color: black;
}
.fa-bars {
position: static;
left: 100px;
top: 10px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.fa-bars:hover {
opacity: 0.7;
}
.fa-times {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.fa-times:hover {
opacity: 0.7;
}
nav {
background-color: lightslategrey;
width: 250px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1;
transform: translate3d(-250px, 0, 0);
transition: all 0.5s ease-in-out;
}
.active-nav {
transform: translate3d(0,0,0);
}
.closed-nav {
transform: translate3d(-250px, 0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
<nav>
<ul>
<i class="fa fa-times fa-2x"></i>
<li>New TO</li>
<li>Street TO</li>
<li>Classy TO</li>
<li>Athletic TO</li>
</ul>
</nav>

Your event handlers are being called correctly but you are toggling the wrong class, The following fixes the problem.
$('.fa-bars').click(function () {
$('nav').toggleClass('active-nav');
});
$('.fa-times').click(function() {
$('.active-nav').toggleClass('active-nav');
});

Create an animation from left to the middle

I need to create an animation which will make a menu appear from the left side of the screen. This animation should be started on a click on a button.
The content of the menu should recover 55% of the width of the main page.
JSFiddle Demo
In the previous link you can the the menu and the button to move left. At the beginning the menu (with the "link" elements) should be hidden and the button .glyhicon should be at the very left of the page.
On click on this button the menu and the button should move to the right and recover 55% of the main page.
The problem is I don't know how to do this. (I managed to move the menu by changing the structure but I couldn't move the button.)
Here is my HTML code
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
<div id="icon-menu" class="test">
<button id="button_menu" class="js-menu menu" type="button">
<span class="glyphicon glyphicon-map-marker"></span>
</button>
</div>
</div>
CSS :
#left-menu {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#map-menu, #icon-menu {
display: inline-block;
vertical-align: middle;
}
.menu {
background: 0;
float: left;
margin: 2rem;
height: 2.7rem;
width: 3.5rem;
z-index: 2;
outline: 0;
padding: 0;
border: 0;
}
.menu_content{
width: 60%;
height: 100%;
background: #eaeaea;
position: fixed;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91), -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
padding-top: 6.2rem;
z-index: 1;
}
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
javascript :
var isActive = false;
$('.js-menu').on('click', function() {
if (isActive) {
$(this).removeClass('active');
$('#left_menu').removeClass('menu-open');
/*$('#button_menu').removeClass('move-right');
$('#button_menu').addClass('move-left');*/
} else {
$(this).addClass('active');
$('#left_menu').addClass('menu-open');
/*$('#button_menu').removeClass('move-left');
$('#button_menu').addClass('move-right');*/
}
isActive = !isActive;
});
Could you help me to adapt or redo the animation please ?

Here's a pure CSS solution without any javascript by making use of the :checked status of a hidden checkbox with display:none, the label for that checkbox should be outside the #left-menu element so it is possible to target it using ~:
JS Fiddle 1
#button_menu {
display: none;
}
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: fixed;
left: 5px;
top: 50%;
transition: all 1s;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -100%;
width: 55%;
top: 50%;
transition: all 1s;
}
#button_menu:checked + .glyphicon {
left: 55%;
transition: all 1s;
}
#button_menu:checked ~ #left-menu {
left: 0;
transition: all 1s;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<input type="checkbox" id="button_menu" class="js-menu">
<label for="button_menu" class="glyphicon"></label>
<div id="left-menu">
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
and here's a simple jQuery solution, where basically we have a variable as a triggering flag toggleFlag, if its value is true the left value is 0, while if the triggering flag value is false then the left value is -55% -which is the menu width as the op said it takes 55% of the screen-, then we animate the .left-menu dependign on the left value, and we need to negate the value of the triggering flag.
JS Fiddle 2
var menuIcon = $('.glyphicon'),
leftMenu = $('#left-menu'),
toggleFlag = true;
menuIcon.on('click', function() {
var leftVal = (toggleFlag) ? '0' : '-55%';
$('#left-menu').animate({'left': leftVal }, 700);
toggleFlag = !toggleFlag;
});
.glyphicon {
width: 40px;
height: 40px;
display: inline-block;
background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
background-size: 100%;
position: absolute;
right: -45px;
top: 5px;
cursor: pointer;
}
#left-menu {
background-color: orange;
position: fixed;
left: -55%;
width: 55%;
top: 50%;
}
.slideIt {
color: red;
}
.menu_content ul {
margin: 0;
list-style: none;
padding: 0;
}
.menu_content ul li {
padding: 20px 5px;
font-size: 2rem;
}
.menu_content ul li:hover {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="left-menu">
<span class="glyphicon"></span>
<div id="map-menu" class="test">
<nav class="menu_content">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>

There a couple things with your example and fiddle, to start it helps to have jquery loaded in the fiddle to mess around.
Next isActive is not only not defined but unnecessary
if (isActive) {
should be replaced by
if ($(this).hasClass('active')) {
and
isActive = !isActive;
can be removed completely
next you becareful with your underscores and hyphens
$('#left-menu') != $('#left_menu')
Please also wrap it all in a document ready so it can be attached when the page loads
$(document).ready(function () {
// code
});
so with the fixes you can have something like:
$(document).ready(function () {
$('.js-menu').on('click', function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('#left-menu').removeClass('menu-open');
} else {
$(this).addClass('active');
$('#left-menu').addClass('menu-open');
}
});
});
Now to move your button, the problem is you're adding the transform to the <nav> in the menu-open class with :
.menu-open nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
So one way to fix that would be to also add it to your button
.menu-open #icon-menu {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
OR
.menu-open .active {
-webkit-transform: translateX(55%);
transform: translateX(55%);
}
I'll leave you to do the slide animation and so on.
There's a couple ways to make it better than this but with what you have for now this'll probably help you get a start on it? Maybe?

Hiding a text when a sections width is set to 0

so I've had a bit of a problem with trying to make a section's width to 0 and have everything inside the object do the same thing. Essentially hide the section and everything inside it. Thing is, the section will change to a width of 0px but the text inside still displays and also sort of pushes off to the side. Is there any way that I can use either css or javascript to hide the text and bring it back when the sections width changes back over?
Code pasted into jsfiddle:
http://jsfiddle.net/t6ck9ajb/
$(document).ready(function(){
$("#about").click(function(){
if ($("#about-me").css("width") <= "0vw") {
$("#introduction").animate({width:"0vw"}, 500);
/*$("#intro").css("display","none");
$("#port").css("display","none");
$("#about").css("display","none"); */
}
else {
$("#introduction").animate({width:"0vw"});
}
});
});
This is what I have to attempt at hiding the text, but this didn't really hide it.

Here is a different approach:
$(function(){
$('#about').on('click', homeAboutToggle);
$('#home').on('click', homeAboutToggle);
});
function homeAboutToggle(){
$('#introduction').toggleClass('active');
$('#about-me').toggleClass('active');
}
* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}
#container{
width: 100vw;
height: 100vh;
overflow:hidden;
position:relative;
}
.full-page {
width: 100vw;
height: 100vh;
background-color: #5085aa;
position: absolute;
float: left;
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
}
.full-page.right{
transform: translateX(100vw);
-webkit-transform: translateX(100vw);
}
.full-page.left{
transform: translateX(-100vw);
-webkit-transform: translateX(-100vw);
}
.full-page.active{
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
transform: translateX(0);
-webkit-transform: translateX(0);
}
#introduction {
z-index: 1;
}
#about-me {
z-index: 0;
}
#information {
text-align: center;
}
#intro {
font-size: 4vw;
color: white;
text-align: center;
padding-top: 30vh;
}
#port{
position: absolute;
right: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#home,
#about{
position: absolute;
left: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#about:active #about-me {
width: 100vw;
}
.big {
font-size: 8vw;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span> </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
</div>
</body>

If you're wanting to hide the content when the '#about' selector is clicked, why not just use $('#introduction').toggle()?

This a CSS issue. You need to add overflow: hidden; to whatever you want to be hidden with a change of width, in this case #intro.

Here a working fiddle with the intended animation: fiddle
CSS:
#introduction {
z-index: 1;
visibility:"visible";
overflow:hidden;
}
jQuery
$(document).ready(function () {
$("#about").click(function () {
if ($("#about-me").css("width") <= "0px") {
$("#introduction").animate({
width: "0px"
}, 500, function () {
$("#introduction").css("visibility", "hidden");
})
} else {
$("#introduction").animate({
width: "0px"
});
}
});
});