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

CSS jQuery Basics (2014) Creating a Mobile Drop Down Menu Setting a value

Posted by Geoffrey Emerson
Geoffrey Emerson
18,726 Points

The challenge seems to be broken. It's telling me to type what I have already typed.

I've set Line 15 to be

$option.val( $anchor.attr('href') );

But when I hit "check my work" it tells me that's wrong, and the value of option should be set to:

$anchor.attr('href')

Help?

js/app.js 
//Problem: It look gross in smaller browser widths and small devices
//Solution: To hide the text links and swap them out with a more appropriate navigation

//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);

//Cycle over menu links
$("#menu a").each(function(){
  var $anchor = $(this);
  //Create an option
  var $option = $("<option></option>");

  //option's value is the href
  $option.val( $anchor.attr('href') );
  //option's text is the text of link
  $option.text($anchor.text());
  //append option to select
  $select.append($option);
});
//Create button 
//Bind click to button
  //Go to select's location
//Modify CSS to hide links on small width and show button and select
  //Also hides select and button on larger width and show's links
//Deal with selected options depending on current page
index.html 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li class="selected"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
    </div>
    <h1>Home</h1>
    <p>This is the home page.</p>
    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Geoffrey,

I don't think it would matter outside of the challenge but the challenge doesn't seem to like the spaces you put around the argument. It passes for me when I remove those spaces.

Geoffrey Emerson
Geoffrey Emerson
18,726 Points

Thanks, I will try that.

Geoffrey Emerson
Geoffrey Emerson
18,726 Points

Yup, that did it! Weird, it never seemed to care about that kind of thing before.