账号通
    

注册

找回密码

账号  

密码  

话题
互动
会员
服务
<<返回列表上一个主题 下一个主题 打印本帖 复制本帖地址

32204

查看

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_新建全站导航}。点击确定修改。然后更新缓存。

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

好了，再次感谢原作者。
 
欢迎光临师易网http:&#47;&#47;www.shiyi910.com[&#47;url]
一分钟快速开通线上知识店铺
  支持(22) | 反对(23) 回到顶部顶端 回到底部底部
ygr1971 当前离线

1404

主题

44

广播

45

粉丝
添加关注
级别:版主

用户积分:8683 分
登录次数:124 次
注册时间:2011/11/13
最后登录:2021/11/2
ygr1971 发表于：2012/2/1 16:23:00   | 只看该作者 查看该作者主题 沙发 
科汛智能建站系统
做考试题库 就用#科汛在线考试系统!
占个位，留等补充说明。超级新手第一次发分享帖，怕有遗漏。
 
欢迎光临师易网http:&#47;&#47;www.shiyi910.com[&#47;url]
做官网 就用科汛智能建站系统!
  支持(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   | 只看该作者 查看该作者主题 板凳 
科汛在线商城系统(NET)
做线上考试培训 就选#科汛网校
好贴，好贴，学习了！亲一亲亲一亲亲一亲
 
一分钟快速开通线上知识店铺
  支持(5) | 反对(4) 回到顶部顶端 回到底部底部
lengxue 当前离线

3043

主题

18

广播

4

粉丝
添加关注
级别:大二

用户积分:10431 分
登录次数:1606 次
注册时间:2009/1/13
最后登录:2024/7/7
lengxue 发表于：2012/2/1 19:57:00   | 只看该作者 查看该作者主题 报纸 
科汛在线商城系统(NET)
一分钟快速开通线上知识店铺
这个收藏了。
 
想旅游就来就爱旅游网
[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   | 只看该作者 查看该作者主题 地板 
科汛在线商城系统(NET)
做考试题库 就用#科汛在线考试系统!

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


谢谢。
 
欢迎光临师易网http:&#47;&#47;www.shiyi910.com[&#47;url]
做官网 就用科汛智能建站系统!
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
youkoe 当前离线

238

主题

0

广播

0

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

用户积分:490 分
登录次数:366 次
注册时间:2010/9/10
最后登录:2021/5/6
youkoe 发表于：2012/2/2 15:03:00   | 只看该作者 查看该作者主题 7楼 
科汛在线考试系统(NET)
有生源 找课程 就上科汛课堂街!

建议：

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楼 
做在线知识付费 选科汛云开店
有课程 找生源 就上科汛课堂街
没看出有什么特殊的地方呀！
 
上海网站建设[/url]  复合风管[/url] 电动百叶窗[/url] 物业管理顾问[/url] 一次性医用包[/url] 口腔医用耗材[/url]  IDL速通门[/url]
滑翔翼[/url]  ipulse[/url] 改装CNG[/url] sauer danfoss[/url]
有课程 找生源 就上科汛课堂街
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
rzm74520 当前离线

42

主题

0

广播

0

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

用户积分:55 分
登录次数:3 次
注册时间:2012/1/12
最后登录:2012/4/1
rzm74520 发表于：2012/2/2 16:04:00   | 只看该作者 查看该作者主题 9楼 
科汛在线商城系统(NET)
做官网 就用科汛智能建站系统!
对不起，该用户所发的帖已全被锁定!
 
陕西省***病***[/URL]
兰州整形美容[/URL]
一分钟快速开通线上知识店铺
  支持(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.25000秒 powered by KesionCMS 9.0