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

JavaScript

Posted by liam mcinnes
liam mcinnes
Courses Plus Student 3,517 Points

JavaScript problem

Hey guys, i'm trying to make an drop down menu and i cant seem to get it o work. when i click on the button it doesn't show how it's meant to? does anyone have any ideas thank you so much :)

<!DOCTYPE html>
<html>
<head>

<title></title>

</head>

<style>



.header {
    background: #ff99bb;
    width: 100%;
    height: 6.25em; 
    border-bottom: 4px solid white;
    margin-bottom: 20px;
}

.top-nav {
    float: right;
    display: none;
}

.main-wrapper {
}

.side-nav.visible {
    visibility: visible;
}

.side-nav {
    width: 100%;
    height: 100vh;
    background-color: #333;
    color: white;
    visibility: hidden;

}

.mobile-nav span, .mobile-nav span:before, .mobile-nav span:after {
    width: 32px;
    height: 2px;
    position: absolute;
    background-color: black;
    top: 2%;
    cursor: pointer;
}

.mobile-nav {
    float: right;
    padding: 0 30px 0 0;
    cursor: pointer;
    padding-right: 5%;


}

.mobile-nav span:before {
top: -6px;
content: '';
cursor: pointer;

}

.mobile-nav span:after {
    content: '';
    top: 6px;
    cursor: pointer;
}





</style>


<script>
$(function() {

 $('.mobile-nav').click(function() {
    $('.side-nav').toggleClass('visible');
 })
})

</script>

<body>

<div class="header">
<a href="javascript:void(0)" class="mobile-nav"><span></span></a>
<nav class="top-nav">
</nav>
</div>


<div class="main-wrapper">

<nav class="side-nav">
<ul>

<li>
    <span></span>
    <span>Tags</span>
</li>


</ul>
</nav>
</div>





</body>


</html>

2 Answers

Paul Gilligan
Paul Gilligan
2,773 Points

Why not try jQuery's 'toggle'. It has an automatic hide and show function, so you can reduce your css code. There's also slideToggle for a transition effect.

 $(function() {
        $('.mobile-nav').click(function() {
        $('.side-nav').toggle();
        })
  })
Mike Ulvila
Mike Ulvila
16,268 Points
Mike Ulvila
Mike Ulvila
16,268 Points

Looks like your style tag was not inside the head tag. Also you did not have a script tag for the jQuery CDN. I like to put the script tags right before the closing body tag. Try indenting your code, it will give you a better idea of where elements are nested. Code below works for me. Hope this helps. 

<!DOCTYPE html>
<html>
  <head>
    <title></title>

    <style>

      .header {
          background: #ff99bb;
          width: 100%;
          height: 6.25em;
          border-bottom: 4px solid white;
          margin-bottom: 20px;
      }

      .top-nav {
          float: right;
          display: none;
      }

      .main-wrapper {
      }

      .side-nav.visible {
          visibility: visible;
      }

      .side-nav {
          width: 100%;
          height: 100vh;
          background-color: #333;
          color: white;
          visibility: hidden;

      }

      .mobile-nav span, .mobile-nav span:before, .mobile-nav span:after {
          width: 32px;
          height: 2px;
          position: absolute;
          background-color: black;
          top: 2%;
          cursor: pointer;
      }

      .mobile-nav {
          float: right;
          padding: 0 30px 0 0;
          cursor: pointer;
          padding-right: 5%;


      }

      .mobile-nav span:before {
      top: -6px;
      content: '';
      cursor: pointer;

      }

      .mobile-nav span:after {
          content: '';
          top: 6px;
          cursor: pointer;
      }

    </style>

  </head>

  <body>

    <div class="header">
      <a href="javascript:void(0)" class="mobile-nav"><span></span></a>
      <nav class="top-nav"></nav>
    </div>

    <div class="main-wrapper">
      <nav class="side-nav">
        <ul>
          <li>
              <span></span>
              <span>Tags</span>
          </li>
        </ul>
      </nav>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
      $(function() {
        $('.mobile-nav').click(function() {
        $('.side-nav').toggleClass('visible');
        })
      })
    </script>

  </body>

</html>