Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition

Adding Basic Behavior with jQuery

The next step is to add some JavaScript to the page to support some basic dynamic behavior. In particular, we will allow users to show and hide the big honking navigation section in the header so that they only see it when they want to. To make this work, we’ll write some new CSS and use some JavaScript to apply the new CSS to the existing HTML.

First, let’s take a look at the new CSS. Step 1 is to hide the ul elements in the header so they don’t show up when the user first loads the page. If you are following along at home, open your android.css file and add the following:

#header ul.hide {
    display: none;
}

This won’t actually hide anything until you add the hide class to the ul elements (you’ll do this shortly with some JavaScript). Next, define the styles for the button that will show and hide the menu. We haven’t created the HTML for the button yet. For your information, it’s going to look like this:

<div class="leftButton" onclick="toggleMenu()">Menu</div>

I’ll describe the button HTML in detail in the section Adding Basic Behavior with jQuery, so don’t add the preceding line of code to your HTML file. The important thing to understand is that it’s a div with the class leftButton and it’s going to be in the header.

Here is the CSS style for the button (you can go ahead and add this to the android.css file):

#header div.leftButton {
    position: absolute;
    top: 7px;
    left: 6px;
    height: 30px;
    font-weight: bold; text-align: center; color: white; text-shadow: ...