The Jquery:
$(document).ready(function(){
$("#interests").mouseEnter(function(){
$("#contint").show();
});
$("#interests").click(function(){
$("#contintf").show(500);
});
$("#interests").mouseLeave(function(){
$("#contintf").hide(500);
});
The HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="tabstyleie7plus.css" />
<![endif]-->
<link type="text/css" rel="stylesheet" href="tabstyle0921.css" />
<body>
<div>
<img class="source-image" src="brushed-metal.jpg"width="100%" height="100%" alt="" />
<div id="test">
<p align="center">Webpage 2!</p>
<br>
<br />
</div>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="mouseman.js"></script>
<title>BriTech</title>
</head>
<h4>To Browse Site <small>Select a Tab</small></h4>
<div id="navbar">
<div id="holder">
<ul>
<li><a href="indextab0921.html" id="onlink">Home</a></li>
<!-- reload this page -->
<li><a href="#interests" id="interests">Interests</a></li>
<li><a href="#resume" id="rezume"">Resume</a></li>
<li><a href="#links" id="links">Links</a></li>
</ul>
</div> <!-- end holder div -->
</div> <!-- end navbar div -->
<div id="contint">
<p>This is stuff under Interests</p>
</div>
<div id="contres">
<p>This is the content to appear under Resume</p>
</div>
<div id="contlink">
<p>more junk under lists</p>
</div>
<div id="contintf">
<p>the full interests stuff under Interests</p>
</div>
</ul>
</div>
</body>
The CSS:
#img.source-image {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index:1;
}
#test {
position: absolute;
color: #99cc00;
font-family: arial;
font-size: 400%;
font-weight: bolder;
text-align:center;
height: 10%;
width: 100%;
left: 25px;
top: 20px;
zindex:70;
}
#navbar {
position: absolute;
overflow:hidden;
top:30%;
left: 25%;
right: 5%;
width:90%;
height:64px;
}
#navbar #holder {
float: left;
height:64px;
width:90%;
top:30%;
border-bottom:3px solid #808080;
padding-left:15%;
}
#navbar #holder ul {
list-style:none;
margin:0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float: left;
margin-right:5px;
line-height:23px;
font-family:"Arial Black", Gadget, sans-serif;
font-weight:bold;
color:#000;
border:1px solid #000;
border-bottom:none;
padding:20px;
width:19%;
text-align:center;
display:block;
background:#b6afa9;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
zindex:15;
}
#navbar #holder ul li a:hover {
background:#F90;
color:#99cc00;
text-shadow:1px 1px 1px #000;
}
/*#navbar #holder ul li ul:hover li{
visibility:visible;
}
#holder ul li a#onlink {
background:#b6afa9;
color:#fff;
border-bottom:3px solid #808080;
} */
#holder ul li a#onlink:hover {
background:#b6afa9;
color:#69F;
text-shadow:1px 1px 1px #000;
overflow:hidden;
}
#holder ul li a#onlink:active {
background:#99cc00;
color:#ff0000;
text-shadow:1px 1px 1px #000;
}
#holder ul li a#onlink:visited {
background:#99cc00;
color:#ccccff;
text-shadow:1px 1px 1px #000;
}
h4 {
clear:both;
position:absolute;
float:left;
top:20%;
left:10%;
font-family:"Arial Black", Gadget, sans-serif;
font-size:150%;
}
#contint {
clear:both;
position:absolute;
Float:left;
top:50%;
left:10%;
Width:90%;
height:50px;
display:none;
zindex:65;
}
#contres {
clear:both;
position:absolute;
Float:left;
top:50%;
left:10%;
Width:90%;
height:50px;
display:none;
}
#contlink {
clear:both;
position:absolute;
Float:left;
top:50%;
left:10%;
Width:90%;
height:50px;
display:none;
}
#contintf {
clear:both;
position:absolute;
Float:left;
top:50%;
left:10%;
Width:90%;
height:50px;
display:none;
}
/* #contres p {
clear:both;
position:absolute;
Float:left;
top:50%;
left:60%;
Width:90%;
height:50px;
display:none;
}
*/