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
Brian van Vlymen
12,637 Pointsmodify css to hide links on small width and show button select? where #menu ul came from?
I do not understand where do they get "ul" from ? but i understood about the other @media the elements are #menu select, #menu button.
to 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
please explain to me.
@media (min-width: 320px) and (max-width: 568px) {
#menu ul { /* where does it from??? */
display:none;
}
}
@media (min-width: 568px) {
#menu select, #menu button { /* dont worry about this */
display:none;
}
}
``` html
<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>
//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>");
//Deal with selected options depending on current page
if($anchor.parent().hasClass("selected")) {
$option.prop("selected", true);
}
//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);
});
//Bind change listener to the select
$select.change(function(){
//Go to select's location
window.location = $select.val();
});
2 Answers
Sreng Hong
15,083 PointsHi Brian, I'm not really clear about your question, but I think I try to explain it.
You asked where is the ul from, and the answer is from html file. You see it is in the div with an id = menu
<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>
So this @media (min-width: 320px) and (max-width: 568px) mean that when the screen get smaller (mobile screen) we want hide the ul tags.
Hope this will help. Feel free to tell me if you need more help. Good luck.
Brian van Vlymen
12,637 PointsWhen the screen get smaller at between 320px to 568px. we want to put hide the ul tags display:none; we want to turn off the list item. so that we can see the select option with javascript . if it after 568px min-width:568px #menu select where is came from javaScript. already set display none. so the #menu ul is come back as normal??
Sreng Hong
15,083 PointsYou got it right. Good job.