StackOverflow Question: Cufon and jScrollPane
for StackOverflow question: http://stackoverflow.com/questions/4909253/jscrollpane-and-cufon-togheter-someone-can-make-it-work/4909560#4909560
HTML
<link rel="stylesheet" href="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/css/jquery.jscrollpane.css">
<script src="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/js/jquery.jscrollpane.min.js"></script>
<script src="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/js/jquery.mousewheel.js"></script>
<script src="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/js/cufon-yui.js"></script>
<script src="http://www.timersys.com/demos/flatbrook/wp-content/themes/flatbrook/js/BlackBeard_500.font.js"></script>
<ul>
<li class="mainmenu">
<a href="#">link 1</a>
<ul class="subcontent">
<li>
<div class='bigdiv'>
content
</div>
</li>
</ul>
</li>
<li class="mainmenu">
<a href="#">link 2</a>
<ul class="subcontent">
<li>
<div class='bigdiv'>
content
</div>
</li>
</ul>
</li>
</ul>
CSS
.mainmenu { float: left;
height: 54px;
list-style: none outside none;
padding-right: 6px;
position: relative;
}
.mainmenu a {
border:1px solid red;
display: block;
height: 47px;
line-height: 44px;
padding: 0 23px 0 15px;
position: relative;
text-decoration: none;
top: 8px;
}
.subcontent{
left: -999em;
padding-top: 17px;
position: absolute;
top: 54px;
width: 150px;
z-index: 99;
background:red;
height:50px;
}
li.mainmenu:hover ul.subcontent{
left:5px;
}
li.mainmenu:hover a{
color:red;
}
JavaScript
Cufon.replace('ul > li', {
hover: true,
hoverables: { li: true },
ignore: { ul: true },
textless: { li: true }
});