查看: 83310|回复: 975

非常漂亮的一款滑动门导航 [复制链接]

xiuling

中级用户

Rank: 3 Rank: 3

PC币: 39 枚
注册时间: 2007-12-14
积分: 1031
精华: 1
帖子: 1194

电梯直达

楼主

发表于 2009-4-21 21:54:42 |只看该作者 |倒序浏览

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

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

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

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

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

这句就正常了

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

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

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

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

模板代码：
那我就把完整的不显示问吧栏目的代码重新放上来一遍，请注意用代码，别用重了！

<DIV id=w3zz_menu_out>
<DIV id=w3zz_menu_in>
<DIV id=w3zz_menu>
<UL id="nav">
<LI><A id="menu_0" onmouseover="show_menu(0);"
href="{SITE_URL}"><SPAN>首页</SPAN></A> </LI>
<LI class=w3zz_menu_line></LI>
<?php $CATE = cache_read('category.php');?>
{if !$cat['arrparentid']}
{if $cat[module]!=ask}
{if $cat['ismenu']}<li>
<A class="nav_off" id="menu_{$i}" onmouseover="show_menu({$i});" href="{$cat[url]}" target="_blank"><span>{$cat[catname]}</span></A>
</li>
<LI class=w3zz_menu_line></LI>
{/if}
{/if}
{/if}
</UL>
<DIV id=w3zz_menu_con>
<DIV id="menu_cont_0" style="display:none;">
<UL>
<LI><a href="http://w3zz.com"><span>W3站长</span></a></LI>
<LI class=w3zz_menu_line2></LI>
<LI><a href="http://www.99xq.cn"><span>久久乡情</span></a></LI>
<LI class=w3zz_menu_line2></LI>
<LI><a href=http://www.99173.cn><span>99173最新电影</span></a></LI>
<LI class=w3zz_menu_line2></LI>
</UL>
</DIV>
{if !$cat['arrparentid']}
<DIV id="menu_cont_{$i}" style="display:none;">
<UL>
{get sql="select catname,url from phpcms_category where parentid='$i'" return="v"}
<li><a href="{$v[url]}"><span>{$v[catname]}</span></a></li>
<LI class=w3zz_menu_line2></LI>
{/get}
</UL>
</DIV>
{/if}
</DIV></DIV></DIV></DIV>
<script type="text/javascript">
var tID={if $CATE[$catid][parentid]}{$CATE[$catid][parentid]}{elseif $catid}{$catid}{else}0{/if};
function show_menu(ID){
if(ID!=tID){
$('#menu_'+ID).attr('class','nav_on');
$('#menu_'+tID).attr('class','nav_off');
$('#menu_cont_'+tID).hide();
$('#menu_cont_'+ID).show();
tID=ID;
}else{
$('#menu_'+ID).attr('class','nav_on');
$('#menu_cont_'+tID).show();
}
}
show_menu({if $CATE[$catid][parentid]}{$CATE[$catid][parentid]}{elseif $catid}{$catid}{else}0{/if});
</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" />
这样就可以了

游客，如果您要查看本帖隐藏内容请回复

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

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

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

[ 本帖最后由 xiuling 于 2009-6-1 16:52 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？点击这里注册

6 查看全部评分