Subtitles of the Movie

In this movie we continue to set up our project to use JavaScript. So let's go ahead and jump back into our menu.js here and let's take a second look at our setup here for the onmouseover that triggers our menuDropDown function. So first we have this window.onload so that when that event happens we trigger this block of code and the first thing it does is it looks at the document, finds the element of subMenuHeader, which we set up the ID to, and it sets it up so that whenever people mouse over top of it, it will trigger the menuDropDown. Now if you notice here our menuDropDown does not have the parentheses on it. Whenever you have the parentheses on it inside of a script what will happen is it will actually call that specific function. So we don't want it to show automatically, we want it to still be hidden, so we don't put the parentheses on this. Now once it reads this piece of our script and loads it into memory it's going to associate mouseover actions on this item with a specific function. So whenever you do mouseover it will be calling this method right here, which is the menuDropDown which causes the visibility to turn to visible. Now our document is set up enough so that we can actually test this, so I'm going to go ahead and save that and I'm going to jump over to my HTML and save there, just to make sure, and then go into my browser and I'll Refresh and whenever I take my mouse and hover over Tutorials indeed my Tutorials Sublist shows up. However, whenever I take my cursor and move it outside it's not disappearing. So, I'm going to go ahead and Refresh here and walk us through that again. So whenever the browser reads our document it reads it from the top to the bottom. When it hits that script section it goes off into the menu.js file, reads all of that and sets it up. So whenever it hits that function for menuDropDown it doesn't do anything because it's a function that is not activated yet. The same thing happens with the menuCollapse. It's a function so it's being deferred. Whenever it gets to the window.onload it sets up things but it doesn't act on anything. It's not going to act on anything because all we're doing when we're looking at our script right here is we're just associating one action with an interaction, or an event. So here we have that event of onmouseover, and when that happens we want it to trigger our drop-down. So once it loads all that into memory it continues to load the document so whenever all of our elements are in place that's when our window triggers the event for onload, so it's going to say: I'm done loading. The DOM is ready to be manipulated. We now have the setup so that it triggers this script to getElementById, so it triggers that and it gets this ElementById, which we set up as the subMenuHeader, so now that whenever I mouse over top of it, it's going to show that content region. Let me go ahead and jump back into my js here and I'm going to add in another behavior. Now the behavior that I want to set up here is going to make it so whenever we mouse out of our subMenuContents the subMenuContents will hide. So my actual target here will be the subMenuContents and the event is the onmouseout, and the function that it's going to trigger will be menuCollapse. I'll go ahead and save that, jump back into my browser, Refresh, and whenever I come in here and hover over my Tutorials it shows the menu. I go down into the menu, I move out of it, and it disappears. So, that's how we can set up a pretty basic kind of DHTML menu system here based on our CSS. And if you think about it, what we've done here is pretty complicated because we're using some pretty nice little features of JavaScript here to manipulate our CSS. Now this is just looking at the very specific purpose of manipulating CSS and as I mentioned before, JavaScript is a pretty complex language that you can do a lot of different things with. Now as you've seen, some of the things with JavaScript and knowing the basics of JavaScript can be kind of complex, but I do recommend that you take a look at what we've done here, work with some of the other CSS properties and add this little piece of script to your Toolbox because it's going to come in quite handy. Now I also recommend that you take the time to go back over these movies and examine what we've done, step through those, and expand your knowledge by exploring on your own. With that in mind, this concludes our look at adding JavaScript to our project for the purpose of a simple DHTML menu.