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
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.
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!