CODEWITHSUNDEEP
javascriptjqueryhtmlcss
manjon
manjon

Reputation: 1

Mobile responsive menu button is not responding to jquery click function

I'm currently trying to create a responsive menu button for my navigation bar, and it does not seem to be responding to a mouse click.

$("span.nav-btn").click(function()
    $("ul.nav-toggle").slidetoggle();
})

Fiddle

Upvotes: 0

Views: 75

Answers (2)

dippas
dippas

Reputation: 60563

Problems:

  • The click function is missing an opening curly brace {
  • jQuery is case-sensitive so slidetoggle, should be slideToggle

Notes

  • in your fiddle is not loading the jQuery library

$("span.nav-btn").click(function() {
  $("ul.nav-toggle").slideToggle();
})
#nav {
  background-color: #6a5750;
  padding-top: .01%;
  position: fixed;
  width: 100%;
  text-align: center;
}
#nav li {
  display: inline-block;
}
#nav li a {
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  color: #FFFFFF;
  -o-transition: .3s;
  -ms-transitiion: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
#nav a:hover {
  color: #FF0000;
}
@media (max-width: 800px) {
  #nav {
    text-align: left;
  }
  #nav li {
    display: block;
  }
  .nav-btn {
    display: block;
    background-color: #6a5750;
    color: #FFFFFF;
    text-align: center;
  }
  .nav-btn:before {
    content: "Menu"
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-scroll-header id="nav">
  <span class="nav-btn"></span>
  <ul class="nav-toggle">
    <li><a data-scroll href="#home">Home</a>
    </li>
    <li><a data-scroll href="#html">HTML</a>
    </li>
    <li><a data-scroll href="#css">CSS</a>
    </li>
    <li><a data-scroll href="#video">Video</a>
    </li>
    <li><a data-scroll href="#about">About</a>
    </li>
    <li><a data-scroll href="#contact">Contact</a>
    </li>
  </ul>

Upvotes: 1

Uzbekjon
Uzbekjon

Reputation: 11813

Your JS has a syntax error. Missing { at the first line and the method name slideToggle (with capital "T").

$("span.nav-btn").click(function() {  // <== HERE ===
  $("ul.nav-toggle").slideToggle();
});

Upvotes: 1

Related Questions