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 [click here], 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: rgba(0,0,0,0.6) 0px -1px 1px;
line-height: 28px;
border-width: 0 8px 0 8px;
-webkit-border-image: url(images/button.png) 0 8 0 8;
}
Tip: For the graphics used in this chapter,
you can download the example files from http://examples.oreilly.com/catalog/9781449383268 and
copy them from the images directory. Put these
copies into an images subdirectory beneath the
directory that contains your HTML document (you’ll probably need to
create the images directory).
Okay, time for some JavaScript. In preparation
for the JavaScript you’re about to write, you need to update your HTML
document to include jquery.js and
android.js. Add these lines to the head
section of your HTML document:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="android.js"></script>
Note: jQuery downloads, documentation, and
tutorials are available at http://jquery.com. To
use jQuery, you will need to download it from there, rename the file you
downloaded (such as jquery-1.3.2.min.js) to
jquery.js, and put a copy of it in the same
directory as your HTML document.
The primary duty of the JavaScript in
android.js is to allow users to show and hide the nav
menus. Copy the following JavaScript into a file called
android.js and save it in the same folder as the HTML
file:
if (window.innerWidth && window.innerWidth <= 480) {
$(document).ready(function(){
$('#header ul').addClass('hide');
$('#header').append('<div class="leftButton"
onclick="toggleMenu()">Menu</div>');
});
function toggleMenu() {
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');
}
}
Come to think of it, we haven’t written the CSS
for the pressed class yet, so let’s do so now. Go back to
android.css and insert the following:
#header div.pressed {
-webkit-border-image: url(images/button_clicked.png) 0 8 0 8;
}
As you can see, we’re simply specifying a
different image for the button border (it happens to be slightly darker).
This will add a two-state effect to the button that should make it evident
to the user that the button can both show and hide the menu (Figure 1). Figure 2
shows a stretched-out view of the page showing both the menu and some of
the text.
