Responsive drop down menu not rendering

Question

I'm trying to create a responsive drop down navigation menu for my webpage. I already have a working drop down menu, but I want to make it so that when the screen reaches a certain size, I get a ☰ icon with my menu items. However, when I test this (by re-sizing my browser), I only see my drop down menu displayed as a block element, and the ☰ icon doesn't show. Here is a fiddle with my code:

http://jsfiddle.net/Lwdc4/

My JavaScript code is in an external file. This is what the file looks like:

$("#nav").addClass("js").before('<div id="menu">&#9776; </div>');
$("#menu").click(function(){
    $("#nav").toggle();

});

$(window).resize(function(){
    if(window.innerWidth > 768){
        $("#nav").removeAttr("style");

    }
});

And my import to HTML:

<head>
 <title>Title</title>

    <link rel="stylesheet" type="text/css" href="nav-menu.css"
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="nav-menu.js"></script> 
  </head>

What is wrong with my code? Any help is appreciated. Thanks in advance.

Answer 1

You need to add the jquery library to use the $ object

Add this line in your HTML to use it

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Or choose your version directly on the jQuery website http://jquery.com/download/

Updated fiddle : http://jsfiddle.net/Lwdc4/1/

Responsive drop down menu not rendering

Question

1 answers

solution1
1 ACCPTED 2014-03-10 15:23:01

Responsive drop down menu not rendering

Question

1 answers

solution1 1 ACCPTED 2014-03-10 15:23:01

solution1
1 ACCPTED 2014-03-10 15:23:01