i have a problem:
this is my menu: Gallery | About | Contact
Gallery have 2 subpages, Portraits and Various
i want a dropdown menu on the "Gallery" menu that lists the 2 sub pages with a jQuery.. but it doesn’t work..
i’ve read and used the wayfinder accordion menu example.. i’m using Revolution
wfStyle chunk:
<style type="text/css">
ul.nav {
margin: 5px 8px 0 0;
padding: 0;
list-style: none;
}
ul.nav a.menuitem {
display: block;
font-family: arial;
color: #b4b4b4;
text-decoration: none;
text-transform: uppercase;
}
ul.nav li {
margin: 0;
padding: 0 2em;
float: left;
position: relative;
display: block;
z-index:500;
border-left: 1px solid #3c3c3c;
}
ul.nav li:first-child {
border-left: none;
}
ul.nav li a:hover {
color: #dddddd;
}
ul.nav ul.submenu {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
ul.nav ul.submenu li {
width:100px;
float:left;
border-top:1px solid #fff;
}
ul.nav ul.submenu a {
display:block;
height:15px;
padding: 8px 5px;
color:#666;
}
ul.nav ul.submenu a:hover {
text-decoration:underline;
}
.activemenu{
display: block;
font-family: arial;
color: #b4b4b4;
text-decoration: none;
text-transform: uppercase;
}
ul.nav ul.submenu li a.activemenu{
background:#8d8793;
color:#FFFFFF;
font:11px "Verdana";
display:block;
width:auto;
padding:3px 0 3px 5px;
border-top:2px solid #FFFFFF;
text-indent:5px;
}
#active-submenuheader{
background:#665f6e;
color:#FFFFFF;
font:bold 11px "Verdana";
display:block;
width:auto;
padding:3px 0 3px 5px;
border-top:2px solid #FFFFFF;
}
</style>
wfJs chunk:
<script type="text/javascript">
$(window).load(function() {
$('ul.nav').hover(
function () {
//show its submenu
$('ul.submenu', this).slideDown(100);
},
function () {
//hide its submenu
$('ul.submenu', this).slideUp(100);
}
);
});
</script>
wfOuter:
<ul class="nav">[[+wf.wrapper]]</ul>
wfRow:
<li><a class="menuitem" href="[[+wf.link]]">[[+wf.linktext]]</a></li>
wfInner:
<ul class="submenu">[+wf.wrapper+]</ul>
wfInnerRow:
<li><a href="[[+wf.link]]">[[+wf.linktext]]</a></li>
wfParentRow:
<li><a class="menuitem submenuheader" href="[[+wf.link]]">[[+wf.linktext]]+</a>[[+wf.wrapper]]</li>
wfActiveParentRow:
<li><a class="menuitem submenuheader" id="active-submenuheader" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]</li>
wfHere:
<li><a class="activemenu" href="[[+wf.link]]">[[+wf.linktext]]</a></li>[[+wf.wrapper]]
Snippet call:
[[!Wayfinder? &startId=`0` &level=`2` &outerTpl=`wfOuter` &parentRowTpl=`wfParentRow` &activeParentRowTpl=`wfActiveParentRow` &innerTpl=`wfInner` &rowTpl=`wfRow` &innerRowTpl=`wfInnerRow` &cssTpl=`wfStyle` &jsTpl=`wfJs` &hereTpl=`wfHere`]]
Where is the problem?
and i didn’t understand if i need to use all these chunk... can’t i use only outer and inner, without using parent?
