7/8 Moving menu vs moving body. I'm not understanding the code


#1


https://www.codecademy.com/en/courses/web-beginner-en-zmn0b/0/7?content_from=make-an-interactive-website%3Ayour-first-program

In the exercise, we make the menu move. We do this by telling the menu to move right, but the body stays in place?

This confused me even more when we made the menu close. We don't go the same way back (making the menu go right, but the body stay once again). This time we let the body move, but the menu stay in place.

I can't make sense of this, can someone help?


  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('body').animate({
      left: "285px"
    }, 200);
  });


  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);
  });


#2

@nawrockiaspect,

What you should understand
is that if you have loaded the HTML-document
you have loaded the HTML-Element's which are defined in the =body=
which are displayed with a starting-point of (0,0)

(0,0)
  +--------------------------------------+
  |         body
  |

As you can see in the DOM-representation
the body has 2 =sub-branches=

  • a 10div(.menu) branch
  • a 27div(.jumbotron) branch
================================================================================

Now what they did
was to give the 10div(.menu) branch
a position of left: -285px; ( look in the style.css file )
which will cause the =menu= to be out of display to the left

            (0,0)
(-285,0)      +--------------------------------------+
 .menu        |     body
              |      | 
              | (.jumbotron) branch
================================================================================

If you =click= on the icon-menu ( 29div(.icon-menu) )
you position the menu into the display on position (0,0)
and you position the (body)->(27div(.jumbotron))->(29div(.icon-menu)) branch to left: 285px;

            (0,0)                       (285,0)
              +-----------------------------|---------+
              |  .menu                     body
              |                             | 
              |                    (.jumbotron) branch

==========================================

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

               html
                |
         +------+---------+
         |                |
        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" )
and
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 )_

but
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
CREATING a VARIABLE main
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.

++++++++++ 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
      });
   };
 $(document).ready(main);

explanation of the push-menu setup
https://www.codecademy.com/forum_questions/55b3d3c1d3292f529b00005e

Reference::

google search
class site:jquery.com
https://api.jquery.com/category/selectors/
http://api.jquery.com/class-selector/
https://api.jquery.com/element-selector/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/trysel.asp


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.