例一:
<ul id="nav" class="nav clearfix">
<div class="nLi-box">
<li class="nLi">
<h3><a href="/">首页</a></h3>
</li>
{dede:channelartlist typeid=top currentstyle='on'}
<li class="nLi {dede:field.currentstyle/}">
<h3><a href="{dede:field%20name='typeurl'/}">{dede:field name='typename'/}</a></h3>
<ul class="sub">
{dede:channel type=son}
<li><a href="[field:typeurl/]" >[field:typename/]</a></li>
{/dede:channel}
</ul>
</li>
{/dede:channelartlist}
</div>
</ul>
<script id="jsID" type="text/javascript">
jQuery("#nav").slide({
type:"menu",// 效果类型,针对菜单/导航而引入的参数(默认slide)
titCell:".nLi", //鼠标触发对象
targetCell:".sub", //titCell里面包含的要显示/消失的对象
effect:"slideDown", //targetCell下拉效果
delayTime:300 , //效果时间
triggerTime:0, //鼠标延迟触发时间(默认150)
returnDefault:true //鼠标移走后返回默认状态,例如默认频道是“预告片”,鼠标移走后会返回“预告片”(默认false)
});
</script>
例二:
<ul class="nav clearfix">
<li class="m">
<h3><a class="f-n" href="/">首页</a></h3>
</li>
{dede:channelartlist typeid=top currentstyle='on'}
<li class="m {dede:field.currentstyle/}"><!-- 当前频道添加on -->
<h3><a class="f-n" href="{dede:field%20name='typeurl'/}">{dede:field name='typename'/}</a></h3>
<ul class="sub">
{dede:channel type=son}
<li><a href="[field:typeurl/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</li>
{/dede:channelartlist}
</ul>
<script type="text/javascript">
(function(){
var ind = 2; //初始位置
var nav= jQuery(".nav");
var init = jQuery(".nav .m").eq(ind);
var block = jQuery(".nav .block"); //滑块
block.css({"left":init.position().left-3}); //初始化滑块位置
nav.hover(function(){},function(){ block.animate({"left":init.position().left-3},100); }); //移出导航滑块返回
jQuery(".nav").slide({
type:"menu", //效果类型
titCell:".m", // 鼠标触发对象
targetCell:".sub", // 效果对象,必须被titCell包含
delayTime:300, // 效果时间
triggerTime:0, //鼠标延迟触发时间
returnDefault:true,//on返回初始位置
defaultIndex:ind,//初始位置
startFun:function(i,c,s,tit){ //控制当前滑块位置
block.animate({"left":tit.eq(i).position().left-3},100);
}
});
})()
</script>
下载插件:SuperSlide
完美源码 » DEDE 同时调用一二级