PDA

View Full Version : Help w/ Opencube-type menu



Spinethetic
07-25-2006, 07:04 PM
I am making my own website ( http://spinethetic.net.tc ) and I want to jazz my menu up a little with the type of 'follow-mouse' effect as used on the very top horizontal menu on http://www.opencube.com/ where the little green square graphic follows the mouse when it passes over the menu. Any help would be greatly appreciated :)

Best Regards
~Spine :)

Spinethetic
07-31-2006, 08:31 PM
So I'am assuming either its extremely hard or maybe somebody is thinking it is considered 'plagerizing' of sorts to implement the same type of menu. If it is the latter rest assured that I will customize it enough so that it will not be nearly the same.

Best Regards
~Spine :)

mburt
07-31-2006, 08:42 PM
<html>
<head>
<script language="javascript">
function moveMarker() {
marker.style.display='block'
marker.style.left = event.clientX - 2
}
</script>
<style type="text/css">
.header {
width:100px;
border:1px solid black;
border-top:none;
text-align:center;
font:12px arial
}
#marker {
width:10px;
font-size:3px;
border:1px solid black;
background:silver;
position:absolute;
top:15px;
display:none
}
#line {
width:500px;
font-size:3px;
border:1px solid black;
background:rgb(200,220,200)
}
</style>
</head>
<body>
<div id="marker"></div>
<div id="line"></div>
<span class="header" onmousemove="moveMarker()" onmouseout="marker.style.display='none'">
Header 1
</span>
<span class="header" onmousemove="moveMarker()" onmouseout="marker.style.display='none'">
Header 2
</span>
<span class="header" onmousemove="moveMarker()" onmouseout="marker.style.display='none'">
Header 3
</span>
</body>
</html>

mburt
07-31-2006, 11:55 PM
Sorry, but I'm not going to be able help you with the dropdown menu :D Hopefully that script (above) was what you were looking for