Question

I am trying to make a site with an off-canvas navigation that slides in on click of the ‘ navigation list ‘ icon in the upper-left.

I first developed it and powered it using CSS3 Transitions and :target and that works.

Then, with the help of StackOverflow, I developed a version powered by JQuery 1.9 with a similar effect. This version works fine.

Then, I combined them and am using Modernizr to detect when :target selector is not supported, it loads the JQuery from before.
I tried it in chrome and it works— meaning it works when CSS3 Transitions and :target is supported.
But, then I tried it in IE 7 and it doesn’t work.

I don’t know if this is because Modernizr and the custom :target test is not working and loading the jQuery or if the JQuery is not working now for some reason.

Here it is: http://goo.gl/ztbwe

I would really appreciate all and any help in getting this to work in browsers that support CSS3 Transitions and :target and when either is not supported provide & execute the jQuery.

Answer 1

Your odd() function (Line 62 in menu.html) has an extra comma:

function odd() {
    $('.content').animate({
        marginLeft : '20%',
        marginRight : '-20%', // <-- bad comma
    });
}

Next time just open your demo in Internet Explorer (or whatever browser is giving you problems), and hit F12 (dev tools). IE lets you switch the browser version you wish to view the page in, so if your in IE, then in dev tools set the ‘browser mode’ to IE7, then open the console, and inspect your errors.