Hi,
i’m trying to develop a gui with classic DOM tools (CSS, HTML5).
The porpuse is to make a sliding navigation bar that overlays the renderCanvas in which runs Babylon.
The problem is that the sliding panel doesn’t behave like expected: instead of overlays the canvas it pushes it and resizing it.
I didn’t understand: i’ve tryed with an empty Canvas or with a simple image inside and all work fine.
Here you can see a simple example of what i’d like to achieve: Tryit Editor v3.6
I’ve tryed to play with z-index but with no result.
I can’t reproduce the issue on PG so i attach the snippet of code i use:
My CSS:
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
/*z-index: -1;*/
}
#fps {
position: absolute;
background-color: black;
border: 2px solid red;
text-align: center;
font-size: 16px;
color: white;
top: 15px;
right: 10px;
width: 60px;
height: 20px;
}
/* stili per il menu */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 99;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#overlay {
position: fixed;
display: block;
width: 5%;
height: 3%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,0.5);
z-index: 98;
cursor: pointer;
border-bottom-right-radius:30px;
}
HTML
<*html>
<head>
<title>Logistica magazzino</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stili.css">
</head>
<body>
<!-- div vuoto per debug
<div id="debug" style="height: 20px;"></div>
-->
<div id="main">
<div id="mySidenav" class="sidenav" tabindex="2">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<span id="overlay" style="font-size:100%;cursor:pointer;" onclick="openNav()">☰ Opzioni</span>
<canvas id="renderCanvas" style="display: block;">
</canvas>
</div>
<!-- Link to the last version of BabylonJS -->
<script src="babylonjs/babylon.js"></script>
<!-- Link a earcut -->
<script src="babylonjs/earcut.min.js"></script>
<!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
<script src="babylonjs/babylonjs.loaders.min.js"></script>
<script src="babylonjs/babylon.gui.min.js"></script>
<!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
<script src="lib/pep.min.js"></script>
<!--<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script> -->
<!-- Link applicazione magazzino 3D -->
<div id="scripts"></div>
<script src="gui/textures.js" type="text/javascript"></script>
<script src="gui/mag_gui.js" type="text/javascript"></script>
<script src="scaffale.js" type="text/javascript"></script>
<script src="magazzino.js" type="text/javascript"></script>
<script src="mappa.js" type="text/javascript"></script>
<script src="funzioni.js" type="text/javascript"></script>
</body>
</html>
JS
/*
* apertura del menu laterale
*/
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/*
* chiusura del menu laterale
*/
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
Any idea?
Thanks