INQ177CJ
Computational Aspects of E‑commerce

Activity 4

JQuery Introduction

Interactive Menu

JQuery’s ability to hide and show content is great for creating web pages that look simple, but reveal more information in response to user input. For this activity create a simple menu item that reveals a list of links when the user hovers over a button. Begin by adding the following content.

  1. A menu item, a div that contains some text.

  2. A menu, a div that contains a list of links.

  3. Web page content, a div that contains text and or images.

Style the above content so that it looks good.

Make the menu item appear when the user’s mouse hovers over the menu item by doing the following.

  1. Create a script.js file and add a link to in in the head of the html file.

  2. Add a second script tag to the head of the html file with the following code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  3. Set the style of the menu of links div to be hidden.

  4. Add code to the script that reveal with menu when the mouse is over the menu item (and hide the menu when the mouse is not).

  5. Modify the menu’s style so that it doesn’t move the web page content below it when it appears. The menu should appear on top of, and obstruct, the web page content underneath it.

Optional Challenge: Fix the menu so that the use can actually click on one of the links.

Submission

Please show your completed web page and source code to the instructor.