I love this site. I found it by chance (googling interactive html websites, go figure). I like this site because it is simple, versatile, and easy to navigate, while still being beautiful and having a clear and visually appealing design.
The main page has a photo background, and information, which can be navigated with left and right arrows, which when clicked create an interesting effect of sliding the page over to reveal the next page.
All of the navigation and menu bars, while there are many, are transparent and float nicely over the background image, creating a slick and minimalistic design — even for a site with a lot of content on it.
Some of the menu items appear as a slide-up box which you can “open” and “close”. This is a nice little interactive technique that allows users to see small bits of information without leaving the original page.
Other menu item content comes up as a black “popup” window within the page, with an additional black overlay. This is a nice interactive feature because it doesn’t feel like you are moving to new content, and the black-out effect makes it easy to focus on the information at hand. An X at the bottom of the box makes navigation easy to understand how to bring you back to the main page.
Clicking one of the menu items will bring you to a new more text heavy page. This is set up similarly with a floating transparent box over a background image. The interesting effect here is that you scroll only the text box, while the background image remains fixed.
I think any of these elements would provide useful interactive navigation for our next website. By creating minimalistic and simple navigations and information boxes, the rest of the site is allowed to be very visual and colorful.
For the HTML/CSS, their coding was very convoluted and not tagged or noted (something I will be sure to do more, looking through this code to try to find distinct elements was not fun…).
However, here is some of the coding that I found for doing some of the box overlays. (I know, it hurt my brain to look at it too)