For a school project, I am in the process of creating a website that I wanted to make unique and different. However, I have encountered a major challenge with a tight deadline approaching. Any assistance would be greatly appreciated.
Let's address the problem at hand:
I chose to structure my site with four "tabs" implemented as separate pages within their own div elements. When a user clicks on a link, a small piece of JavaScript is triggered to set the left property based on the current page being viewed relative to the screen width.
For example: If the user is viewing page 1, then for page 0 x=-1; for page 2 x=2; and for page 3 x=3. Likewise, if page 3 is being viewed, for page 0 x=-3; for page 1 x=-2; and for page 2 x=-1.
By applying position: fixed; to each tab's div id and adding a transition, I can achieve a smooth sliding animation when switching between pages while keeping the other tabs fixed off-screen to the left or right.
The issue arises with the need for vertical scrolling on each tab, which seems unattainable due to the fixed div positions. I experimented with alternative positioning properties like relative and floating elements simultaneously but encountered layout distortions such as cascading tabs.
Referencing a mock-up of my code on JSFiddle revealed issues (link provided) that prevented me from achieving the desired functionality. The CSS and HTML code snippets showcase my attempts to tackle the problem by utilizing fixed positioning:
#container {
display: block;
}
nav {
position: fixed;
display: block;
}
#homeTab, #xTab, #yTab, #zTab {
position: fixed;
top: 50px;
transition: 2s;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-ms-transition: 2s;
}
Integrating these styles into the document along with JavaScript logic positioning the tabs dynamically posed challenges with scrollability while maintaining horizontal tab navigation. Unfortunately, jQuery solutions are not viable for me due to time limitations and lack of expertise.
If you have any suggestions on improving this setup to enable vertical scrolling within the tabs alongside the existing horizontal navigation, your insights would be invaluable. Thank you for your assistance in advance.