What's wrong with my code here?


Why does the menu not open although the code is accepted?

My code was accepted but my menu won't push back! Please help :)

@qwertysayani You need to take the contents of the second main function and put them in the first one, then delete the second one.
Make sense? :slightly_smiling:


Still confused! Can u show me the code once?




The menu will only open once it is clicked as you see there is an click in the function


@qwertysayani The skeleton of your code should look like this:

var main = function() {
  // do stuff


...rather than this:

var main = function() {
var main = function() {
  // do stuff




I don't recommend what you are doing,

Giving the code to the student won't teach them anything, explain..

If u give them the code they copy and paste and don't learn..

When u explain, they put what you say to practice and they learn..

No hard feelings..



+++++ DOM representation of push menu

If your HTML-page is loaded into memory by the Browser
the memory-layout will be build
using the rules, as defined in the Document Object Model
in short the DOM

The DOM representation of the index.html file would look like:

         |                |
        head             body
         |                |
    |----+----|      |----+-----------|
    |    |    |      |                |
   link link link  10div(.menu)     27div(.jumbotron)
                    |                 |
     |--------------+----|          29div(.icon-menu)
     |                   |             |
   13div(.icon-close)  18ul          30i (.fa
     |                   |             |  and .fa-bars)
    img       |-----|----+|-----|    text  
              |     |     |     |    node
             19li  20li  21li  22li
              |     |     |     |
              a     a     a     a
              |     |     |     |
            text   text  text  text
            node   node  node  node

Now if you look at the DOM representation
the body-Tag is parent to
a 10div Element's Tree ( with class-attribute with class-name "menu" )
a 27div Element's Tree ( with class-attr. with class-name "jumbotron" set )

Now if you look in the style.css file,
with which you manage the Display of your Elements,
you will find that
the body object has the property left: 0; being set
( the body-Tree has a _start-Display at position left-0 )_

the .menu object has the property left: -285px; being set
and therefor the 10div-Tree is outside of Display.

In your 'app.js' file you are
to which you assign a so-called anonymous Function
and in the FUNCTION-BODY of this anonymous Function
we are attaching our click Event-handlers
to the HTML-Elements which are
-1 carrying the "icon-menu" class-name as class-attribute
-2 carrying the "icon-close" class-name as class-attribute
( during the assignment the function is NOT executed )

You will have to add the code-line
$(document).ready( main );
which will result in the =main= Function to be executed
AFTER the Browser has set the ready Event-flag.


google search
class site:jquery.com

++++++++++ structure P u s h M e n u function
The structure of your =main= Function should look like....

  var main= function() {
     $('.icon-menu').click( function() {
           //Your animation

     $('.icon-close').click( function() {
           //Your animation


explanation of the push-menu setup


@zainabrawat Thanks for your opinion! I don't think I did anything wrong with that post, although I probably should've explained why the change was necessary. But we had a discussion between a couple of us moderators/staff recently, and decided that showing code was OK now, as long as it's with an explanation and all that type of stuff. I already explained what to do, so then I gave an outline of the code when asked. Copy/pasting that skeleton won't get you past this exercise, so I'm not really worried about people cheating themselves because of that post.
Make sense? :slightly_smiling: