• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4816
  • Last Modified:

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 http://www.andrewsellick.com/35/sexy-sliding-javascript-side-bar-menu-using-mootools 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 www.jwedding.co.uk/v2 The tab should stick out to the left and extend leftwards when hovered over, to reveal the Directory.

Can anyone help?

Thanks in advance.
1 Solution
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
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now