CODEWITHSUNDEEP
jquerycsshtmlnav
floyd
floyd

Reputation: 131

jQuery Errors for mobile Nav Bar

I don't know much about jQuery yet, however I am using it to make this nav menu drop down for phone size media queries when the menu button is clicked. I keep getting this error that I cannot figure out.

Uncaught ReferenceError: toggleMenu is not defined meetPractioner.html:53 onclick

the script I am using is this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    function toggleMenu() {
        $('nav ul li a').slideToggle("fast");
    }
    </script>

While the html is:

<nav>
        <ul>
          <li><a href="meetPractioner.html">Meet The Practioner</a></li>
          <li><a href="servicesRates.html">Services &#38; Rates</a></li>
          <li><a href="bookAppointment.html">Book Appointment</a></li>
          <li><a href="locationHours.html">Location &#38; Hours</a></li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li><a href="questions.html">Questions &#38; Answers</a></li>
          <li><a href="benefits.html">Benefits of Massage</a></li>
          <li><a href="bodySense.html">Body Sense Magazine</a></li>
        </ul>
          <a onclick="toggleMenu()" class="menu-bttn">Menu</a>
     </nav>

My jsFiddle is http://jsfiddle.net/Floyd/v723oqfc/1/

Any help is greatly appreciated.

Upvotes: 0

Views: 170

Answers (1)

movabo
movabo

Reputation: 411

In your fiddle you did not define toggleMenu. But try in your document <head> the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    function toggleMenu() {
        $('nav ul li a').slideToggle("fast");
    }
</script>

This should fix your problem.

Edit

Fiddle: http://jsfiddle.net/v723oqfc/2/ (note the "No wrap - in <head>" at Frameworks & Extensions)

Upvotes: 1

Related Questions