...

View Full Version : Sidepage menu popout?



codelook
06-15-2011, 06:39 PM
I have just finished making the main part of my website but I have been looking around trying to add this thing they have on the side of there page that pops out when ever I hover over it: http://www.golfwrx.com/forums/ . I want something like this but i only want it to stay in one place on my page and I want to click it to make it pop out. Also i wasn't going to turn it into something that shows links, just a facebook like button. Any help?

AndrewGSW
06-15-2011, 10:57 PM
You can borrow my example :D

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Andy's Side Panel</title>
<style type="text/css">
#sidePanel {
position: fixed;
width: 100px;
height: 97px;
margin-left: 33px;
top: 200px;
background: lightgrey;
right: -100px;
z-index: 5; /* just in case.. */
}
#sidePanel img {
cursor: pointer;
position: absolute;
left: -33px;
}
#sidePanel a {
display: block;
width: 100px;
height: 20px;
text-decoration: none;
padding: 2px;
}
</style>
<script type="text/javascript">
/* cSlidePanel parameters:
conID : the id for the container element that is to be moved (must be a positioned element)
clickID: the id for the clickable element that causes the move
distance : the distance to be moved or, if omitted, the width of the element
duration : an (optional) duration in milliseconds. 1000 would mean the whole process would
take 1 second to complete. If omitted, defaults to 30ms intervals (of 2 pixel movements).
*/
function cSlidePanel(conID, clickID, distance, duration) {
this.theContainer = document.getElementById(conID);
this.rgt = parseInt(this.GetStyle(conID,"right"));
this.distance = distance || parseInt(this.GetStyle(conID,"width"));
this.gap = ( duration ) ? ( duration / this.distance ) : 30; // defaults to 30ms intervals
this.out = false; // used as a toggle
var that = this; // preserve scope
this.AddEvent(document.getElementById(clickID),'click',function(e) {
return that.ToggleMove();
});
}
cSlidePanel.prototype = {
GetStyle : function (el, strRule) { // e.g. "font-size" - robertnyman.com
var elem = (typeof el === 'string') ? document.getElementById(el) : el;
if (document.defaultView && document.defaultView.getComputedStyle ) {
return document.defaultView.getComputedStyle(elem, '').getPropertyValue(strRule);
}
else if ( elem.currentStyle ) {
strRule = strRule.replace(/\-(\w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
return elem.currentStyle[strRule];
}
else
return '';
},
AddEvent : function (elem, eventType, func) {
if ( elem.addEventListener )
AddEvent = function (elem, eventType, func) {
elem.addEventListener(eventType, func, false);
};
else if ( elem.attachEvent )
AddEvent = function (elem, eventType, func) {
elem.attachEvent('on' + eventType, func);
};
AddEvent(elem, eventType, func);
},
MoveIt : function(toLeft) {
if ( toLeft && this.rgt <= -2 ) {
this.rgt += 2;
}
else if ( !toLeft && this.rgt >= -this.distance + 2 ) {
this.rgt -= 2;
}
else {
return false;
}
this.theContainer.style.right = this.rgt + 'px';
var that = this;
this.theTimer = setTimeout(function() { that.MoveIt(toLeft); },that.gap);
},
ToggleMove : function () {
clearTimeout(this.theTimer);
this.out = !this.out;
this.MoveIt(this.out);
}
};
function InitPanel() {
//oPanel = new cSlidePanel('sidePanel','sideImage',100,2000); // 100px width of element
oPanel = new cSlidePanel('sidePanel','sideImage',null,1000); // width will be determined
}
window.onload = InitPanel;
</script>
</head>
<body>
<h1>Andy's Side Panel</h1>
<div id="sidePanel">
<img src="images/sidebar.png" id="sideImage">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#further">Further Info</a>
<a href="#contact">Contact Us</a>
</div>
</body>
</html>
The image I use it attached.

Basically, you need a positioned div with an id - I've fixed it to the right-hand side. This div contains an image with an id that you can then click on.

To modify it you would need your own image (or you could use another div if you can persuade the text to run vertically ;) ) and then amend the css measurements so that it all fits neatly. Andy.

codelook
06-17-2011, 12:23 AM
thank you i will try this when i get the chance



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum