Css Framework Basics Build a Dropdown Menu Challenge (4 parts)

Question

Link to Challenge:

http://teamtreehouse.com/library/framework-basics/prototyping-with-foundation/build-a-dropdown-menu

Challenge Task 1 of 4

First, give the li element on line 18 Foundation's class for toggling a top bar menu.

Challenge Task 2 of 4

Next, give the li element on line 25 the class that sets the position of the dropdown menu and displays the arrow icon.

Challenge Task 3 of 4

Give the ul on line 27 the class that positions the list of links and initially hides them.

Challenge Task 4 of 4

Finally, create a divider directly above the "Hire Me!" link.

I really can't believe they labelled this course "beginner"..

It should be 'intermediate' or 'advanced' because it brings together so much information.

But for the beginners out there..don't get discouraged and give up.

You'll learn a lot if you get all the way through..

Here's some code to help you along your way:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/normalize.css" rel="stylesheet" media="screen">
    <link href="css/foundation.min.css" rel="stylesheet" media="screen">
  </head>
  <body>

    <!-- Navigation -->
    <div class="contain-to-grid fixed">    
      <nav class="top-bar">
        <ul class="title-area">
          <li class="name">
            <h1><a href="#">My Website</a></h1>
          </li>
          <li class="toggle-topbar menu-icon">
            <a href="#"><span>menu</span></a>
          </li>
        </ul>
        <section class="top-bar-section">
          <ul class="right">
            <li><a href="#">About Me</a></li>
            <li class="has-dropdown">
              <a href="#">My Work</a>
              <ul class="dropdown">
                <li><a href="#">Writing</a></li>
                <li><a href="#">Design</a></li>
                <li><a href="#">Development</a></li>
                <li class="divider"></li>
                <li><a href="#">Hire Me!</a></li>
              </ul>
            </li>
            <li><a href="#">Contact Me</a></li>
          </ul>
        </section>
      </nav>
    </div><!-- End Navigation -->

    <script>
      document.write('<script src=' +
      ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
      '.js><\/script>')
    </script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>  
  </body>
</html>

Note:

Many of the Treehouse forum posts for this challenge are not meta-tagged properly so I'll provide a sampling:

https://teamtreehouse.com/forum/framework-work-code-challenge

This zurb docs link should have been given as a 'hint' at part 2 in the challenge: http://foundation.zurb.com/docs/components/topbar.html

https://teamtreehouse.com/forum/give-the-ul-on-line-27-the-class-that-positions-the-list-of-links-and-initially-hides-them-framework-basics-foundation

https://teamtreehouse.com/forum/framework-basics-challenge-task-4-of-4-finally-create-a-divider-directly-above-the-hire-me-link

Welcome to the Treehouse Community

Looking to learn something new?

james white

james white

Css Framework Basics Build a Dropdown Menu Challenge (4 parts)

Brad van Eden

Brad van Eden