After spending countless hours analyzing and trying various solutions, I have come to the realization that I need to seek help with my code. The task at hand is proving to be incredibly frustrating, and I have exhausted all other options before resorting to asking for assistance here.
My objective is to create a header with a sliding bar effect above each menu item on hover. A perfect example of what I am aiming for can be seen on . If you visit the site and move your mouse over the navigation bar, you will immediately understand the desired outcome.
Below is the snippet of my current code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
display: inline-block;
float:left;
}
#red {
background-color:#FF0000;
height:100px;
width:100px;
}
#blue {
background-color:#0000FF;
height:100px;
width:200px;
}
#yellow {
background-color:#E2BE22;
height:100px;
width:50px;
}
#green {
background-color:#008800;
height:100px;
width:170px;
}
#slider{
background-color:#6FF;
height:10px;
width:100px;
position:relative;
}
</style>
</head>
<body>
<div id="slider"></div><br />
<div id="red"></div>
<div id="blue" onmouseover="javascript:movetoblue()" onmouseout="javascript:exitblue()"></div>
<div id="yellow" onmouseover="javascript:movetoyellow()" onmouseout="javascript:exityellow()"></div>
<div id="green" onmouseover="javascript:movetogreen()" onmouseout="javascript:exitgreen()"></div>
</body>
</html>
<script>
var slider = document.getElementById( 'slider' );
function movetoblue(){
var slider = $("#slider");
slider.animate({left: '100px', width: '160px'}, "slow");
}
function exitblue(){
var slider = $("#slider");
slider.animate({left: '7px', width: '200px'}, "slow");
}
function movetoyellow(){
var slider = $("#slider");
slider.animate({left: '100px', width: '160px'}, "slow");
}
function exityellow(){
var slider = $("#slider");
slider.animate({left: '7px', width: '200px'}, "slow");
}
function movetogreen(){
var slider = $("#slider");
slider.animate({left: '100px', width: '160px'}, "slow");
}
function exitgreen(){
var slider = $("#slider");
slider.animate({left: '7px', width: '200px'}, "slow");
}
</script>
I acknowledge that there might be errors in the code provided. Any assistance or guidance on improving it would be greatly appreciated. Thank you :)
PS: While I aim for this functionality to work smoothly across Chrome, IE, Safari, and Firefox, my primary concern is ensuring compatibility with Chrome, IE, and Safari. Once again, thank you for any help!