pageLoad.js - I know it'll be an onclick onto an element, but I'm not entirely sure I understand how
So I have several tabs (all can be seen on my github - https://github.com/callum-laing/restaurant).
I have everything importing into an index.js file, which is containing my header.js (navbar), footer.js (just a piece of text saying "Developed by Callum Laing" and then I have home.js which is showing the text in the middle of the screen.
I also now have contact.js and menu.js, and what I want is whenever I click one of the navbar tags, it brings up that .js file and removes the previous one. (the menu and contact files won't be the entire area, it'll just be roughly 50% of the space, like a pop-up card).
Does anyone have a rough template they could share on how to do this, or help me try to understand how it's done? because I'm quite confused.. (I've never learned this)
2 Replies
I'm not sure exactly what you're asking. You're dynamically swapping the main content area? Are you asking how to do the layout? Can you provide any live site or code pen to look at?
I normally lay out a page with a header, main content area, and footer with CSS grid.
https://callum-laing.github.io/restaurant/
Essentially the content between the 2 yellow lines I want to be able to change, which on initial page load is just the "Welcome The Pantry - Where.....". I want to click on MENU and get the menu pop up and the initialload text vanish, then CONTACT load up and MENU vanish, etc..