I’d like to pose a question for my webdesigner/developer readers out there: What made you first begin creating websites?

I ask this because we all have a story of what first drew us to webdesign and development. For instance, I got interested in webdesign way back in 2001, when my family first got Internet access and I saw how people were building sites to share ideas and information. (Little did we all know then that the Internet would become SO vitally important to our lives!)

After some thought about this, I came up with three basic reasons why we all likely began designing and building websites–do any of these fit your story?

#1: Sharing Ideas and Information

Whether we built sites to share our love of a TV show to others, to blog about our daily lives, or to disseminate DIY tutorials, I would wager that many of us webdesigners and developers originally wanted to create sites that shared information and ideas. Making a small site as a hobby or as a little service to fellow Internet users may indeed be how a lot of us got started–we cut our coding teeth on those first HTML pages, grew in aesthetic knowledge as we tried (and erred) a lot with our first designs. We were doing all this for the love of the content, trying to create the best “frame” for our words and pictures.

#2: Showing Off Our Creativity

Then again, some of us likely began designing and developing websites just to see what we could do with an online space of our own. We experimented with new code and scripts, tried new color combinations, placed the navigation and content in different places, used all sorts of art as inspiration for the arrangement of elements on screen…all for the mental challenge and creativity of it, as a way to stretch our design wings. With every scrap of layout, every bit of script, we asked ourselves: “What can this thing DO? What are the possibilities?”–and then we came up with answers from our experiences, our trials and errors.

#3: Making Money

But I don’t mean to leave out or devalue those who first began building sites as a money-making tool. Blogging especially has been touted so often as an “easy way” to make online money, a job you can do on your own time without leaving home, that indeed many people have been drawn to webdesign and development through that. And this is not even mentioning other forms of e-commerce like online stores. Once those of us who began webdesign this way started toying around with the creation of the site–setting up our online storefronts, if you will–our curiosity was roused. “How DOES somebody make a layout like this? How DOES this online shopping cart work? …And could I make one myself?”

Which of these three reasons fits you best? Or are you a combination of two, or all three? Let me know in the comments!

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!