[jQuery] can't get superfish to work
I've tried and tried but I can't seem to get superfish animation to
work. I have a css menu that I call primenav. Here is the code for
it:
.primenav, .primenav * {
margin:0;
padding:0;
list-style:none;
}
.primenav {
line-height:1.0;
text-decoration:none;
position: absolute;
list-style-type: none;
right: 0px;
top: 139px;
padding: 0;
z-index: 3;
}
.primenav li.firstchild {
border-left: none;
}
.primenav ul {
position:absolute;
top:-999em;
width:10.45em;
}
.primenav ul li,
.primenav a {
width: 100%;
color:#FFF !Important;
text-decoration:none;
}
.primenav li {
float:left;
position:relative;
z-index:99;
display: inline;
background-image: none;
}
.primenav a {
display:block;
text-decoration:none;
color:#FFF;
}
.primenav li:hover ul,
ul.primenav li.sfHover ul {
left:-1px;
top:2.5em;
}
.primenav li:hover li ul,
.primenav li.sfHover li ul {
top:-999em;
}
.primenav li li:hover ul,
ul.primenav li li.sfHover ul {
left:11.95em;
top:-1px;
}
.superfish li:hover ul,
.superfish li li:hover ul {
top: -999em;
}
/*** ORIGINAL SKIN ***/
.primenav {
/* float:left;*/
margin-bottom:1.5em;
color:#FFFFFF;
}
.primenav li {
/*background:#BDD2FF;*/
border-left:1px solid #fff;
/* border-top:1px solid #CFDEFF;*/
/* width:10.45em;*/
color:#FFF;
text-decoration:none;
}
.primenav li ul li { width: 12em;}
.primenav a {
color: #FFFFFF;
padding: .75em .75em;
text-decoration:none;
/* text-indent: 1em;*/
}
.primenav li:hover, .primenav li.sfHover,
.primenav a:focus, .primenav a:hover, .primenav a:active {
background:#4955a5;
color:#FFF;
}
.primenav li li {
background:#4955a5;
}
.primenav li li li {
background:#4955a5;
}
I then call my scripts in my html document:
<script type="text/javascript" src="scripts/superfish.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".primenav")
.superfish({
animation : { opacity:"show",height:"show"}
})
.find(">li:has(ul)") /* .find(">li[ul]") in jQuery less than v1.2*/
.mouseover(function(){
$("ul", this).bgIframe({opacity:false});
})
.find("a")
.focus(function(){
$("ul", $(".primenav>li:has(ul)")).bgIframe({opacity:false});
/* $("ul", $(".nav>li[ul]")).bgIframe({opacity:false});
in jQuery less than v1.2*/
});
});
</script>
My menu in the html document is a standard type menu that is styled
using <ul class="primenav"> The dropdown works but I get no smooth
animation. Help?