Today, instead of an informative article, I have a question for my readers. How do you make an animated, resizing icon bar?

Example Images of What I’d Like to Create

This is a smaller example of how I’d like the icon bar to look when a user loads the main page; larger icons, easy to click on.

This is a smaller example of how I’d like the icon bar to minimize when a user clicks an icon and goes into one of the content areas of the site; smaller icons, but still visible.

Usage and Placement of the Icon Bar

Ideally, I’d like the icon bar to run horizontally along the very top of the page, so that the navigation for the site is not too obtrusive for reading. It would also be awesome if the user could expand the icon bar out again by hovering over this bar.

Is This Even Possible?

I have found a few tutorials that kinda sorta do this, but don’t really get the exact same functionality.

The jQuery “Sliding Panel” Code

w3schools.com has these tutorials and examples for building a sliding panel or animated panel. This could possibly work for opening and closing a menu, and perhaps even a navigation bar like I wish for.

However, I’m not sure how to make the icons display bigger when users first visit the site. I think I’d probably have to stay with the same icon sizes so that the rest of the layout wouldn’t be thrown off with bigger images.

The JavaScript Hide/Show Menu Code

CSSCreator.com shows a way to hide and show specific divided layers with a Javascript in your header and some special classes created in your CSS.

This type of solution can produce a menu that is very easy to hide away when not needed, but it wouldn’t be automatically opened when the user first loads the page–it could end up being confusing rather than helpful to users.

What’s Your Answer?

Do you know of a way that I could create this resizing icon bar? Let me know in the comments! (If we can figure this out together, I may be able to debut this new trick on the upcoming Version 13 of WithinMyWorld.org!