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 3

My select box and button won't dissappear at higher width. Please Help.

// Problem: It looks gross in smaller browswer widths and small devices
//solutions: To hide the text links and swap them out with a more appropiate navigation

//Creat 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 the link
  $option.text($anchor.text());
  //Append option to select
  $select.append($option);
  }); 
//Creat a button 
var $button = $("<button>Go</button>");
  $("#menu").append($button);
//Bind click to button
$button.click(function() {
//Go to select's location
window.location = $select.val();
});

//Deal with selected options depending on current page

CSS:

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background: #fff;
}

#menu {
    background: #384047;
    height: 60px;
    padding: 0 5px 0;
    text-align: center;
}

ul {
    list-style: none;
}

ul li {
    display: inline-block;
    width: 84px;
    text-align: center;
}

ul li a {
    color: #fff;
    width: 100%;
    line-height: 60px;
    text-decoration: none;
}

ul li.selected {
    background: #fff;
}

ul li.selected a {
    color: #384047;
}

select {
    width: 84%;
    margin: 11px  0 11px 2%;
    float: left;
}

button {
    display: inline-block;
    line-height: 18px;
    padding: 0 5px;
    margin: 11px 2% 11px 0;
    float: right;
    width: 10%;
}
h1 {
    margin: 40px 0 10px;
    text-align: center;
    color: #384047;
}
p {
    text-align: center;
    color: #777;
}
/** Start Coding Here **/

/**Modify CSS to hide links on small width and show button and select
Also hides select and button on larger width and shows links**/

@media (min-width: 320px) and (max-width: 568px) {
  #menu ul {
    display:none;
  }
};

@media (min-width: 568px) {
  #menu select {display:none};
  #menu button {display:none};
}

How can I get the code in a nice squared box, Cause right now its pretty hard to debug the code...

Tim Knight
Tim Knight
28,888 Points

Marc,

Check out the Markdown Cheetsheet for details just below the comment box while you're typing.

rydavim
rydavim
18,814 Points

I've gone ahead and edited your question to include code formatting. For future posts, you can use the following markdown:

Treehouse Code Posts

2 Answers

rydavim
rydavim
18,814 Points

Looks like you just have a couple minor errors in your CSS. These are likely because you've been writing so much jQuery, it's easy to put the ; character in the wrong places for CSS.

@media (min-width: 320px) and (max-width: 568px) {
  #menu ul {
    display:none;
  }
} /* You don't need an ending ; here. */

@media (min-width: 568px) {
  #menu select {display:none;} /* The ending ; needs to be inside the curly braces. */
  #menu button {display:none;} /* Here as well. */
}

That should do it, but let me know if you run into issues still. Happy coding! :)

rydavim Yes it's working! Thanks for helping me out! :)

huckleberry
huckleberry
14,636 Points

rydavim

These are likely because you've been writing so much jQuery, it's easy to put the ; character in the wrong places for CSS.

:laughing: how true!

Cheers,

Huck - :sunglasses:

edit: Uh, what happened to the quote syntax??

rydavim
rydavim
18,814 Points

huckleberry - I've noticed that not all of the old markdown seems to work right now, including quotes, image titles, and some nested elements. Bummer. :(

Tim Knight oh yeah sorry -.-' Thanks!