Lab 12 ─ Image Maps



Honors Navigation Screen Overlay

CSCE 102

General information

In this assignment you must just follow the instructions step by step. You will be applying CSS to create an overlay

If you have questions or need help with your code you can contact a lab monitor during the open hours. Here is the link to the schedule:

Watch the video of this code in action. Link:

You will also be using this in your project.

Always maintain backup copies of your work in multiple places, your computer and a flash drive.

Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work.

It is important that you follow the directions.

Lab objectives

Creating a neat Navigation bar that moves across the screen using CSS

Part I — Save as Navxx _Navigation.html

Create a new HTMLdocument that contains two div elements, one below the other.

Give the first div element an id attribute with the value “navigation”.

The second div should contain one h3 and one p element to give content to your page.

The h3 should contain the text MENU. (You could use the hamburger image (three lines) instead of the h3 with MENU, if you would like.)

The p should contain random text from lorem ipsum.

Create an anchor and a new div element within (as child elements) the first div. The anchor should have an id of closing while the div should have a class name of myLinks.

Within the div element with the class name of myLinks, create four links to files that you created earlier.

The anchor element with, the id of closing (created in step#6) must contain an onclick event handler with the onclick attribute value being a JavaScript function call to close the navigation (see step#12). Use href=”javascript://” for this anchor and use the word “Close” as the click-able text visible on your link. Add CSS properties position:absolute; right:40pt; for this element.

Now wrap a span element around the text inside your h3 that contained the word MENU. Include an onclick event handler within the span with a JavaScript function call to open the navigation (see step#11).

Now create a script element with two functions, one to open the navigation and the other to close the navigation. These were the functions called in steps #8 and #9.( Keep reading to know how to write the functions #11 and #12 below.) Note: Use care when selecting your function names so that you do not select a JavaScript word or a reserved word. You cannot use close or open.

For opening the navigation, your JavaScript should set the width of your div element with id=“navigation” to “100%”.

For closing the navigation, your JavaScript should set the width of your div element with id=“navigation” to “0%”

Now add CSS for each of the elements as given below.

The div with class name of myLinks should be styled using the class name, with the following CSS. position:relative; top:35%; width:100%; text-align:center;

Use a descendant selector using the class name, myLinks, to style the anchor element which is inside that div and apply the following CSS. display:block; font-size:25pt; font-weight: bold (We ask you to load the page as you work but this time apply the styles from #16 below and then load the page and look at it.)

Now style the div element with the id of navigation using the following CSS. position:fixed; width:0; height:60%; z-index:1; overflow-x:hidden; background-color:your choice of color;

When you finish and click on the MENU, you should see another screen overlay upon you existing page containing your paragraph filled with the random text from lorem ipsum.

Add one more style for the div with the id of navigation. opacity:0.6;

Test this and change the value for the opacity and see how it works.

Now try changing the background color and using different colors and opacity values and see how it looks.

Add one last style for the div with the id of navigation. transition:3s;

Test this and then try changing the values of the transition and see what you think.

Part II — Test

Carefully test your code and make sure it is correct and working using the HTML and CSS validators available at &

When you click on MENU you should see a page with a color move across your existing page with the text from lorem ipsum.

When you click on “Close” you will see this new page disappear from the screen to reveal your page containing lorem ipsum text.

1

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download