Hello, I am new to this forum. I am not a professional web designer, I just do it for fun. Haha. So. I am looking for an HTML5, CSS3 script that creates a similar effect as the itv.com or apple page navigation. At this point I am only interested in the navigation function on the site, where the menu drops down the top after the actual menu is not visible on the page anymore. Examples: itv.com http://www.apple.com/iphone-5c/ Does anyone know a good link where I can find some examples that I can then customise for my website? I am also interested in to know how apple created the scrolling function on their website (when the page automatically aligns the top of the content container as you scroll down - please see example above on apple.com/...). It seems to be becoming very popular and I do like it myself as well. My last question would be: is lazy load the best way to go about nowadays to avoid large images being pre-loaded on the webiste? Sorry for all of these questions - I haven't developed websites for about a year now and I would like to catch up with the latest trends. Many thanks!
The menu being stuck to the top of the page is something that can simply be done with CSS, but it's Javascript that makes it animate smoothly. There are countless plugins/tutorials/code samples out there that do this. I'm sure if you searched on Google for something like 'sticky navigation' you'll get a bunch of results pointing you in the right direction. A warning though, some of this code can be kinda confusing if you don't already understand some of it because even though the idea is the same, the code can be written a million different ways. And nowadays you shouldn't have to worry about images bogging down the load time on websites, especially if you take the time to put them into proper formats and compressed, but essentially it's the scripts that kill a website's speed.
In terms of the menu thing -- my advice is DON'T!!!!! Screen real-estate is pressed enough for many users, chewing up content area with a fixed menu -- as 'flashy' and cute as it might be -- just pisses off users on things like ultranotes, netbooks, tablets, etc, etc... Waste of code, waste of time, and since it usually takes script-tard bull to work, pisses on accessibility as well. Remember, just because something is popular that doesn't make it good; see Justin Bieber, McDonalds and tramp stamps. As to avoiding large images on websites, just avoid using large images on websites. If it's not content, don't do it. That simple. Content is KING, so if it's content, include it, if it's not, it's optional. Remember, people visit websites for the CONTENT, NOT the goofy graphics or gee ain't it neat animated scripttard bull you hang around the content. Loo at the real success stories of the Internet -- eBay, Amazon, Google, Slashdot, facebook -- not exactly a visual tour-de-force now, are they?