make an Interactive Website 2 Jquery coding

Preview

We are going to use jQuery to create a menu that slides out from the left side.

• The file index.html contains the page structure and content.
• The file style.css has the styling for the page.
• The file app.js has JavaScript and jQuery code. This code makes the menu interactive.
• 
  

1. Click on the menu icon. The menu displays by pushing the page's body over to the right.
2. Then click on the X icon. The menu closes by pulling the body back to where it was.
3. Click Save & Submit Code to get started!

Program skeleton

The index.html file has two scriptelements right before the closing </body>tag:

• The first script loads jQuery.
• The second script loads app.js. The fileapp.js is where we'll write out code for the Uber menu.

Let's start by setting up the basic skeleton for JavaScript programs.

1. Inside the app.js file, use the keywordvar and create a function called main.
2. Leave the function's code block empty.
3. Use jQuery to run the main function once the web page has fully loaded.
4. See the hint if you're stuck!

/*Inside the app.js file, use the keyword var and create a function called main.*/

var main = function(){
    
};

/*Use jQuery to run the main function once the web page has fully loaded.*/
$(document).ready(main);

Select an element

What does this skeleton do?

1. The main function is where we'll write our program.
2. The $(document).ready runs the mainfunction as soon as the HTML document has loaded in the browser.

Let's start filling out the main function. Here, we'll select an HTML element in order to operate on it. jQuery lets us select HTML elements using CSS selectors.

1. In app.js, find the main function.
2. Inside the main function, use jQuery to select the class 'icon-menu'.  $('.icon-menu');
3. Small hint: jQuery is all about the dollars! And to select a class, use a period (ie. full stop).

1. Start with a $( ) to tell the computer we're using jQuery.
2. To use CSS to select the class 'icon-menu', we type in '.icon-menu'.

Respond to a click

We have just used jQuery to select the'icon-menu' class using $('.icon-menu')

Now we want to respond to user action.

Specifically we want to respond to a user clicking on this '.icon-menu' HTML element.

After $('.icon-menu'), add the .click()method.

Open the menu

We now have code that says something will happen when the user clicks on theicon-menu HTML element. But what will happen?!

Clicking on the menu icon should open the menu.

1. Add a function inside the .click()method.
2. Select the 'menu' class and animate it.

3. Right now, the menu is 285px past the left edge of the screen. That's why it is not visible! Inside the animate method:

   a move it 0px to the left
   b. make this happen over 200 milliseconds.

4. We now want to push the rest of the page to the left 285px. Use jQuery to select the body HTML element, animate it, and move it left 285px over 200 milliseconds.

Close the menu

Once the menu is open, we need a way to close it. Let's adapt the three steps we used to open the menu in order to close the menu.

1. Use jQuery to select the '.icon-close'element.
2. Add the .click() method.
3. When the '.icon-close' element is clicked, use .animate() to change the leftoffset of the menu to -285px, and the leftoffset of the body to 0px. Both are done over 200 milliseconds.
4. Click on the menu icon and the X to see if your code works!