Phpcms2008 演示Phpcms2008 帮助教程Phpcms2008 特色介绍
phpcms 2008 采集教程PC_webserver下载(快速搭建php环境)Phpcms 2008 SP4下载

[2008] 非常漂亮的一款滑动门导航

本帖最后由 化蝶自在飞 于 2009-9-20 23:09 编辑

非常漂亮的一款滑动门导航,一级栏目二级栏目都是随后台变化,不会修改模板的。

前面有人出现了图片分页导致不出来效果的原因,我在这里修正了,请注意用最新的代码,以前测试不全,不好意思,请大家发现什么问题就直接在后面跟帖,这段时间没啥闲的,所以,呵呵……请用过的朋友注意更新!

还有发现说IE8下不正常的,目前我还没跑这么快,没用到IE8上去,用到的朋友在<title></title>下面加上

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

这句就正常了



先看效果图吧:
效果一:
进入网站的时候效果

效果二:
鼠标放到二级栏目的效果

效果三:
进入栏目下的效果


值得说一下的就是首页下面的显示的,是在模板里面直接添加的,首页下没有栏目,这里为了方便,你可以用碎片的形式来添加内容!同样也可以直接添加到模板里面,要不要随你了!


模板代码:
那我就把完整的不显示问吧栏目的代码重新放上来一遍,请注意用代码,别用重了!
  1. <!--导航条-->
  2. <DIV id=w3zz_menu_out>
  3. <DIV id=w3zz_menu_in>
  4. <DIV id=w3zz_menu>
  5. <UL id="nav">
  6.   <LI><A id="menu_0" onmouseover="show_menu(0);"
  7.   href="{SITE_URL}"><SPAN>首 页</SPAN></A> </LI>
  8.   <LI class=w3zz_menu_line></LI>
  9. <?php $CATE = cache_read('category.php');?>
  10. <!--{loop $CATE $i $cat}-->
  11. {if !$cat['arrparentid']}
  12. {if $cat[module]!=ask}
  13. {if $cat['ismenu']}<li>
  14. <A class="nav_off" id="menu_{$i}" onmouseover="show_menu({$i});"  href="{$cat[url]}" target="_blank"><span>{$cat[catname]}</span></A>
  15. </li>
  16. <LI class=w3zz_menu_line></LI>
  17. {/if}
  18. {/if}
  19. {/if}
  20. <!--{/loop}-->
  21. </UL>
  22. <!--子栏目-->
  23. <DIV id=w3zz_menu_con>
  24. <DIV id="menu_cont_0" style="display:none;">
  25. <UL>
  26.   <LI><a href="http://w3zz.com"><span>W3站长</span></a></LI>
  27.   <LI class=w3zz_menu_line2></LI>
  28. <LI><a href="http://www.99xq.cn"><span>久久乡情</span></a></LI>
  29.   <LI class=w3zz_menu_line2></LI>
  30.   <LI><a href=http://www.99173.cn><span>99173最新电影</span></a></LI>
  31.   <LI class=w3zz_menu_line2></LI>

  32.   </UL>
  33.   </DIV>

  34. <!--{loop $CATE $i $cat}-->
  35. {if !$cat['arrparentid']}
  36. <DIV id="menu_cont_{$i}" style="display:none;">
  37. <UL>
  38. {get sql="select catname,url from phpcms_category where parentid='$i'" return="v"}
  39. <li><a href="{$v[url]}"><span>{$v[catname]}</span></a></li>
  40. <LI class=w3zz_menu_line2></LI>
  41. {/get}
  42. </UL>
  43. </DIV>
  44. {/if}
  45. <!--{/loop}-->  
  46.   </DIV></DIV></DIV></DIV>
  47. <!--导航条-->
  48. <script type="text/javascript">
  49. var tID={if $CATE[$catid][parentid]}{$CATE[$catid][parentid]}{elseif $catid}{$catid}{else}0{/if};
  50. function show_menu(ID){
  51.   if(ID!=tID){
  52.     $('#menu_'+ID).attr('class','nav_on');
  53.     $('#menu_'+tID).attr('class','nav_off');
  54. $('#menu_cont_'+tID).hide();
  55. $('#menu_cont_'+ID).show();
  56.     tID=ID;
  57.   }else{
  58.     $('#menu_'+ID).attr('class','nav_on');
  59.     $('#menu_cont_'+tID).show();
  60.   }
  61. }
  62. show_menu({if $CATE[$catid][parentid]}{$CATE[$catid][parentid]}{elseif $catid}{$catid}{else}0{/if});
  63. </script>
复制代码
有人出现了这种问题

还专门开帖说明,谢谢,关于这个问题,我在本帖的#97已经为#96的朋友解决过了
解决方法我拿到这个上面来:
这个是在栏目页下面的一个标签调用子栏目的

找到category.html非终极栏目的列表模板,list.html终极列表的模板
里面有

<div id="submenu">{tag_栏目页子菜单}</div>

这句话去掉就没有了
这是官方默认的调用子栏目的
我们有了二级栏目,这个标签就没有必要了!
上面的代码放到header.html(你网站需要效果的头部模板)里面即可,如果没有RPWT的话,放上即可看到效果。
CSS文件及图片在附件里面,下载上传到你的模板目录中的skins/default下面,以menu为名。
把menu放到skins/default下面之后在header.html的
<link href="{SKIN_PATH}{$mod}.css" rel="stylesheet" type="text/css" />
后面加上
<link href="{SKIN_PATH}menu/css.css" rel="stylesheet" type="text/css" />
这样就可以了

[hide][/hide]
注意红色部分,不要出现CSS运用不上的问题!
目前没有演示,等我站上有了再放,何况这样也不需要什么演示,放到本地就可以看到效果!

看了这多人看我的帖子,心里蛮高兴的,也看到有人问,可不可以换图片,颜色,这些应该不属于我的范围,这些都是图片控制的,你如果CSS精明,你完全可以换自己的想法换,我这里说明一下我发这个帖子的主要目的,主要目的是让大家学会这种调用栏目的方式及方法,而不是这个就定死了!我希望用的朋友也多个心眼,这只是个方法,具体能延深的还有挺多的!希望这个帖子能帮助到大家!更希望能有更多的朋友能在我的这个基础上做出更好的东东哟!再次谢谢这多朋友的支持!

刚看到有朋友提出了用了这个导航之后,相关文章不出来了的问题,我已经修改了代码,请用此导航的朋友注意更换最新的代码!
影响的原因为是读取缓存这一步和我的GET标签没有返回不同的数据,导致相关文章这里的自定义SQL中的$r受到影响,现在我定义了返回V,这样就不会有影响了,请测试看结果,我已经测试完全没问题了才发上来的!


[ 本帖最后由 xiuling 于 2009-6-1 16:52 编辑 ]
附件: 您需要登录才可以下载或查看附件。没有帐号?点击这里注册
6

评分人数

我来看看!!

TOP

   沙发我自己还没做到呀……

TOP

支持一下了
出售极品域名KE2.CN (可爱) CKD.LA(查快递啦,带整站程序);要的 报价

TOP

支持一下下。。。

TOP

支持一下下。。。

TOP

确实不错!

TOP

支持,看看效果先

TOP

我来看看效果先!!

TOP

支持一下了
www.sjpal.com 手机之友 手机资源下载

TOP

不错,支持了

TOP

看看 支持下楼主
2008模板仿制,卖门户站模板!QQ:78426582 演示www.jcxx88.cn

TOP

这种风格目前很受欢迎。感谢楼主的大力分享,谢谢。

TOP

不知道效果是不是很好啊?有没有演示啊啊?

TOP

顶~~~~~~~~~~~~~~

TOP

站长推荐 关闭


PHPCMS 2010年模版大赛正式启动

2010年phpcms模板大赛已于即日正式拉开帷幕,phpcms官方诚挚欢迎各位模板制作高手、视觉艺术大师们踊跃参与本次活动。您的作品将呈现在phpcms超过12万的用户面前 ...


查看