I'm having a bit of a problem getting the digital traditional flash and contact info to show when i click on the animated slide menu.... i think its my style's and body and how im calling them from the java script, in the body tag... a little guidance would be nice :)
thanks
ardillo
/*
// start of div reaction//
<script type="text/javascript" >
jQuery(document).ready(function($){
$("#a1").addClass("active").css({left:"75px"});
$("#digital").hide();
$("#traditional").hide();
$("#flash").hide();
$("#contact").hide();
$("#workContainer").hide();
$("a[class!='link']").click(function(){
return false;
});
$("a:eq(0)").click(function(){
if($("#a1").hasClass("active")){
end();
}
$(".active").animate({left: "-675", opacity: "hide"}, 800,
function(){ $(this).removeClass("active");
$("#a1").animate({ left: '0', opacity: "show"}, 800).addClass("active");
});
});
$("a:eq(1)").click(function(){
if($("#digital").hasClass("active")){
end();
}
$(".active").animate({left: "-675px", opacity: "hide"}, 800,
function(){ $(this).removeClass("active");
$("#digital").animate({ left: '0', opacity: "show"}, 800).addClass("active");
$("#workContainer").animate({ left: '0', opacity: "show"}, 800);
});
});
$("#nav a[class!='work']").click(function(){
$("#workContainer").animate({ left: '175', opacity: "hide"}, 800);
});
$("a:eq(2)").click(function(){
if($("#traditional").hasClass("active")){
end();
}
$(".active").animate({left: "-675", opacity: "hide"}, 800,
function(){ $(this).removeClass("active");
$("#traditional").animate({ left: '0', opacity: "show"}, 800).addClass("active");
});
});
$("a:eq(3)").click(function(){
if($("#contact").hasClass("active")){
end();
}
$(".active").animate({left: "-675", opacity: "hide"}, 800,
function(){ $(this).removeClass("active");
$("#contact").animate({ left: '0', opacity: "show"}, 800).addClass("active");
});
});
//----------------------SCROLL TO------------------
$("#workContainer a:eq(0)").click(function(){ $('#item').scrollTo('li:eq(0)', 800); });
$("#workContainer a:eq(1)").click(function(){ $('#item').scrollTo('li:eq(1)', 800); });
$("#workContainer a:eq(2)").click(function(){ $('#item').scrollTo('li:eq(2)', 800); });
$("#workContainer a:eq(3)").click(function(){ $('#item').scrollTo('li:eq(3)', 800); });
$("#workContainer a:eq(4)").click(function(){ $('#item').scrollTo('li:eq(4)', 800); });
$("#workContainer a:eq(5)").click(function(){ $('#item').scrollTo('li:eq(5)',
//end//
//start of main menu slide open//
$(document).ready(function(){
lastBlock = $("#digital");
maxWidth = 210;
minWidth = 75;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
<style>
ul{
list-style: none;
padding: 0;
float:right;
}
ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
background:url(greymenubg.jpg) no-repeat;
}
ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
background:#FFFFFF;
}
#digital{
width: 70px;
background-color:#FFFFFF;
}
ul li img{
position: absolute;
border: none;
width:70px
}
ul li p{
width:70px;
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
background-color:#999999;
color:#FFFFFF;
}
.span {
color:#CCCCCC;
cursor:pointer;
}
div {
float:right;
background-image:url(greymenubg);
}
</style>
<body>
<div id="digital"</div>
<div id="traditional"</div>
<div id="flash" </div>
<div id="contact=" </div>
<ul id="a1" style="position:absolute;">
<li>
<a id="digital"><img src="d.png" width="30" height="47"/>
<p>
<strong>DIGITAL</strong><br/>
</p>
</a> </li>
<li>
<a id="traditional"><span><img src="t.png" width="30" height="47"/></span>
<p>
<strong>TRADITIONAL</strong><br/></p>
</a></li>
<li>
<a id="flash"><span><img src="fla.png" width="101" height="47"/></span>
<p>
<strong>FLASH 3.0/2.0</strong><br/>
</p>
</a></li>
</ul>
</body>
*/