Sources JS et SASS maintenues à jour ici : https://github.com/franklang/foundation-sites-plugins.
Dans notre example, le off-canvas de droite prend prend 50% de la largeur de la fenêtre pour les écrans medium et supérieurs.
Les plugins Foundation offcanvas, box (util), mediaquery (util) sont obligatoires.
HTML
http://foundation.zurb.com/sites/docs/off-canvas.html
SASS
|
1 2 3 |
#offCanvasRight.is-open { transform: translateX(0) !important; } |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
;(function ($, window, undefined){ /** * foundation.widerOffcanvas.js plugin * * Extends "Foundation for Sites" v6.4.1 off-canvas plugin * to provide a wider than 250px-standard width off-canvas. * * [WARNING] Tested for right-positioned off-canvas only so far. * * Required third-party components: * - foundation.core.js * - foundation.offcanvas.js * - foundation.util.box.js * * Usage: * $(document).widerOffcanvas({ * triggeringBreakpoint: 'medium', * offCanvasID: '#offCanvasRight', * pageID: '#page-wrapper' * }); */ $.fn.widerOffcanvas = function(options){ var defaults = { triggeringBreakpoint: 'medium', // one of Foundation's breakpoint (small, medium, large, ...) offCanvasID: '#offCanvasRight', // target offcanvas element ID pageID: '#page-wrapper' // page ID } var settings = $.extend({}, defaults, options); /** * Destroy function (more of a DOM reset actually...) */ function destroyWiderOffCanvas() { $(settings.offCanvasID, settings.pageID).attr('style', ''); } /** * Set wider off-canvas specific width */ function setWiderOffCanvasWidth() { var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth')); var pageSideMarginWidth = (globalWidth.parentDims.width - globalWidth.width)/2; var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333; var widerOffCanvasWidth = pageSideMarginWidth + baseWiderOffCanvasWidth; console.log(pageSideMarginWidth + ', ' + baseWiderOffCanvasWidth + ', ' + widerOffCanvasWidth); $(settings.offCanvasID).css({ 'width': widerOffCanvasWidth, '-webkit-transform': 'translateX(' + widerOffCanvasWidth + 'px)', '-ms-transform': 'translateX(' + widerOffCanvasWidth + 'px)', 'transform': 'translateX(' + widerOffCanvasWidth + 'px)' }); } /** * Set page indent value (page slides to the opposite side regarding where off-canvas opens) */ function setPageIndentValue() { var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth')); var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333; $(settings.offCanvasID).on('opened.zf.offcanvas', function() { $(settings.pageID).css({ '-webkit-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)', '-ms-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)', 'transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)' }); }).on('closed.zf.offcanvas', function() { $(settings.pageID).attr('style', ' '); }); } /** * On document ready... */ if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) { setWiderOffCanvasWidth(); setPageIndentValue(); } /** * On window resize... */ $(window).on('resize', function() { destroyWiderOffCanvas(); var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth')); if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) { setWiderOffCanvasWidth(); setPageIndentValue(); } }); }; }(jQuery, window)); |