PDA

View Full Version : Slidemenu - fixed position possible?



Mirunestra
10-18-2008, 06:01 PM
Script I am using:
Slide-In Menu Bar I (http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm)

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
10-19-2008, 03:31 AM
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+fixed+position+hacks&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

zaphod42
10-19-2008, 03:53 AM
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:)