I’m new to html/html5, but not to programming, and i’m trying to code my personal website. I’ve read many resources and tutorials on the basics but I’m looking for some tips on how to begin achieving the layout I want.
In my layout (here) I’m looking to have the left half of my page as a fixed navigation panel with an image highlighting the current page, then with each option the right side refreshes to a new independently scrolling page and the highlight image animates in the nav panel to the new option.
How should I begin to achieve something like this? I just need a push in the right direction to the type of elements/scripts/whatever I will need to implement.
Thank you!
Here is a simple example to help you start out:
jsFiddle
You’ll notice the text on the right slides out of the screen when you scroll but the green box stays in the same position. This is done with a slight bit of CSS.
The navigation div on the left is styled with
position: fixed;. This keeps the navigation div in one place at all times.In contrast, the content div on the right is styled with
position: absolute;with aleft: 25%set. The widths of the navigation div and content div are set in percentages. This allows the content to take up the same relative screen space whether the window is larger or smaller. Your content will adapt to your viewers resolution.Using an
<iframe>will is one possible solution to altering the content in the right hand content div. Another would be to useajaxbut that is getting a little more advanced as you now must understand client and server scripting in order to receive the full benefits from it.iFrame
Ajax
If you’re information is static and will not change often, you could considering making a single page web app with multiple templates that are appended to the content div.
jQuery
jQuery Templates Plugin
jQuery is really good as well for learning JavaScript and makes building dynamic client side applications a breeze.
They also have
ajaxsupport as well:jQuery Ajax
Hope this helps.
Good luck and Happy Coding!