Scripts.Indisguise.Org - a hobbyist's blog and scripts archive

For this week, I’m doing a free-for-all: if you have something you’re curious about in terms of HTML, CSS and JavaScript, post your question in the comments and I’ll cover your question in future Frontend Fridays. Nothing is “too simple”, so feel free to post questions (please try to keep clear of Enthusiast-only questions though! ;) ).

The reason for this (rather abrupt) post is that due to my rather freaky schedule this week (I’m moving by end of the month, and we’re hopefully signing a tenancy agreement this coming Monday, finally), I wasn’t able to prepare for this week’s Frontend Friday. I had a draft in the works but unfortunately, it needs more research than I have time for this week.

Let me know in the comments! :)

For this week’s Frontend Friday I wanted to get a little more technical, and decided on focusing on and working though the implementation of Indiscript’s menus — the main navigation up top, and the script highlights on the sidebar:

What’s interesting about this implementation is that if I were to rename sections around, add new scripts to the sidebar, and otherwise need “new” menu items, I’ll never need to do anything more than just add the menu/link item, and every menu item or link presented this way makes use of just one 61.5kb image.

When I was working with the Indiscripts revamp, I knew I wanted something relatively simple, light, and easy to implement and extend for if/when I need to add new sections to the website. Usually that meant that artsy menu items were out…but I didn’t want to give up so easily. The result is the menu/link style you see now: an artsy letter serves as a background, usually in plain grey. The active menu item is green, and when you’re hovering over it, it becomes orange. If I wanted to use blue, pink, yellow, brown, etc–that’s all possible, with the help of CSS and PNG.

To make sure I have everything ready for if/when the time comes to add sections, I prepared a sprite image containing all the letters of the alphabet. For the uninitiated, a sprite (in terms of web development/CSS) is an image made up of several smaller images in measured distances from each other, in the interests of reducing HTTP requests and speed up website load times (see Website Performance’s What are CSS sprites?).

Read the rest of this entry »