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

liam mcinnes
PLUS
liam mcinnes
Courses Plus Student 3,517 Points
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>
Jim Dennis
Jim Dennis
13,075 Points
Jim Dennis
Jim Dennis
13,075 Points

Seems like this should also have a [tag:jQuery] jQuery tag if that's possible.

3 Answers

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

It looks like you have a stray parenthesis ")" on the first line of your script area:

$(function() {  // <- Note: extra ")" removed
Jim Dennis
Jim Dennis
13,075 Points
Jim Dennis
Jim Dennis
13,075 Points

The first line in this <script> container seems suspicious to me. $(function)? $ is the main jQuery entry point (top level function?). $() is a call into that namespace ... and normally ... you have some sort of object or DOM selector, similar to a CSS selector but also supporting some expressions such as "*" (match all document elements) and $([name^=string]) (select all tags with an attribute "name" starting with "string") ... and so on.

I couldn't find a $(function) in the API and I don't know what it would mean. I don't know what happens if you could pass something like an IIFE returning something that jQuery could parse into a select or expression?

But this code clearly isn't doing that either. What if you remove the $() around the first function()? or move the (second) closing parenthesis from the end of that line all the way down past the end of the closing brace for the function's body?

Anyway, here's a site implementing "8 Clean jQuery Menu Examples. Maybe studying those examples will help.

Jim Dennis
Jim Dennis
13,075 Points
Jim Dennis
Jim Dennis
13,075 Points

Looking at the code for the first example I see just over a dozen lines which appears to be an IIFE (instantly invoked function expression) taking one argument (parameter named $) and being invoked with jQuery as its argument:

( function( $ ) {
$( document ).ready(function() {
    $('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
        var menu = $(this).next('ul');
        if (menu.hasClass('open')) {
            menu.removeClass('open');
        }
        else {
            menu.addClass('open');
        }
    });
});
} )( jQuery );

The code inside this IIFE, from $( document )... down to the penultimate line ... seems to be hooking/inserting some code in to the "ready()" function chain ... so that an element with the id of "cssmenu" get prepended with a div and a hook on "click()" arranges for bunch of CSS to get applied to the nested set of UL (unordered lists) to hide, show, and mark the "active" elements.

I don't fully understand it yet ... but I think you were trying for something more like this.

But that pattern of having an IIFE taking a parameter of $ and being invoked with an argument of jQuery is repeated for at least the next couple of those examples ... so I have to assume that it's the conventional way of hooking into jQuery for this sort of purpose.

Jim Dennis
Jim Dennis
13,075 Points
Jim Dennis
Jim Dennis
13,075 Points

When I say "from the first example" I mean the first of the 8 examples from my previous posting.