Web Page for a Restaurant
Design an HTML document for a restaurant using JavaScript, CSS and Dynamic overlay to accomplish the following.
Split the window into a minimum of three sections. One section is the MENU ITEMS, another is for displaying the images of the items in the menu, and a third section for displaying the items selected.
MENU ITEMS section should have a proper heading and be fully loaded with different types of food items. The food items should be split into at least three main categories such as appetizers, drinks, sea food etc. You may even split it by countries such as American, Chinese, Italian, etc.
Each main category should have subcategories which in turn has subcategories beneath it. Non terminal categories will dynamically overlay the subitems on mouseover. The overlay should be very close to the item with the mouse over it. Terminal items have a price next to them. For example,
On mouse over a non-terminal node, show the expanded form next to it with the ?.
On mouse out of the item or its overlay, the overlay and the arrow(s) should be removed. See www.emich.edu for how your overlay is to work. Emich.edu does not have the ? example.
On mouse over a terminal node, show the corresponding image in the images section.
On mouse out from a terminal node, remove the corresponding image from the images section.
On click of a terminal node, add it with the price to the shopping cart section.
I expect your web page to look and function very realistically. For example, item prices should be lined up in the menu and shopping cart sections.
HINTS.- You may implement the shopping cart using dynamic tables where new rows and columns may be added via JavaScript.
Attachment:- webpage.doc