Darcey Mckelvey Darcey Mckelvey - 9 months ago 27
Javascript Question

Slider nav not working

I can not seem to get my navigation bar to toggle. I want the navigation bar to toggle left. Fairly new obviously but I don't believe my ON CLICK function is the issue here. I tried looking into the css to see if that's where the issue was but couldn't find any. Could the issue be just how I structured my JavaScript?



(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn')

navToggleBtn.on('click', function(e){
bodyEl.toggleClass('.active-nav')
e.preventDefault()
})
})();

header{
display: flex;
}

nav {
display: block;
}

nav ul{
display: block;
}

nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 8em;
background: blue;
right: 0;
transform: translate3d(8em, 0, 0);
-webkit-transform: translate3d(8em, 0, 0);
transition: transform 0.4s ease;
-webkit-transition: transform 0.4s ease;
}

.active-nav nav {
transform: translate(-8em, 0, 0);
-webkit-transform: translate(-8em, 0, 0);
}

nav ul {
list-style: none;
margin-top: 100px;
}

nav ul li a{
text-decoration: none;
display: block;
text-align: center;
padding: 10px 0;
}

.nav-toggle-btn{
display: block;
position: absolute;
float: right;
width: 40px;
height: 40px;
background: red;
top: 0;
left: -2.85em;
}

section {
transition: transform 0.4s ease;
-webkit-transition: transform 0.4s ease;
}

.active-nav section {
transform: translate3d(-8em, 0, 0);
-webkit-transform: translate3d(-8em, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a href="index.html"><img alt="" height="65" src="#"
width="89"></a>
<nav>
<ul>
<a href="#" class="nav-toggle-btn"></a>

<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="resume.html">Resume</a></li>
</ul>
</nav>
</header>




Answer Source

https://jsfiddle.net/kaa778n0/

The dot in the class inside the function is not needed. It is a className not a selector.

bodyEl.toggleClass('active-nav')

You apply the style to the section not the nav.

.active-nav nav {
    transform: translate3d(-8em, 0, 0);
    -webkit-transform: translate3d(-8em, 0, 0);
}