Question

I am creating a mobile version of my page where I have plugged a new iphone like navigation, it is almost working but the background html element is still being shown where it should not.

This is my site: http://www.top-jobs-europe.de/m/

Can someone take a look and try to help me? The purpose is that the menu links should be hidden at first and after opening one should see it, after closing again not. Intuitively you understand my problem once you see the page.

Answer 1

In your iphonemenu.js file, change the following, add a variable to handle animation of menu_cose:

$(document).ready(function(){
    var menuclose = $("menu_close");
    var pagebody = $("#pagebody");
    var themenu  = $("#navmenu");
    var topbar   = $("#toolbarnav");
    var content  = $("#content");
    var viewport = {
        width  : $(window).width(),
        height : $(window).height()
    };
    // retrieve variables as 
    // viewport.width / viewport.height

    function openme() { 
        $(function () {

            topbar.animate({
               left: "290px"
            }, { duration: 300, queue: false });
            pagebody.animate({
               left: "200px"
            }, { duration: 300, queue: false });
                menuclose.animate({
                   left:"0px"
                },{duration:300, queue:false});
        });
    }

    function closeme() {
        var closeme = $(function() {
            topbar.animate({
                left: "0px"
            }, { duration: 180, queue: false });
            pagebody.animate({
                left: "-90px"
            }, { duration: 180, queue: false });
            menuclose.animate({
                left:"-90px"
            },{duration:180,queue:false});
        });
    }