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 Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

js dropdown menu script not working as expected

l have the menu 

        <ul class="myMenu">
          <li class="new-dropdown1"><a id="services" href="#" class="link-hover">Our Services</a>
            <ul class="new1">
              <li><a href="<?php echo site_url('/structural-capital');?>">Structural-Capital</a></li>
              <li><a href="<?php echo site_url('/financial-advisory');?>">Financial-Advisory</a></li>
              <li><a href="<?php echo site_url('/investment-capital');?>">Investment-Capital</a></li>
            </ul>
        </ul>

and l am using the the script below to display and hide the dropdown

    $(document).ready(function() {
    $('.myMenu > li').bind('mouseover', openSubMenu);
    $('.myMenu > li').bind('mouseout', closeSubMenu);
    function openSubMenu() {
      $(this).find('ul').css("visibility", "visible").slideDown();
    };
    function closeSubMenu() {
      $(this).find('ul').css("visibility", "hidden").slideUp();
    };
    });

l am having this issue where sometimes the <a>services</a> link becomes highlighted but does not show the dropdown. Also when you mouse over the link from below the dropdown does not appear. Any work around that you can think of guys? Andrew Chalkley Dave McFarland Thanks in advance

moonshine
moonshine
8,449 Points

Would substituting mouseover and mouseout with mouseenter and mouseleave make any difference?

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

Floris Creyf narr not really mate it still have that effect. its so weird why its behaving like that

mikes02
mikes02
Courses Plus Student 16,968 Points

Can you post your CSS for this as well so that we can replicate it as you have it?

Matt Brock
Matt Brock
28,330 Points

Don't you need to define your functions before you call them?

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

here guys thanks 

/* line 1164, ../scss/_custom.scss */
li.new-dropdown, li.new-dropdown1 {
  position: relative;
}

/* line 1167, ../scss/_custom.scss */
ul.new, ul.new1 {
  position: absolute;
  display: none;
  top: 72px;
  z-index: 100;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #FFF02A;
}

/* line 1177, ../scss/_custom.scss */
.myMenu li ul {
  display: none;
  white-space: nowrap;
}

/* line 1181, ../scss/_custom.scss */
ul.new li > a, ul.new1 li > a {
  color: #000;
  width: 100%;
  /*border-bottom: 1px solid black;*/
}

/* line 1186, ../scss/_custom.scss */
ul.new li > a:hover, ul.new1 li > a:hover {
  color: #000 !important;
  font-weight: bold;
}

/* line 1190, ../scss/_custom.scss */
ul.new li > a.active, ul.new1 li > a.active {
  color: #000 !important;
  font-family: 'Neuzeit Grotesk W01';
  font-weight: 700;
  font-style: normal;
  font-weight: boldder;
}
moonshine
moonshine
8,449 Points

Matt Brock, no because javascript hoists functions to the top of the scope.

Matt Brock
Matt Brock
28,330 Points

Floris: Gotcha. That's helpful to know!

3 Answers

Jeff Everhart
Jeff Everhart
21,732 Points
Jeff Everhart
Jeff Everhart
21,732 Points

In the jQuery docs, it says that as of v1.7 the bind method has since been replaced by the on method as the preferred way to attach event handler: https://api.jquery.com/bind/

There are also other shortcut methods that you can use like mouseenter, mouseleave, etc. that could take a callback function:https://api.jquery.com/?s=mouseout

My last suggestion may be to use actual css selectors to select your DOM elements. Ex. $("myMenu li") not $("myMenu > li")

If the caret is actually a part of the selector, which in this case it looks like it's not, you'd need to escape it for it to work: http://api.jquery.com/category/selectors/

Lastly, while Floria is technically right about the function hoisting, most people like to define functions before calling them. It just makes the code easier to read, but this is mostly personal preference on my part I guess.

I was able to get it to work here in a CodePen, but it doesn't seem to be taking your CSS: http://codepen.io/JEverhart383/pen/bddRWP

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

For what it's worth you could likely create the same effect with CSS3 transitions instead of relying on JS for it.

moonshine
moonshine
8,449 Points
moonshine
moonshine
8,449 Points

Taking Jeff Everhart's advice in consideration, I created a JSFiddle at http://jsfiddle.net/8pepy0vL/. From what I gather, the top: 72px; moves the dropdown menu outside #services so that the dropdown disappears when attempting to move the cursor down to one of the links.

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

thanks guys. l only put a top 72 because i am trying to move the dropdown below the hover item. the idea is to get the dropdown to sit on a line that i created with using an after pseudo-class.

moonshine
moonshine
8,449 Points

So instead of top, something like the following should be fine?

.myMenu > li > a {
        display: block;
        height: 100%;
}
Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

http://imgur.com/RfX1yIW

when you have a peek at this nav here it needs to be abit below and sit on the yellow line that. i need something to push it down thats why i used top. couldnt think of any other way. can you mate? ending up with something like this http://imgur.com/JtNEQ3P

moonshine
moonshine
8,449 Points

Updated link: http://jsfiddle.net/8pepy0vL/6/.