Slide out panel


I would like to create a slide out panel on my website. But the AJAX/CSS/Javascript code examples available on google don't quite meet my requirement.

What I would like is a tab sticking out the left hand side of the panel in the middle of the screen. Clicking (or preferably hovering over) this tab, would reveal (by sliding out to the left) a small panel with a directory of categories on it.

It's similar to the one here except that I don't want it attached to the right-hand side of the screen.

The website this will be added to is at The tab should stick out to the left and extend leftwards when hovered over, to reveal the Directory.

Can anyone help?

Thanks in advance.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Look at the sliding menus on this page:

You should be able to customize them to your needs.
themitch2004Author Commented:
Hi Hielo,

Thanks for the suggestion. Close, but not quite there. These menus are attached to the edges of the browser, so the hidden menu (which is revealed when it slides) is hidden because it is outside the browser, I want it to be in the middle of the screen, but hidden.

I have a table in the middle, and from the left side of that I would like the panel to slide out to the left.

Another suggestion:

Specifically, look at the Fx.Slide Horizontal section

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
If you do a basic table layout of the page, to fix some column on the left, and right, with say the central column as the place where you want the popout menu to appear, then within that central part of the table, simply place a <SPAN> data for popout goes here </SPAN> tag to confine the position of the JS code to where you want it to be on the page -- that will do it.  THe span is like a DIV, except it defines a block within a row, not the full width of the page or a row.  Alternatively, you could set multiple SPANs to define the full width of that block on screen.

The other obvious way to do this is to use an <IFRAME> src=popup-menu.html; border=0, height=Y width = X> this will set the popup into an iframe </IFRAME>   Now in your html code, you simly need an ID tag, like a <Table id =  > or <TD id =  >  with a name, and use Javascript to manipulate that page fragment as hidden with visibility none, display none or turn it on.  

You will find that a borderless Iframe integrates seamlessly into the page, you generally don't even know it is there without snooping around.  In short, there are many ways to do it -- I don't think you will find any script that comes out of the central block on a page, at least all I have seen go to one edge or other of the page.
Forced accept.

EE Admin
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.