Assignment 4: JS DOM Practice - Pure JS Dropdown

In this assignment you will implement the dropdown / one-page style site demonstrated in class in an html page of your own. You may choose to do this on your own homepage, or you can construct a new page of "dummy" content or content of your choosing.

You can find the file I demonstrated in class here:Pure Javascript Dropdown One-Page Site

As in the demonstration, your dropdown should do the following:

• Work
• Display new content in the HTML document corresponding to the chosen item
• Display the Chosen item in the dropdown as the innerHTML of the button field.

Things to keep in mind:

• some of the CSS styles are essential to the functionality of the menu
• the position:relative and position:absolute rules are important for keeping the UL and LI items below the menu button. Be careful when editing these. See the W3 Schools dropdowns reference for more information.
• The strings in the IDs of the divs with the Panel class MUST match the innerHTML of the dropdown selection LI. This changes the display property of the current panel. If you change your LI names, you must also change the IDs for the .panel class DIVs

You should change the styles of your menu to match your own site design, or to be in a design of your choosing. You may find it helpful for the readability of your code to pull both the CSS and JavaScript from this file, and create external .css and .js files.

Please feel free to work with an alternate javascript dropdown example. However, the dropdown MUST navigate between content contained in a single .html file (a one-page style site), and hide/display this content with the menu choices. It must also be in PURE javascript (no jquery), and should not rely on a plugin. If you work with code from elsewhere on the web, make sure to credit this code somewhere in your file or on your page (as in the example).