Pop over mobile navigation menu.

Duplicate in front page JS as that does not load the main file.

.cypress/cypress/integration/responsive.js

@@ -10,6 +10,12 @@ describe('Front page responsive design tests', function() {
         cy.viewport(480, 800);
         cy.visit('/');
         cy.get('a#report-cta').should('be.visible');
+
+        cy.get('#main-nav').should('not.be.visible');
+        cy.get('#nav-link').click();
+        cy.get('#main-nav').should('be.visible');
+        cy.get('#nav-link').click();
+        cy.get('#main-nav').should('not.be.visible');
     });
 
     it('Shows correct things on desktop', function() {
@@ -20,7 +26,7 @@ describe('Front page responsive design tests', function() {
 });
 
 describe('Around page responsive design tests', function() {
-    it('Shows correct things on mobile', function() {
+    it('Shows correct things on mobile around', function() {
         cy.viewport(480, 800);
         cy.visit('/around?pc=' + Cypress.env('postcode') + '&js=1');
         cy.get('.mobile-map-banner').should('be.visible');
@@ -33,6 +39,16 @@ describe('Around page responsive design tests', function() {
         cy.cleanUpXHR();
     });
 
+    it('Mobile nav bar works on non-front page', function() {
+        cy.viewport(480, 800);
+        cy.visit('/faq');
+        cy.get('#main-nav').should('not.be.visible');
+        cy.get('#nav-link').click();
+        cy.get('#main-nav').should('be.visible');
+        cy.get('#nav-link').click();
+        cy.get('#main-nav').should('not.be.visible');
+    });
+
     it('Shows correct things on desktop', function() {
         cy.viewport(1024, 800);
         cy.visit('/around?pc=' + Cypress.env('postcode') + '&js=1');

CHANGELOG.md

@@ -5,6 +5,7 @@
         - New aerial map toggle.
         - Send text alerts for report updates to only-phone-verified users.
         - Add options for user to set global notification preferences.
+        - Pop over mobile navigation menu. #3270
     - Bugfixes:
         - Fix non-JS form when all extra questions answered. #3248
         - Improve display of disabled fields in iOS.

templates/web/base/main_nav.html

@@ -14,13 +14,14 @@
 [%~ END %]
 
 [% UNLESS omit_wrapper %]
-    <div id="main-nav" role="navigation">
+    <div id="js-menu-open-modal"></div>
+    <nav id="main-nav" role="navigation">
 [% END %]
 
     <ul class="[% ul_class %]"[% " id='" _ ul_id _ "'" IF ul_id %]>
         [% INCLUDE 'main_nav_items.html' %]
     </ul>
 
 [% UNLESS omit_wrapper %]
-    </div>
+    </nav>
 [% END %]

web/cobrands/fixmystreet.com/base.scss

@@ -171,11 +171,6 @@ svg|g.site-logo__svg {
     );
 }
 
-// Avoid double border between mobile nav and footer
-.nav-menu--main > :last-child a {
-  border-bottom: none;
-}
-
 $mysoc-footer-background-color: #222;
 $mysoc-footer-text-color: #acacac;
 $mysoc-footer-site-name-text-color: #fff;

web/cobrands/fixmystreet/fixmystreet.js

@@ -815,22 +815,41 @@ $.extend(fixmystreet.set_up, {
     $('.mobile #skip-this-step').addClass('chevron').wrap('<li>').parent().appendTo('#key-tools');
   },
 
+  // Very similar function in front.js for front page
   on_mobile_nav_click: function() {
-    $('.mobile').on('click', '#nav-link', function(e) {
-        e.preventDefault();
-        var offset = $('#main-nav').offset().top;
-        $('html, body').animate({scrollTop:offset}, 1000);
-
-        // Registering a pushState here means that mobile users can
-        // press their browser's Back button to return out of the
-        // mobile menu (easier than scrolling all the way back up
-        // the page). However, to show the map page popstate listener
-        // that this was a special state, we set hashchange to true in
-        // the event state, so we can detect it, and ignore it, later.
-        if ('pushState' in history) {
-            history.pushState({
-                hashchange: true
-            }, null);
+    var html = document.documentElement;
+    if (!html.classList) {
+      return;
+    }
+
+    var modal = document.getElementById('js-menu-open-modal'),
+        nav = document.getElementById('main-nav'),
+        nav_link = document.querySelector('[href="#main-nav"]');
+
+    var toggle_menu = function(e) {
+      if (!html.classList.contains('mobile')) {
+        return;
+      }
+      e.preventDefault();
+      var content = document.querySelector('.content'),
+          content_top = content.offsetTop - parseInt(getComputedStyle(content).marginTop, 10);
+      modal.style.top = content_top + 'px';
+      nav.style.top = content_top + 'px';
+      var opened = html.classList.toggle('js-nav-open');
+      if (opened) {
+        // Set height so can scroll menu if not enough space
+        var h = window.innerHeight - content_top;
+        nav.style.maxHeight = h + 'px';
+      }
+      nav_link.setAttribute('aria-expanded', opened);
+    };
+
+    modal.addEventListener('click', toggle_menu);
+    nav_link.addEventListener('click', toggle_menu);
+    nav_link.setAttribute('aria-expanded', false);
+    nav.addEventListener('click', function(e) {
+        if (e.target.matches('span')) {
+            toggle_menu(e);
         }
     });
   },

web/cobrands/sass/_base.scss

@@ -4,6 +4,7 @@ $body-font: MuseoSans, Helmet, Freesans, sans-serif !default;
 $meta-font: Helmet, Freesans, sans-serif !default;
 $heading-font: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif !default;
 $menu-image: 'menu-white' !default;
+$close-menu-image: "close-#{$menu-image}" !default;
 
 $link-color: #005ea5 !default;
 $link-hover-color: #2b8cc4 !default;
@@ -717,10 +718,13 @@ ul.error {
   height: 0;
   padding-top: 3em;
   overflow: hidden;
-  background: transparent url(../fixmystreet/images/#{$menu-image}.png) center center no-repeat;
-  background-image: inline-image("../fixmystreet/images/#{$menu-image}.svg"), none;
+  background: transparent inline-image("../fixmystreet/images/#{$menu-image}.svg") center center no-repeat;
   background-size: 22px 18px;
   #{$right}: 0;
+
+  html.js-nav-open & {
+    background-image: inline-image("../fixmystreet/images/#{$close-menu-image}.svg");
+  }
 }
 
 #nav-link, #report-cta {
@@ -747,21 +751,44 @@ ul.error {
   }
 }
 
+html.mobile.js-nav-open #js-menu-open-modal {
+    position: absolute;
+    bottom: -1000px; // Just to be sure
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
 // The nav list has this sort of "full width" look,
 // so we want to cancel out the margin from .container
 #main-nav {
   margin: 0 -1em;
+  .mobile & {
+    display: none;
+    position: absolute;
+    overflow: auto;
+    left: 1em;
+    right: 1em;
+    z-index: 1; // So appears over map
+  }
+  .mobile.js-nav-open & {
+    display: block;
+  }
 }
 
 .nav-menu {
   @include list-reset-soft;
+  border-top: 0.25em solid #333;
+  .mobile & {
+    border-top: none;
+  }
   a, span {
     display: block;
     padding: 0.5em 1em;
-    background-color: #f6f6f6;
+    background-color: #fff;
     color: #333;
     font-size: 1.25em;
-    border-bottom: 0.25em solid #333;
+    border-bottom: 1px solid #ccc;
   }
   a:visited {
     color: #333;
@@ -772,7 +799,7 @@ ul.error {
     text-decoration: none;
   }
   span {
-    background-color: #ccc;
+    background-color: mix(#fff, $primary, 70%);
   }
   span.report-a-problem-btn {
     cursor: pointer;
@@ -2141,7 +2168,7 @@ img.pin {
   }
 }
 
-.only-map {
+.only-map, .mobile.js-nav-open {
   height: 100%;
   body {
     height: 100%;

web/cobrands/tfl/base.scss

@@ -218,14 +218,14 @@ ol.big-numbers>li {
     color: $beck-blue;
     font-family: $heading-font;
     border: 0;
-    background-color: transparent;
+    background-color: #fff;
     text-decoration: underline;
     &:hover,
     &:active,
     &:focus,
     &:visited {
         color: $blue-dark;
-        background-color: transparent;
+        background-color: #fff;
     }
 }
 

web/js/front.js

@@ -1,6 +1,57 @@
 document.getElementById('pc').focus();
 
 (function(){
+
+    function set_up_mobile_nav() {
+        var html = document.documentElement;
+        if (!html.classList) {
+          return;
+        }
+
+        // Just the HTML class bit of the main resize listener, just in case
+        window.addEventListener('resize', function() {
+            var type = Modernizr.mq('(min-width: 48em)') ? 'desktop' : 'mobile';
+            if (type == 'mobile') {
+                html.classList.add('mobile');
+            } else {
+                html.classList.remove('mobile');
+            }
+        });
+
+        var modal = document.getElementById('js-menu-open-modal'),
+            nav = document.getElementById('main-nav'),
+            nav_link = document.querySelector('[href="#main-nav"]');
+
+        var toggle_menu = function(e) {
+            if (!html.classList.contains('mobile')) {
+                return;
+            }
+            e.preventDefault();
+            var content = document.getElementById('front-main'),
+                content_top = content.offsetTop - parseInt(getComputedStyle(content).marginTop, 10);
+            modal.style.top = content_top + 'px';
+            nav.style.top = content_top + 'px';
+            var opened = html.classList.toggle('js-nav-open');
+            if (opened) {
+                // Set height so can scroll menu if not enough space
+                var h = window.innerHeight - content_top;
+                nav.style.maxHeight = h + 'px';
+            }
+            nav_link.setAttribute('aria-expanded', opened);
+        };
+
+        modal.addEventListener('click', toggle_menu);
+        nav_link.addEventListener('click', toggle_menu);
+        nav_link.setAttribute('aria-expanded', false);
+        nav.addEventListener('click', function(e) {
+            if (e.target.matches('span')) {
+                toggle_menu(e);
+            }
+        });
+    }
+
+    set_up_mobile_nav();
+
     var around_forms = document.querySelectorAll('form[action*="around"]');
     for (var i=0; i<around_forms.length; i++) {
         var form = around_forms[i];
@@ -17,6 +68,10 @@ document.getElementById('pc').focus();
         link.href = link.href + (link.href.indexOf('?') > -1 ? '&js=1' : '?js=1');
     }
 
+    if (!('addEventListener' in window)) {
+        return;
+    }
+
     var lk = document.querySelector('span.report-a-problem-btn');
     if (lk && lk.addEventListener) {
         lk.addEventListener('click', function(e){