Right-to-left full screen navigation


#1

Hello, I am creating a navigation menu that slide (full screen) like this example : https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
But what should I add to the javascript to switch the direction (right-to-left).
In this example the navigation menu will slide in from left to right.

Thanks.


#2

You could manipulate the left position rather than the width.

e.g.

<script>
function openNav() {
    document.getElementById("myNav").style.left = "0";
}

function closeNav() {
    document.getElementById("myNav").style.left = "100%";
}
</script>

Then change the css for the overlay:

.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

closed #3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.