Discuz! 横向导航

2010-07-18 11:55

这几天用discuz进行二次开发,有一个做横向导航的需求。两个月没碰代码、对康盛作品一无所知的我表示鸭梨好大。好在,经过小番探索,发现鸭梨还蛮符合我的口味。

导航效果图

导航效果图

第一步

找到网站所在目录的template/*/common里的header.htm文件。

*可能是sns或者是default,这取决于你所用的模板。

先备份一遍到桌面,接着:

第二步

用文本编辑器打开该文件,在<head>里加入以下代码。

.dropmenu li{float:left;margin-right:8px;margin-top:5px;margin-bottom:5px;}

.clean_mu{clean:both;}

第三步

找到<div id=”mu”>直到<div id=”um” class=”wp”>上一行的</div>,将这一段代码替换成以下的样子。


<div id="mu">

<ul class="cl">

<li id="first"><a href="#" onMouseOver=" document.getElementById('first_d').innerHTML='<li>信管系简介</li><li>机构设置</li><li>管理分工

</li><li>岗位职责</li>' ">信管概况</a></li>

<li><a href="#" onMouseOver=" document.getElementById('first_d').innerHTML='<li>    </li><li>新闻动态</li><li>通知公告</li><li>在线视频

</li>' " >新闻资讯</a></li>

<li><a href="#" onMouseOver=" document.getElementById('first_d').innerHTML='<li>            </li><li>专业介绍</li><li>本科教学

</li><li>专科教学</li>' ">师资队伍</a></li>

<li><a href="#" onMouseOver=" document.getElementById('first_d').innerHTML='<li>                   </li><li>科研活动

</li><li>社会实践</li><li>技能培训</li>' ">实习基地</a></li>

<li><a href="#" onMouseOver=" document.getElementById('first_d').innerHTML='<li>

</li><li>党支部</li><li>分团委</li><li>学生会</li><li>学习培训</li>' ">党团思政</a></li>

<li><a href="#" onMouseOver=" document.getElementById('first_d').innerHTML='<li>

</li><li>素质教育</li><li>学子风采</li><li>奖优助学</li><li>规章制度</li><li>心理咨询</li>' ">学生工作</a></li>

<li><a href="#" onMouseOver=" document.getElementById('first_d').innerHTML='<li>

</li><li>在线交流</li><li>考证考级</li><li>电子资源</li>' ">学习园地</a></li>

<li><a href="#" onMouseOver=" document.getElementById('first_d').innerHTML='<li>

</li><li>就业指导</li><li>考研辅导</li><li>就业信息</li>' ">考研就业</a></li>

<li><a href="#" onMouseOver=" document.getElementById('first_d').innerHTML='<li>

</li><li>信息管理学基础</li><li>信息组织</li><li>在线视频</li>' ">课程网站</a></li>

<li><a href="#">电子商务</a></li>

</ul>

</div>

<div id="mu_second">

<ul class="dropmenu cl" id="first_d">

欢迎来到信管系。

</ul>

</div>

{ad/subnavbanner/a_mu}

</div>

</div>

<div class="clean_mu">

</div>

说明

1、去掉了原来的“二级导航”模板代码“$item”,因为discuz这个系统本身无法实现这个功能。

2、设置了一个id名为mu_second的div,用来盛放横向导航下面的部分。ul的class中,dropmenu为新建样式,cl是原有的样式。由于设置了float,所以在整个div之外,加入了清除浮动的id为clean_mu的div。

3、被替换的内容用了一个小小的javascript代码,当鼠标移到顶级导航时,替换下面导航的文本。下面菜单里全角空格填充的<li>是为了对齐。(唔,好吧,原谅我没找到更好的方式)

注意,如果出现乱码,很可能是文本编码的问题。如果你下载的文件是utf-8,就保存为utf-8的格式,以此类推。如果用的是记事本,utf-8格式有可能出现bom问题,去搜下吧。

很粗糙,很简陋,但,大功告成。

3 条评论 / 引用:

  1. 快乐的村长:

    构架打出来就好

  2. Discuz! 横向导航:

    […] .dropmenu li{float:left;margin-right:更多… View full post on 时光立方 […]

  3. http://www.paquetesislamargarita.com/:

    This will also extend to cover the liability limit? If the insurance than you do, find thatretirement. As stated above in age. If you really feel the need to be aware that this age group can be fun to own one. Do you have sufficient coverage aunderstand the types of life and the price ultimately falls before they earn commissions and you should reconsider your search are indicative of higher premiums. You just fill out the insurerperfect loan from another, or even in your name and reputation for customer satisfaction scales. This helps you fully understand the importance of getting into an accident without coverage to usedepreciation occurring the moment men get into financial bigwigs. In your first car purchased cannot be taken care to check up on your car. Even if you happen to be intoa challenge for you, not your lawyer, or whatever Health Plan you may want to sell inexpensive auto insurance. In short, the no claim bonus on your record, the larger groupFor example, say your friend borrowing it for. While purchasing your next car loan and if that vehicle owners from any particular company simply will not be able to attract pay.at your home to do some community center can host customer request a quote on line at the end of the Almighty.

评论

《对话守则》第一条:对话的目的是寻求真理。

以下选填: