Full screen Overlay Navigation

Hi there,

I have this script on my website [www.parisaspersiankitchen.com] where
the menu (three bars top right) opens from left to right, according to this script [https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp]

For some reason it works fine to have the menu slide in from the left, but it refuses to drop in from the top or show without animation.

So this part of the script works:

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

but this does not:

/* Open */
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

/* Close */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

and this does neither:

/* Open */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}

/* Close */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

How come, please?
Any suggestions?

(https://www.parisaspersiankitchen.com)

Slightly off-topic, but you realise that example on W3Schhols doesn’t work for people who only use the keyboard?

1 Like

When you say… “this part of the script”… you’re not… redefining the same functions over and over and expecting them all to fire, riiiight?

1 Like

You are setting the height to 100% but the width is still zero in the css. Height:100% seldom works as you expect anyway so use vh units instead.

I would instead toggle a class and then you can change as many css properties as you need.

e.g.


    /* Open */
    function openNav() {
      document.getElementById("myNav").classList.add('open');
    }
    /* Close */
    function closeNav() {
      document.getElementById("myNav").classList.remove('open');
    }
#myNav.overlay-menu {
  width: 100%;
  height: 0;
}
#myNav.overlay-menu.open {
  height: 100vh;
  overflow-y: auto;
}

You can’t animate between display:none and display:block anyway but the same as the other answer in that the width is still zero.:slight_smile:

1 Like

Hi @Gandalf
Didn’t even know that there are users that only use their keyboard …
But I guess that would a minority?
@m_hutley
I would like to use the “show no animation”, so I replaced that specific javascript part.
@PaulOB
Is your code showing it without animation?

No its animating ok.:slight_smile:

Live example:

Codepen:

I added a keyframe animation to hide the scrollbar while its animating which is a little nicer. You need the overflow:auto or on very small screens you won’t be able to scroll to see the options.

Sure they are in a minority, but I’m sure you’re not suggesting that web developers should ignore minorities. :wink:

A lot of people with disabilities are unable to use a mouse, for various reasons, and many countries have legislation that makes it illegal to ignore the needs of people with disabilities.

2 Likes

Thanks @PaulOB works fine from top to bottom.
I meant the “show, no animation” option; what code is required for that, please?

@Gandalf I am only saying that I don’t think I can do good to all. F.ex. I will not test if my site looks good in IE … Can you show me a site that has a menu that is suitable to be used without using mouse, please?

Maybe another styling question: on my device (Macbook) the close X and the opening three bars are not set at the same position. Is it possible to have the width of the menu the same as the width of the content of the site? But how do I keep the bottom image full-width-screen then?

If you don’t want any animation then set the transition to none.

#myNav.overlay-menu {
  width: 100%;
  height: 0;
  transition:none;
  overflow: hidden;
}

The X close button will be at the far edge of the screen on wide screens because the overlay is full width but your layout is a max-width of 1140px.

You can tweak it for smaller widths.

e.g.

#myNav.overlay-menu .closebtn {
  top: 28px;
  right: 36px;
}

However once the window is wider than 1140px the hamburger and the X will never match.

Do you mean the menu portion or the whole overlay?

Back tomorrow now :slight_smile:

Actually, I think I may have been wrong and their menu is keyboard-friendly. It is difficult to check without reproducing the full page myself (which I don’t have time to do right now).

Thanks @PaulOB

I mean just the menu portion, but having the whole screen with white background.
But that would only be interesting if the closing X could be also inside the width of the menu.

Yes that’s possible but I don’t think its desirable because parts of your main page extend to both edges of the viewport anyway (i.e. the image on the left and the back to top button on the right).

The problem is that the rest of the page is already governed by the boostrap grid so really you should have built the menu section using the same bootstrap classes and then they will always match.

You could match the wide screen with this.

#myNav .overlay-content {
  position: relative;
  top: 0;
  padding-top: 20vh;
  width: auto;
  max-width: 1140px;
  margin: auto;
  background: white;
}

If you wanted the close button and the hamburger to match then you would need to either move the close button inside the col class of the overlay and then position it to the right of that. Or instead place the hamburger and the close button in the far right of the browser.

Even then you have a problem in that the hamburger scrolls up and down and the close button does not which means the chances of them matching are slim anyway.

Note that your overlay menu is very hard for me to see as there is little contrast between it and the background so you need to work on that a little :slight_smile:

Thanks @PaulOB
So let’s skip the aligning of the close x and hamburger … :slight_smile:
You mention the overlay menu is hard to see for you. Better now?

FWIW, I have created a modified Codepen from W3Schools’ code. It removes some of the inconsistencies in their code and in particular removes the inline JS and CSS.

1 Like

Thanks @Gandalf

@gandalf I don’t think it is, and I think you have solved the issue (to an extent?) using buttons instead of spans.

Personally I tend to look at Bootstrap as a model to follow. In the following example, their toggler is span wrapped inside of a button.

https://getbootstrap.com/docs/5.0/examples/album/

<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

The menu, it’s contents and the page contents are all accessible via keyboard tab, shift + tab and enter to open and close.

The page elements, buttons etc are also visible when in focus, it seems by adding box-shadow.

For something that will benefit those with disabilities/injuries, and requires what appears to be a small change to markup and styling it’s got to be worth considering.

2 Likes

@PaulOB
What I wanted to achieve is this menu: https://immopoint.be/:

  • sliding in from the right
  • menu content is within the width of the content of the site
    But I could use the “modal-dialog” in Bootstrap for that also.

What have you tried?

1 Like

I adjusted the modal code a bit:

.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}@media screen and (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}.modal-dialog-centered{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:90%;}.modal-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;padding:20px 30px 0 30px;border-top-left-radius:.3rem;border-top-right-radius:.3rem}.modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:30px}.modal-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #e9ecef}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{width:90%;margin:1.75rem auto}.modal-dialog-centered{height:90%;}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg{max-width:90%}}

But I do not manage to have it pop-up at 90% width and height.
It would also be nice to have the logo in the middle and divide halfs with different bg-color.

This is what I got so far: https://parisaspersiankitchen.com/AA.php

So you’re using completely different code from what you started with? There’s no modal-open or modal class in the code from W3Schools.