asked on

Slide out panel

Hi

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.

hielo

Look at the sliding menus on this page:
http://dynamicdrive.com/dynamicindex1/index.html

You should be able to customize them to your needs.

themitch2004

ASKER

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.

Thanks

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

scrathcyboy

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.

Computer101

Forced accept.

Computer101
EE Admin