CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rebecca
Rebecca

Reputation: 107

Responsive drop down menu not rendering

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.

Upvotes: 0

Views: 216

Answers (1)

ylerjen
ylerjen

Reputation: 4259

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/

Upvotes: 1

Related Questions