Collapsible javascript side-menu
I was reading about CSS floating and margins today, and started playing. I came up with this, which would make a nice collapsible side-menu. I've seen it done as a full-blown mac style fisheye in similar style, didn't realise it was so easy to do though! All I did was give the image a negative margin-left value based on the mouse coordinates:
<BODY onmousemove="handleMove(event)" >
var xLimit = 80;
function handleMove(oEvent) {
var img1 = document.getElementById("img1″);
var x = oEvent.clientX;
if (x < xLimit) {
img1.style.marginLeft = -x;
} else {
img1.style.marginLeft = -xLimit;
}
}
- Comments Off