-1
Я не могу заставить свою навигационную панель переключать. Я хочу, чтобы панель навигации переключалась влево. Явно совершенно очевидно, но я не считаю, что моя функция ON CLICK является проблемой здесь. Я попробовал посмотреть в css, чтобы узнать, есть ли проблема, но не удалось найти. Может ли проблема состоять в том, как я структурировал свой JavaScript?Slider nav не работает
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn')
navToggleBtn.on('click', function(e){
bodyEl.toggleClass('.active-nav')
e.preventDefault()
})
})();\t header{
\t \t display: flex;
\t }
\t nav {
\t \t display: block;
\t }
\t nav ul{
\t \t display: block;
\t }
\t nav {
\t \t position: fixed;
\t \t z-index: 1000;
\t \t top: 0;
\t \t bottom: 0;
\t \t width: 8em;
\t \t background: blue;
\t \t right: 0;
\t \t transform: translate3d(8em, 0, 0);
\t \t -webkit-transform: translate3d(8em, 0, 0);
\t \t transition: transform 0.4s ease;
\t \t -webkit-transition: transform 0.4s ease;
\t }
\t .active-nav nav {
\t \t transform: translate(-8em, 0, 0);
\t \t -webkit-transform: translate(-8em, 0, 0);
\t }
\t nav ul {
\t \t list-style: none;
\t \t margin-top: 100px;
\t }
\t nav ul li a{
\t \t text-decoration: none;
\t \t display: block;
\t \t text-align: center;
\t \t padding: 10px 0;
\t }
\t .nav-toggle-btn{
\t \t display: block;
\t \t position: absolute;
\t \t float: right;
\t \t width: 40px;
\t \t height: 40px;
\t \t background: red;
\t \t top: 0;
\t \t left: -2.85em;
\t }
\t section {
\t \t transition: transform 0.4s ease;
\t \t -webkit-transition: transform 0.4s ease;
\t }
\t .active-nav section {
\t \t transform: translate3d(-8em, 0, 0);
\t \t -webkit-transform: translate3d(-8em, 0, 0);
\t }<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>