Discuz 导航+下拉菜单+双语（DIY必用）

dly · 发表于 2011-8-30 20:58:06

昨晚做了一个导航+下拉菜单，相信对DZX版本的用户们有点用处，这里分享。
在我们DIY门户时，为了更好、更多的展示内容，以吸引人们的注意，界面不仅要做的好看，还要美观。
在那么多需要DIY的项目里，我时常看到站长们在相关栏目里放了个“More”（就是更多）的链接。
这个More，大部分都是简单的做，有点缺乏了美观。
我自己做了一个，其外观、效果、功能如下图简单介绍；
图1）这是预览效果图，我的站点碍于大家无法打开，就这里看图吧

图2）双语效果；当鼠标对着导航名目时，会转换语言，例如 More= 浏览更多

图3）下拉菜单；可以容纳更多的主题或者分类，简化界面的同时，却可以展示更多内容

图4）完全不存在JS冲突的代码问题，随便你要DIY多少个也可以

其它好处；代码里有更换颜色的说明，您可以自己调整需要的颜色效果，以符合你的站点原素；协融所有的浏览器。
使用有问题的，可以在这里跟帖~
代码如下；

<title>导航+菜单+双语</title>
<title>协融所有浏览器，包括历史上最烂的IE6版本</title>
<title>版权归http://www.12345.la/，仅发在http://www.12345.la/</title>
<title>修改版权者，任何有关这代码内容的问题一律不予处理</title>
<title>承接所有DZ特殊效果开发、插件、二级开发、模板，联络地址www.fieah.com信用保证</title>
<title>本内容原创自http://www.12345.la/ 妹妹（www.extollive.com）</title>
<style type="text/css">
.menu {
font-family: arial, sans-serif;
width:240px;
margin:0;
margin:50px 0;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:115px;
height:30px;
color:#FFFAF0;/*字体颜色*/
border:1px solid #fff;
border-width:0px 2px 0 0;/*边框厚度*/
background:#800000;/*导航框内背景色*/
line-height:30px;
font-size:12px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:1px;/*改了这里后，边框主题名目在鼠标对着时，将显示菜单第一主题名目，利用这里成了双语效果*/
left:0;
width:105px;
}
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
table {
border-collapse:collapse;
margin:0;
padding:0;
}
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="地址链接">导航名目（1）</a>
<!--[if lte IE 6]>
<a href="http://www.extollive.com/index.php?gid=412">导航名目（1）
<table><tr><td>
<![endif]-->
<ul>
<li><a href="地址链接">导航名目（1）</a>
<li><a href="地址链接" >1~下拉菜单里的分类名目，下拉菜单项目的多少，可以直接复制这些代码加下去~1</a></li>
<li><a href="地址链接" >2~下拉菜单里的分类名目，下拉菜单项目的多少，可以直接复制这些代码加下去~2</a></li>
<li><a href="地址链接" >3~下拉菜单里的分类名目，下拉菜单项目的多少，可以直接复制这些代码加下去~3</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="“更多”的项目地址链接"> >> More-1</a>
<!--[if lte IE 6]>
<a href="地址链接"> >> More-1
<table><tr><td>
<![endif]-->
<ul>
<li><a href="地址链接">浏览更多-1</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<div class="clear"> </div>
</div>
</body>
</html>

复制代码

为途而战 · 发表于 2011-8-30 23:41:09

相当到位啊！

Discuz 导航+下拉菜单+双语（DIY必用）

相关帖子