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

CSS

Posted by Carlos Diaz
Carlos Diaz
Courses Plus Student 9,006 Points

Navigation in Foundation 5 no working

Hi Guys. Looking for some help. I'm in the course Prototyping with Foundation on the lesson: Building a JavaScript Dropdown Menu and Orbit Slider i follow the instructions on the video but I can't make work the drop down menu. Please see the code I have on my html. Thanks so much.

<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</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.css" rel="stylesheet" media="screen">
    <link href="css/my-styles.css" rel="stylesheet" media="screen">
  </head>
  <body>

    <!-- Top Bar -->
    <div class="contain-to-grid fixed">    
      <nav class="top-bar">
        <ul class="title-area">
          <li class="name">
            <h1>
              <a href="#">Ribbit</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="#">Home</a></li>
            <li><a href="#">About Ribbit</a></li>
            <li class="has-dropdown">
              <a href="#">Treehouse</a>
              <ul class="dropdown">
                <li><a href="#">About Treehouse</a></li>
                <li><a href="#">Video Library</a></li>
                <li><a href="#">Tracks</a></li>
                <li class="divider"></li>
                <li><a href="#">Plans &amp; Pricing</a></li>                
              </ul>
            </li>
          </ul>
        </section>
      </nav>
    </div>
    <!-- End Top Bar -->

    <!-- Content Slider -->
    <div class="row">
      <div class="large-12 columns" data-orbit> 
        <div>
          <h1>Self-destructing message app</h1>
          <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today.</p>
          <p class="button-group radius">
            <a class="medium button success" href="#">Download the app</a>
            <a class="medium button hide-for-small">Text me the link</a>
          </p> 
        </div>
        <div>
          <h1>Learn how to build it for iOS</h1>
          <p class="lead">We'll teach you how to build it from scratch!</p>
          <p><a class="medium button radius" href="#">Get started today!</a>   
        </div>
        <div>
          <h1>Learn how to build it for Android</h1>
          <p class="lead">We'll teach you how to build it from scratch!</p>
          <p><a class="medium button radius" href="#">Get started today!</a></p>
        </div>
      </div>
    </div>
    <!-- End Content Slider -->

    <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>

5 Answers

Neal Gist
Neal Gist
8,438 Points
Neal Gist
Neal Gist
8,438 Points

Good idea James, but I think according to the docs the data-orbit should be its own attribute: http://foundation.zurb.com/docs/components/orbit.html

Good luck Carlos! Let us know when the code is live somewhere and we'll bang on it.

Neal Gist
Neal Gist
8,438 Points
Neal Gist
Neal Gist
8,438 Points

Hi Carlos, could you please set up a jsfiddle or something live so we can troubleshoot your issue?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

If you take a look at the code you posted, looking carefully at the syntax highlight it can often give you a clue to where a syntax issue might lie.

In this case, there's a typo, data-orbit should be inside the quote marks.

<div class="large-12 columns" data-orbit>
Carlos Diaz
Carlos Diaz
Courses Plus Student 9,006 Points

HI James, I hope you are doing well. can you please check what I re-post below? Maybe you can point me in the right direction or tell me another place to post it. I'm stock in this lesson and I would like to continue. Thanks again.

Carlos Diaz
PLUS
Carlos Diaz
Courses Plus Student 9,006 Points
Carlos Diaz
Carlos Diaz
Courses Plus Student 9,006 Points

Neal and James. Let me put it in code pen or jsfiddle and I'll let you know. I will check the typos also. .

Carlos Diaz
PLUS
Carlos Diaz
Courses Plus Student 9,006 Points
Carlos Diaz
Carlos Diaz
Courses Plus Student 9,006 Points

Hi Guys, I put the code in the following link CODEPEN: [http://codepen.io/caprisci/pen/iCaIm]

Also a live version on this link: ( this version will automatically update while working on the link above) [from me. also I think one more person also can edit. not sure unless you have a pro account.] [http://cdpn.io/v/iCaIm]

Here is the lessons in Teantreehouse: [http://teamtreehouse.com/library/framework-basics?utm_source=Treehouse+Announcements&utm_campaign=f01b687b9b-New_in_Foundation_51_7_2014&utm_medium=email&utm_term=0_af3ceedc45-f01b687b9b-33495277#what-s-new-in-foundation-5] I'm on: Prototyping with Foundation > Building a JavaScript Dropdown Menu and Orbit Slider I stop righ after Guil finish teaching the drop menu. 4:37 On my version is not working. Nothing drop down when hover the link :(

Didnt want to finish the vide until i can make it work.

Your help is very much appreaciated in advance. Thanks guys.