6/8 menu doesnt appear


var main = function() {
$('.icon-menu').click(funktion() {
left: '0px'
}, 200);

        left: '285px'
    }, 200);



the menu doesnt appear
theres just a message about some error but i cant find find any missing ")": SyntaxError: missing ) after argument list

could someone help me? :slightly_smiling:


sorry code wasa bit messed up by copying...



I think it is better, if one understands the concept.

It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of

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

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

       |            |
     head          body

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
methods ( giving you the functionality to manipulate the Elements )

HTML Elements can also carry attribute's
the **id="id-name-as-string"
the **class="class-name1 class-name2"

In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .class-name1
the Cascading Style Sheet syntax,
you have to prepend-a-hash to the id-name
so the CSS will interpret it as an id-attribute
So in the file style.css you will find an object
identified by #id-name-as-string

An object is encapsulated in a pair of curly-brackets-{ }
and contains one or more properties.
Each property consists of a property-key and it's associated Value
A property-definition is terminated with a semi-colon-;

Thus in your style.css file you would have an object

#id-name-as-string {
   color: green;
.class-name1 {
   color: red;

You could also present the color-Value
in the so-called Red Green Blue format.
Depending on the Browser you use
[255,255,255] for white
#FFFFFF for white

Thus you could have used

#id-name-as-string {
   color: #00FF00;
.class-name1 {
   color: #FF0000;



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

what is CSS explained site:developer.mozilla.org


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