jQueryを突っ込んでみる。

Building Android Apps with HTML,CSS, and JavaScript(oreilly).
見ながらやってみた。

ヘッダを消してみて。

#header ul.hide {
    display: none;
}

ボタン経由で表示できるようにしてみる。

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

JavaScript をこんな感じで作って。

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');
    }
}

読み込んで。

    <script type="text/javascript" src="./javascript/jquery.js" />
    <script type="text/javascript" src="./javascript/android.js"></script>

じつは最後で超ハマった。
バグか仕様か不明だけど、以下のように書くと、正常に認識されず、画面が全て消えた(chrome11.0.696.68)。

    <script type="text/javascript" src="./javascript/jquery.js" />
    <script type="text/javascript" src="./javascript/android.js" />

こう書いちゃダメなのか文法的に間違ってるのかは不明。