That was quite simple
(this is the static version, else u need to change the jQuery.noConflict() part of the script..)
First:
unpack and upload zipfile which is attached.
Put a chunks into your <head>[[$nav-script]]</head> and into <body>[[$nav]]</body>
Make some chunks
1)[[$nav-script]]
<link rel="stylesheet" media="screen" href="/assets/menu/css/superfish-vertical.css" />
<script type="text/javascript" src="/assets/menu/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/assets/menu/js/hoverIntent.js"></script>
<script type="text/javascript" src="/assets/menu/js/superfish.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function(){
jq("ul.sff-menu").superfish({
delay: 200 // 0.2 second delay on mouseout
});
});
</script>
2) Create a navigation chunk [[$nav]] with Wayfinder call and put somewhere in your <body>:
[[!Wayfinder? &startId=`0` &innerTpl=`navInner` &outerTpl=`navOuter` &level=`3`]]
3) Create the navInner chunk [[$navInner]]:
<ul>
[[+wf.wrapper]]
</ul>
4) Create the navOuter chunk [[$navOuter]]:
<div id="floatMenu">
<ul class="sff-menu float">
[[+wf.wrapper]]
</ul>
</div>
Then it should work and you only need to modify some css.
Good luck.
#edit#
if u don’t like the title when rollover add chunk [[$navOuterRow]] with this code:
<li class="[[+wf.classnames]]"><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
Add into your wayfinder call: &rowTpl=`navOuterRow`
(other version with dropdown and not sidewards i used for some site: only change the css)
#floatMenu {width: 200px; margin-top:20px;}
.sff-menu {margin: 0; padding: 0; list-style: none; float: left; width: 200px;}
.sff-menu ul {width: 200px;}
.sff-menu li {float: left; position: relative; width: 200px;}
.sff-menu li:hover {visibility: inherit; /* fixes IE7 'sticky bug' */}
.sff-menu li a {display: block; position: relative; height: 28px; line-height: 28px; outline: 0; color:#000;}
.sff-menu li a:hover{color:#BF0000;}
.sff-menu li li a{padding-left:0px; font-size:14px!important; height: 20px; line-height: 20px; color:#000;}
.sff-menu li li a:hover{color:#BF0000;}
.sff-menu li li.last a{margin-bottom:5px;}
.sff-menu li.active li a{color:#000000!important;}
.sff-menu li.active li a:hover{color:#BF0000!important;}
.sff-menu li.active li.active a:hover{color:#BF0000!important;}
.sff-menu li.active a{color:#BF0000!important;}
.sff-menu li.active li.active a{color:#BF0000!important;}
☆ A M B ☆
