Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 1

Logan Brooks
Logan Brooks
5,936 Points
Posted by Logan Brooks
Logan Brooks
5,936 Points

Any idea why this isn't working?

I can't get this to work at all. Here's my code. I'm trying to incorporate it on my own site. HTML:

<body>
   <header>
    <div id="menu">
     <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="index.html">Example</a></li>
      <li><a href="index.html">Example</a></li>
     </ul>
    </header>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="app.js" type="text/javascript" charset="utf-8"></script>
  </body>

JAVASCRIPT:

var $select = $("<select></select>");
$("#menu").append($select);

$("#menu a").each(function(){
  var $anchor = $(this);
  var $option = $("<option></option>");
  if($anchor.parent().hasClass("selected")) {
    $option.prop("selected", true);
  }
  $option.val($anchor.attr("href"));
  $option.text($anchor.text());
  $select.append($option);
});
$select.change(function(){
 window.location = $select.val();
});
Chyno Deluxe
Chyno Deluxe
16,936 Points

//Fixed Code Presentation How to post Code

Christopher Denny
Christopher Denny
10,460 Points
Christopher Denny
Christopher Denny
10,460 Points

In line 2 of your Javascript, you appear you have

$("#menu").append($select);

Which is placing the "<select></select>" directly inside the div rather than inside the ul. Try

$("#menu ul").append($select);

and see if that helps at all.

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points
Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Christopher, Yes, you are exactly right! I had the same problem and your solution worked... but how do you explain that ("#menu") does not work when it is what Andrew is using in his video?...

Thanks

1 Answer

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Doesn't work in which way? Does your site means a site running in your hosted web server or workspace?

If your goal is adding simple nav with option menu right below the code seems to be running.