/* * Beispiel aus dem "Videotraining zu Responsive Webdesign" von Jonas Hellwig - Galileo Verlag * mit js-on / js-off Switch für Fallback ohne JavaScript */ $(document).ready(function(){ // Wenn JS aktiv remove "js-off" und setze "js-on" $('html').addClass('js-on'); $('html').removeClass('js-off'); // Wenn JavaScript im Browser nicht deaktiviert wurde, wird ein Link im Header eingefügt var navToggle = ['
'].join(""); $("header").append(navToggle); }); $(function() { var pull = $('#toggleNavMain'); menu = $('#navMain'); menuHeight = menu.height(); // Bei Klick auf den oben per JavaScript eingefügten Link zum Ein- und Ausblenden des Menüs, // wird das Default-Verhalten des Events unterdrückt und das Menü slide-getoggelt $(pull).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); // Wenn das Fenster vergrößert wird, nachdem vorher per JavaScript ein stlye="display:none;" gesetzt wurde // um das Menü zuverstecken, ist es auch auf größeren Screens versteckt, // darum wird für screens > 320px das style-Attribut aus der UL entfernt $(window).resize(function() { var screen = $(window).width(); if(screen > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); });