Slidemenu - fixed position possible?

[Mirunestra]

Script I am using:
Slide-In Menu Bar I

Question:
Is it possible to have it set in the middle of a page and have it hidden behind a picture until you mouse over its edge to open it or do I need to look to flash?

Example: (This is shopped, but it illustrates what I want to do)
http://img88.imageshack.us/img88/9311/image1uo5.jpg
http://img55.imageshack.us/my.php?image=image2uo7.jpg

[Nile]

I don't know how to put it behind a picture. But your title is fixed position. So if you want fixed position, its not gonna work in IE, check out some of them hacks:
http://www.google.com/search?q=ie+fi...ient=firefox-a

[zaphod42]

this isn't compatible with netscape, I don't worry about that as much as I should but it should work in ie and firefox, it needs to be run AFTER the menu has been rendered:

function makeMenuWork(){
   var image=document.getElementById('leftSideImage')
   var slideMenu=document.getElementById('menuID')
   menuContainer.id='slideMenuContainer'
   menuContainer.style.position='absolute'
   menuContainer.style.width=slidemenu_width
   menuContainer.style.top=slidemenu_top
   menuContainer.style.overflow='hidden'
   image.parentNode.appendChild(menuContainer)
   menuContainer.appendChild(slideMenu)
   menuContainer.style.left=(image.offsetLeft+image.offsetWidth)+'px'
}

first we grab the elements that are relative to what we're doing:

var image=document.getElementById('leftSideImage')
var slideMenu=document.getElementById('menuID')

now we build an element to help us control the old menus position:

var menuContainer=document.createElement('div')
menuContainer.id='slideMenuContainer'
menuContainer.style.position='absolute'
menuContainer.style.left=(image.offsetLeft+image.offsetWidth)+'px'
menuContainer.style.width=slideMenu.offsetWidth+'px'
menuContainer.style.height=slideMenu.offsetHeight+'px'
menuContainer.style.top=slideMenu.offsetTop+'px'
menuContainer.style.overflow='hidden'

without any other styling you now have an invisible div that is the same size and position as your menu, using your current settings. The overflow is set to off so when you "close" the slider menu it will "dissappear" off the left side of the invisible element

now we deal with the nodes:

image.parentNode.appendChild(menuContainer)

we apply the new container to the same parent as the image(I like to do this because it helps me keep my node structure easy to understand. You may want to append it to the body like so:

document.body.appendChild(menuContainer)

but it's 6 of 1....
then we append your slideMenu to the new div , and position to the right side of your image to complete the function:

menuContainer.appendChild(slideMenu)
menuContainer.style.left=(image.offsetLeft+image.offsetWidth)+'px'

and that should do it, if you have any problems let me know