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
Marc Drubbel
4,615 PointsMy 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};
}
Tim Knight
28,888 PointsMarc,
Check out the Markdown Cheetsheet for details just below the comment box while you're typing.
rydavim
18,813 PointsI've gone ahead and edited your question to include code formatting. For future posts, you can use the following markdown:
2 Answers
rydavim
18,813 PointsLooks 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! :)
Marc Drubbel
4,615 Pointsrydavim Yes it's working! Thanks for helping me out! :)
huckleberry
14,636 PointsThese are likely because you've been writing so much jQuery, it's easy to put the ; character in the wrong places for CSS.
Cheers,
Huck -
edit: Uh, what happened to the quote syntax??
rydavim
18,813 Pointshuckleberry - I've noticed that not all of the old markdown seems to work right now, including quotes, image titles, and some nested elements. Bummer. :(
Marc Drubbel
4,615 PointsTim Knight oh yeah sorry -.-' Thanks!
Marc Drubbel
4,615 PointsMarc Drubbel
4,615 PointsHow can I get the code in a nice squared box, Cause right now its pretty hard to debug the code...