All,
I am trying to implement the superfish(http://users.tpg.com.au/j_birch/plugins/superfish/) navigation drop down menu with the hover intent js. I have the html/css properly coded and placed. The superfish js is implemented along with the hoverIntent js file. My problem is that when I have the following code in the file the code works but with the error: ReferenceError: makeTall is not defined, which makes sense because the functions for makeTall and makeShort are not defined.
$(document).ready(function() {
$('ul#nav').superfish({
delay: 500, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'slow', // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
$("this").hoverIntent(makeTall,makeShort);
});
This code allows the drop down and hover effect work as intended except for IE which stops loading JS at the missing functions for makeTall and makeShort. If I use the following code, it corrects the js error but the drop downs do not work.
$(document).ready(function() {
$('ul#nav').superfish({
delay: 500, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'slow', // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
function makeTall(){ $(this).animate();}
function makeShort(){ $(this).animate({);}
$("this").hoverIntent(makeTall,makeShort);
});
I need some assistance with implementing the functions correctly with hoverIntent. Below is the base HTML of the navigation.
<ul id="nav">
<li class="current"> <a href="#a">Home</a> </li>
<li> <a href="#">Products</a>
<ul class="products rounded5">
<li class="current"><span>Products</span></li>
<li class="current"> <a href="#">Service 1</a>
<ul class="second roundedR">
<li class="current"><div> This is a menu item rollout</div></li>
</ul>
</li>
<li> <a href="#">Service 2</a>
<ul class="third roundedR">
<li><a href="#">2 item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Third item</a>
<ul class="idTheft rounded5">
<li class="current"><span>title</span></li>
<li> <a href="#">subtitle</a>
<ul class="second roundedR">
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
<li> <a href="#">first item</a>
<ul class="third roundedR">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li> <a href="#">second item</a>
<ul class="fourth roundedR">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li> <a href="#"> third item</a>
<ul class="fifth roundedR">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">FAQ</a>
<ul class="last rounded5">
<li class="current"><span>FAQ</span></li>
<li> <a href="#">Reports</a>
<ul class="second roundedR">
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
<li> <a href="#">Credit Scores</a>
<ul class="third roundedR">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li> <a href="#">General Questions</a>
<ul class="fourth roundedR">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Any help is appreciated.
Thanks
Alan
