Jump to content
  • Advertisement
Sign in to follow this  
Alpha_ProgDes

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

This topic is 3099 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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
Advertisement
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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!