I add some html/css to may scene but I cannot see them on screen

Questions
1

Hello everyone

I add the following code to my PG :

const div = document.createElement('div');
div.className = "sidenav"
div.id = "mySidenav"
const link = document.createElement('a')
link.className = "closebtn"
link.setAttribute('onclick','closeNav()')    
div.appendChild(link)

document.body.appendChild(div)


console.log(div)

const span = document.createElement('span');
span.setAttribute('onclick','openNav()')
span.style.fontSize  = "30px";
span.style.cursor = "pointer"

span.appendChild(document.createTextNode('hello'))
console.log(span)

document.body.appendChild(span)

const header1 = document.createElement('h1');
header1.appendChild(document.createTextNode('Animate'))
document.body.appendChild(header1)



function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

but I cannot see anything.
what. is the problem?

here is my PG: https://playground.babylonjs.com/#XB49NT#17

2

Please show a simplified PG with this code

1 Like
3

Try to change the width and height and width, the positioning of divs
https://playground.babylonjs.com/#XB49NT#19
you have some problem with CSS (style)

1 Like
4

@JohnK Thank you so much for. helping. :pray:
this is the simplified PG: https://playground.babylonjs.com/#XB49NT#21

5

@Mostafa_Salloum Thanks a lot for answering to my question.

I want to build side navigation. I just change my CSS but the problem again is in my scene.

7

check this PG:https://playground.babylonjs.com/#XB49NT#26
i put the close and open nav outside the main function

2 Likes
8

Thanks a lot for. your helping and your time :pray: :pray: :pray:

9

your welcome, and if you want you can use Babylon GUI check it in the documentation :smiley:

1 Like
10

I need html/css because I need to build a chart, and with GUI I cannot build a chart. because of that I should use html/css :smiley:

1 Like