08-20-2013, 10:35 AM
OK now, I was messin' round with javascript, HTML and CSS and I created a fancy menu that appears if you mouse-over some text, and dissapears if you leave the div with your mouse, now there is one problem: If you hover over a link it also dissapears.
HTML and a part of the java-script (forum bug: cannot write it without the dash here.):
The CSS (I doubt if you need it, but I'll post is anyway):
This is the code for fading in and out, I did not write it though:
If anybody can help me, please do
.
HTML and a part of the java-script (forum bug: cannot write it without the dash here.):
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="javascript\fadeEffects.js"></script>
<script>
function fadeInMenu() {
fadeIn('menu')
document.getElementById('menu').style.visibility='visible';
}
function fadeOutMenu() {
if(document.getElementById('menu').style.opacity == 1)
{
fadeOut('menu')
}
}
</script>
</head>
<body>
<div id="container">
<div id="menu" onmouseout="fadeOutMenu()"> Menu </br></br> <a href="http://google.nl/">Google</a></div>
<div id="header"> <h1>THIS IS THE HEADER</h1> </div>
<div id="content"> <a onmouseOver="fadeInMenu()">Menu</a> </div>
</div>
</body>
</html>The CSS (I doubt if you need it, but I'll post is anyway):
Code:
#header
{
width:990px;
height:200px;
background:linear-gradient(45deg, rgb(0, 255, 255), rgb(0, 0, 255));
color:rgb(175,255,255);
padding-left:10px;
}
#content
{
margin-top:50px;
width:960px;
height:500px;
background-color:lightblue;
padding:20px;
}
#menu
{
width:100px;
height:539px;
position:absolute;
border:1px solid rgb(100,255,255);
background:linear-gradient(-135deg, lightblue, blue);
margin-top:250px;
visibility:hidden;
float:left;
text-align:center;
}
#container
{
margin-left:auto;
margin-right:auto;
width:1050px;
}
a
{
color:red;
}
h1
{
font-size:90px;
padding-top:50px;
}This is the code for fading in and out, I did not write it though:
Code:
// fadeEffects.js written By AdamKhoury.com
/*
USAGE IS SIMPLE: fadeIn(elementID); fadeOut(elementID);
*/
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display = "block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
// opacity ranges from 0 to 1
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',50);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',50);
}If anybody can help me, please do
.