账号通
    

账号  

密码  

27464

查看

80

回复
主题:和超级新手一起分享一款漂亮的导航 [收藏主题] 本贴被认定为精华 转到:  
ygr1971 当前离线

1404

主题

44

广播

45

粉丝
添加关注
级别:版主

用户积分:8683 分
登录次数:124 次
注册时间:2011/11/13
最后登录:2021/11/2
ygr1971 发表于:2012/2/1 16:22:00   | 只看该作者 查看该作者主题 楼主 
科汛智能建站系统

点击查看原图



点击查看原图



导航效果如上图:

首先声明:此款导航并非我原创,只是将高手的的帖子加工整理而来,原帖地址:http://bbs.kesion.com/forumthread-74352.html,因为此帖中只是将代码帖出来,虽有分步说明,但对像我这样的超级新手来说,还是有点不清楚,也有许多朋友说弄不成功,所以我结合自己调试的过程,将它再具体化,以便大家分享。同时翻遍了原帖的一共26页,将需要的导航图片也弄了出来一并发上。再次感谢sobadgay。下面具体说明(按超级新手使用步骤,高手老鸟绕过)



已经按7楼高手的建议进行了修改(2012.4.29)



第一步:制作标签



制作标签办法:后台,点“标签”,再点击左侧的“自定义SQL函数标签”,然后添加标签,标签名称和查询语句、循环语句如下,其它的都默认,下面没有提到的都不管它,直接下一步即可,直到出现需要填写下面的内容的选项。



第一个标签,标签名:导航栏目

这个是产生一级栏目,这个标签很好制作,如下:

查询语句:

select top 50 id,foldername from ks_class where TJ=1 and TopFlag=1 order by root,folderorder

循环语句

[loop=50] <LI class="menu_line"></LI><li><a href="{$Field(id,GetInfoUrl,100,1)}" id="mynav{$AutoID}" class="nav_off"><span>{$Field(foldername,Text,0,...,0,)}</span></a></li> [/loop]

注意红色部分就是产生自动id



第二个标签,调用关键词,这个也很好实现。标签名:热门关键词



查询语句:

select top 10 AddDate,hits,ID,KeyText,LastUseTime from KS_KeyWords order by hits desc



循环语句:



[loop=10]



<LI><a href="/plus/tags.asp?n={$Field(KeyText,Text,0,...,0,)}" target="_blank" title="{$Field(KeyText,Text,0,...,0,)};被使用了{$Field(hits,Num,0,2)}次"><span>{$Field(KeyText,Text,0,...,0,)}</span></A></LI><LI class=menu_line2></LI>

[/loop]



第三个标签:标签名:导航外循环

这个是产生二级栏目,同时还要二级栏目对应一级栏目,所以就要采用循环查询了



首先是外循环,标签名:导航外循环



查询语句:

select top 100 id,foldername from ks_class where tj=1 and topflag=1 order by root,folderorder



循环语句:



[loop=50]

<div id=qh_con{$AutoID} style="DISPLAY: none">

<UL>

{SQL_导航内循环({$Field(id,GetInfoUrl,100,2)})}

</UL></div>

[/loop]



有外循环,就要有内循环,标签名:导航内循环



查询语句:

select top 100 id,foldername from ks_class where tj=2 and topflag=1 and tn='{$Param(0)}' order by folderorder

循环语句:

[loop=50]

<LI><A href="{$Field(id,GetInfoUrl,100,1)}"><SPAN>{$Field(foldername,Text,0,...,0,)}</SPAN></A></LI><LI class=menu_line2></LI>

[/loop]

说明:上述步骤做完后,建议你的网站的栏目设置最好不要超过9个,否则可能受影响看不出效果。为了看出效果,建议删除原来程序中默认自带的“就职指南、简历制作”等你不需要的栏目。等效果看出来了,你再琢磨怎么增加吧。

第二步:同样到后台,标签中,点击左侧“自定义静态标签”,添加标签,可以将标签称名称命名为“新建全站导航”,将下面的全部代码复制到“请输入您自定义的html代码”这个区域中,将整个框架做出来。

<script language="javascript">

function qiehuan(num){

  for(var id = 0;id<=9;id++)

  {

   if(id==num)

   {

    document.getElementById("qh_con"+id).style.display="block";

    document.getElementById("mynav"+id).className="nav_on";

   }

   else

   {

    document.getElementById("qh_con"+id).style.display="none";

    document.getElementById("mynav"+id).className="";

   }

  }

}

</script>



<div id=menu_out>

<div id=menu_in>

<div id=menu>

<UL id=nav>

<LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="/"><SPAN>首 页</SPAN></A></LI>

{SQL_导航栏目()}

</UL>

<div id=menu_con><div id=qh_con0 style="DISPLAY: block">

<UL>

<LI><span>热门关键词</span></LI><LI class=menu_line2></LI>

{SQL_热门关键词()}

</ul></div>

{SQL_导航外循环()}

</div></div></div></div>

第三步:将下面的CSS代码复制粘贴到网站根目录images文件夹中的style.css文件中,点击保存。

/*主导航菜单*/

#menu ul{

padding:0;

border:0;

list-style:none;

line-height:150%;

margin-top: 0;

margin-right: 0;

margin-bottom: 0;

margin-left: 0px;

}

#menu_out{

width:990px;

padding-left:4px;

margin-left:auto;

margin-right:auto;

background:url(../images/menu_left.gif) no-repeat left top;

}

#menu_in{

background:url(../images/menu_right.gif) no-repeat right top;

padding-right:4px;

}

#menu{

background:url(../images/menu_bg.gif) repeat-x;

height:70px;

}

.menu_line{

background:url(../images/menu_line.gif) no-repeat center top;

width:8px;

}

.menu_line2{

background:url(../images/menu_line2.gif) no-repeat center top;

width:15px;

}

#nav{

padding-left:20px;

}

#nav li{

float:left;

height:35px;

}

#nav li a{

float:left;

display:block;

padding-left:6px;

height:35px;

background:url(../images/menu_on_left.gif) no-repeat left top;

cursor:pointer;

text-decoration:none;

}

#nav li a span{

float:left;

padding:11px 14px 10px 10px;

line-height:14px;

background:url(../images/menu_on_right.gif) no-repeat right top;

font-size:14px;

font-weight:bold;

color:#FFFFFF;

text-decoration:none;

}

#nav li .nav_on{   /*鼠标经过时变换背景,方便JS获取样式*/

background-position:left 100%;

}

#nav li .nav_on span{  /*鼠标经过时变换背景,方便JS获取样式*/

background-position:right 100%;

color:#333333;

text-decoration:none;

padding:14px 14px 7px 10px;

}

/*子栏目*/

#menu_con{

text-align:left;

padding-left:20px;

clear:both;

}

#menu_con li{

float:left;

height:22px;

margin-top:8px;

}

#menu_con li a{

display:block;

float:left;

background:url(../images/menu_on_left2.gif) no-repeat left top;

cursor:pointer;

padding-left:3px;

}

#menu_con li a span{

float:left;

padding:6px 10px 4px 10px;

line-height:12px;

background:url(../images/menu_on_right2.gif) no-repeat right top;

}

#menu_con li a:hover{

text-decoration:none;

background:url(../images/menu_on_left2.gif) no-repeat left bottom;

}

#menu_con li a:hover span{

background:url(../images/menu_on_right2.gif) no-repeat right bottom;

}

第四步:下载导航条所需要的图片

把下载后的文件进行解压缩,将所有图片放到目录images文件夹里面。

 下载信息  [文件大小:10.56 KB 下载次数: 次]
点击下载文件:images.rar

第五步:在模板文件中进行调用:后台,点击页面底部的“模板管理”,在你想显示导航栏的地方加上调用{LB_新建全站导航}(也就是第二步新建的自定义静态标签的名称),比如选择文章系统的“频道首页”模板,点击进行修改,在“<!--新闻头部-->{LB_头部通用}”下面一行加上{LB_新建全站导航}。点击确定修改。然后更新缓存。

第六步:打开新闻频道的首页,就可以看到效果了。如果是放在整个网站首页的,切记要先发布首页才可以看到效果。

好了,再次感谢原作者。

 
  支持(22) | 反对(23) 回到顶部顶端 回到底部底部
ygr1971 当前离线

1404

主题

44

广播

45

粉丝
添加关注
级别:版主

用户积分:8683 分
登录次数:124 次
注册时间:2011/11/13
最后登录:2021/11/2
ygr1971 发表于:2012/2/1 16:23:00   | 只看该作者 查看该作者主题 沙发 
科汛智能建站系统
占个位,留等补充说明。超级新手第一次发分享帖,怕有遗漏。
 
  支持(22) | 反对(21) 回到顶部顶端 回到底部底部
gsat2002 当前离线

90

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:346 分
登录次数:54 次
注册时间:2008/1/26
最后登录:2012/9/26
gsat2002 发表于:2012/2/1 16:27:00   | 只看该作者 查看该作者主题 藤椅 
 
[url]http://www.haoshl.com[/url]
[url]http://www.meydunlgs.com[/url]
[url]http://www.lvhhz.com[/url]
[url]http://www.chiyg.com[/url]
  支持(14) | 反对(11) 回到顶部顶端 回到底部底部
u5zy 当前离线

9

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:11 分
登录次数:5 次
注册时间:2012/2/1
最后登录:2012/2/17
u5zy 发表于:2012/2/1 17:04:00   | 只看该作者 查看该作者主题 板凳 
科汛在线网校系统
好贴,好贴,学习了!亲一亲亲一亲亲一亲
 
  支持(5) | 反对(4) 回到顶部顶端 回到底部底部
lengxue 当前离线

3043

主题

18

广播

4

粉丝
添加关注
级别:大二

用户积分:10430 分
登录次数:1605 次
注册时间:2009/1/13
最后登录:2022/9/16
lengxue 发表于:2012/2/1 19:57:00   | 只看该作者 查看该作者主题 报纸 
 
想旅游就来就爱旅游网
[url]http://bbs.shangrila66.com[/url]
大香格里拉旅游王国
[url]http://www.shangrila66.com[/url]
  支持(3) | 反对(1) 回到顶部顶端 回到底部底部
ygr1971 当前离线

1404

主题

44

广播

45

粉丝
添加关注
级别:版主

用户积分:8683 分
登录次数:124 次
注册时间:2011/11/13
最后登录:2021/11/2
ygr1971 发表于:2012/2/2 14:02:00   | 只看该作者 查看该作者主题 地板 

以下是引用 u5zy在2012-2-1 17:04:00的发言:
好贴,好贴,学习了!点击查看原图点击查看原图点击查看原图


谢谢。

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
youkoe 当前离线

238

主题

0

广播

0

粉丝
添加关注
级别:二年级

用户积分:490 分
登录次数:366 次
注册时间:2010/9/10
最后登录:2021/5/6
youkoe 发表于:2012/2/2 15:03:00   | 只看该作者 查看该作者主题 7楼 
科汛在线网校系统

建议:

1、栏目导航的SQL查询改为

  1. select top 50 id,foldername from ks_class where TJ=1 and TopFlag=1 order by root,folderorder

这样导航栏目后台设置为前台导航栏不显示时,前台不会显示,同时对栏目按后台发布顺序进行排序。

2、导航外循环SQL语句建议改为

  1. select top 100 id,foldername from ks_class where tj=1 and topflag=1 order by root,folderorder

否则前台个别二级栏目不能显示。

3、导航内循环SQL语句建议改为

  1. select top 100 id,foldername from ks_class where tj=2 and topflag=1 and tn='{$Param(0)}' order by folderorder

小提示:如果想对某个“一级栏目”设置为前台不显示,需要在后台:内容-栏目管理-批量设置-栏目选项里面将该栏目及其下属二级栏目批量设置为“不显示”状态,否则前台显示的二级栏目有问题,会乱套。

4、建议将以下代码建立一个单独的JS文件,譬如放在根目录js文件夹下,取名为daohang.js,在后台标签里面调用即可,调用方法:

  1. <SCRIPT src="{$GetInstallDir}js/daohang.js" type=text/javascript></SCRIPT>


以下是该JS文件代码:

  1. function qiehuan(num){
  2.   for(var id = 0;id<=11;id++)
  3.   {
  4.    if(id==num)
  5.    {
  6.     document.getElementById("qh_con"+id).style.display="block";
  7.     document.getElementById("mynav"+id).className="nav_on";
  8.    }
  9.    else
  10.    {
  11.     document.getElementById("qh_con"+id).style.display="none";
  12.     document.getElementById("mynav"+id).className="";
  13.    }
  14.   }
  15. }

注意红色数字11,这样改后可以显示12个一级栏目。

5、CSS里面的样式根据网站布局可以进行调整,从而增加导航条内设内栏目个数。譬如

  1. #nav li a span{
  2. float:left;

  3. padding:11px 14px 10px 10px;

  4. 红色部分可以改为

  5. padding:11px 3px 2px 2px;

6、导航栏目切换功能好像还有问题,标签里面未写入JS鼠标覆盖事件,应该为

  1. [loop=50]
  2. <LI class="menu_line"></LI><li><a href="{$Field(id,GetInfoUrl,100,1)}" onmouseover="javascript:qiehuan({$AutoID})" id="mynav{$AutoID}" class="nav_off"><span>{$Field(foldername,Text,0,...,0,)}</span></a></li>
  3. [/loop]

 
悠客花香
  支持(1) | 反对(0) 回到顶部顶端 回到底部底部
jonsu 当前离线

524

主题

0

广播

0

粉丝
添加关注
级别:五年级

用户积分:768 分
登录次数:32 次
注册时间:2011/6/27
最后登录:2012/10/8
jonsu 发表于:2012/2/2 15:18:00   | 只看该作者 查看该作者主题 8楼 
科汛智能建站系统
没看出有什么特殊的地方呀!
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
rzm74520 当前离线

42

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:55 分
登录次数:3 次
注册时间:2012/1/12
最后登录:2012/4/1
rzm74520 发表于:2012/2/2 16:04:00   | 只看该作者 查看该作者主题 9楼 
科汛智能建站系统
对不起,该用户所发的帖已全被锁定!
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
song_111 当前离线

9

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:21 分
登录次数:2 次
注册时间:2012/1/12
最后登录:2012/2/8
song_111 发表于:2012/2/3 10:30:00   | 只看该作者 查看该作者主题 10楼 
科汛在线网校系统

第一个SQL标签     导航栏目  


循环语句

[loop=50]

<LI class="menu_line"></LI><li><a href="{$Field(id,GetInfoUrl,100,1)}" id="mynav{$AutoID}" class="nav_off"><span>{$Field(foldername,Text,0,...,0,)}</span></a></li>

[/loop]


红色的a标签少了个事件

onmouseover="javascript:qiehuan({$AutoID})"


 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.25098秒 powered by KesionCMS 9.0