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

HTML

Posted by Pedro Bustillo
Pedro Bustillo
3,608 Points

<nav> as an scroll down list?

Hello everybody,

Is there a way I can make the element <nav> with a list of three-hyperlinks to look like an scroll down list. In order word: I want the viewer to scroll down the list, and by choosing one of the options the hyperlink gets triggered and it takes the viewer to the other page.

For example: Lets say, the viewer chooses London from the scroll down list: Sydney, Boston and London; and each one of these options is a hyperlink on itself; hence it will take the viewer to the London page.

Many thanks

Pedro.

4 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

The HTML for this is actually fairly simple. You'd want to use the select and option tags, which create a scroll-able list of options.

<select>
  <option><a href="www.example.com">Example Link</a></option>
  <option><a href="www.example2.com">Example Link Two</a></option>
  <option><a href="www.example3.com">Example Link Three</a></option>
</select>

Having the page change when you select one of those options is a little bit trickier. This behavior likely requires the use of JavaScript. You can learn more about JavaScript in the JavaScript Basics and jQuery Basics courses. jQuery is a JavaScript library that makes common tasks easier and simpler to write, but I would highly recommend learning some JavaScript first before using jQuery.

They actually cover a topic very similar to what you want to do in the jQuery Basics course called Creating a Mobile Drop Down Menu.

Happy coding!

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Your looking maybe for nav, ul , li a href elements maybe? Do a little research on how to make a navigation with ul , li a href, see if u can find it out.

Pedro Bustillo
Pedro Bustillo
3,608 Points
Pedro Bustillo
Pedro Bustillo
3,608 Points

Hello

I know how to use nav ul, li href. But I want to be able to make it look like an scroll down list rather than a list of hyperlinks which are shown separately from each other.

Pedro Bustillo
Pedro Bustillo
3,608 Points
Pedro Bustillo
Pedro Bustillo
3,608 Points

Thank you very much for your answer!

Cheers