Sign in to follow this  
Alpha_ProgDes

[web] How do I make an Overlapping, Collapsible Panel

Recommended Posts

I would like to make a collapsible panel that expands from the right side of the page, but goes over the page. I would like to make the background of the panel somewhat transparent so you can see the page behind it. Anybody know how to do this in ASP.NET, ASP.NET AJAX (or Control Toolkit), or just plain ol' JS & CSS? (I believe those are my main options).

Share this post


Link to post
Share on other sites
Your panel will consist of a single div. Set the background of the div to a partially transparent image. Put the div at the right side of the screen so the whole thing is showing. Put all your menu stuff in the innerHTML of the div. Have a function that collapses the div, and a function that expands the div. When it is collapsing, use a timer to slowly decrease the width of the div while simultaneously moving it the same amount to the right. When expanding the panel, the process is reversed. Increase the width until it is full-size, and move it to the left accordingly. Make sure the div is set to absolute position. This might not work too well if you have a bunch of html stuff inside your panel, because rather than hide it, it will probably try to resize it, which would look kind of weird. It should work for images and stuff, though. It might work with HTML stuff if you put another div inside the innerHTML of the first div with a constant width then put all the stuff in the innerHTML of THAT. Not sure though, I'd have to try it out....

Alternatively if you don't mind not being able to scroll the page, you can "hide" the contents of the panel by the right side of the screen. Just move it to the right when you want to hide it, and move it back when you want it visible. This is the simplest way to do it that I can think of offhand, but not being able to scroll is kind of a bummer.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this