Visual Studio type fly out windows in HTML

I’ve been working on a project where I wanted to have a flyout window on the left just like how Visual Studio does their menus.

Maybe “slide out” is more accurate.

I used jQuery, which I am trying to use more in my projects, for the effects.

Anyway, I ended up making it a bit harder than it needed to be by having the tab itself slide out, as well as allow for multiple tabs.

At this point I’m happy enough to move on with a successful proof of concept, but I think if I were doing this from scratch again I wouldn’t bother having the tab slide out as well.  I’d just show the sliding out window.

But, this should be a good starting point.

visualstudioflyoutmenus.htm (17.7 KB)

Update: And of course it completely fails in FF.

I made some changes, removed some things, tweaked others… looks ok in FF now.

visualstudioflyoutmenus2.htm (17.7 KB)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s