实现帝国CMS二级栏目导航显示【标签调用+JQUERY】

唉！又要重新写，手欠刷新了下， 刚写的全没了。。。

看到帝国论坛官网好多童鞋提问，至于解决办法上边就是 用灵动标签或改帝国方法标签或自己写方法标签，都能实现，我来说下我的实现方式：标签+JQ。

主要是思路清楚了就好做了，先来看帝国导航标签：带模板的栏目导航标签 (showclasstemp)，循环栏目导航标签 (listshowclass)。

这两个有什么不一样自己看下标签说明。 要想实现二级导航，就要用到listshowclass，标签选好了，就是写标签了，要怎么写？

看下图 ↓↓

思路就是 showclasstemp 标签内活动元素的id 是这个子类的 class 名值一样， 这样方便JQ调用。

在 class="znav_[!--bclassid--]" 处， class要跟 主导航设定 的id 相同 。下来就要写 JQ了。。

直接展示写好的吧，也不说我思路了。 JQ有鼠标移上，离开几个状态，还有 hover 等，我使用的 hover 。

/*** mousemove和mouseout ***/

$("#ones li").mousemove(function(){
  var dd= ("."+$(this).attr('id')+"");
  var offset= $(this).offset();
  $(dd).show("slow").css({top: offset.top+25, left: offset.left-30});
  //$(this).append(dd);
 });
 
 $("#ones li").mouseout(function(){
  var dd= ("."+$(this).attr('id')+"");
   $(dd).hide();
 });

/* hover 方式 */

var ones = $("#ones li");
 ones.hover(function(){
  var dd= ("."+$(this).attr('id')+"");
  var offset= $(this).offset();
  $(dd).show().css({top: offset.top+25, left: offset.left-30}).mouseover(
   function(){
    $(this).show();
   })
  },
  function(){
   var dd= ("."+$(this).attr('id')+"");
   $(dd).hide();
   }
  )

其他的想要展示动态的自己调整代码。

效果站点：http://www.hsklys.com/ ，使用火狐或Opera看效果更好，此网站使用的部分插件都是最新版，支持IE8以下不是很好。

继续工作。。。