设为首页收藏本站
切换到宽版

Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
Discuz!官方免费开源建站系统»论坛 › Discuz! 交流与讨论 › Discuz!-插件 › 仿源码站二级菜单居中的横向CSS下拉菜单 ...
返回列表 发新帖

[修改] 仿源码站二级菜单居中的横向CSS下拉菜单

[复制链接]
周鹿信息网 发表于 2012-9-15 20:39:54 | 显示全部楼层 |阅读模式
插件发布
插件名称: 2.5通用的二级导航
插件来源: 二次修改他人插件
适用版本: Discuz! X2.5
语言编码: GBK简体 UTF8简体 
最后更新时间: 2012-09-15
插件作者: 不记得了
插件简介: 另类的CSS下拉导航菜单，鼠标放上后滑出二级菜单，始终居浏览器中间，如果内容超出限制，会自动变为两行，其实和别的下拉菜单没有什么区别，就看需求了，每个人喜好不一样
看演示！

我的网站：周鹿信息港  http://www.zhoulu8.com
根据自己的得需要修改导航名称即可，

下载解压即可！

代码如下：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级菜单居中的横向下拉菜单</title>
<style type="text/css">
<!--
* {margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
        font-size:12px;
}
#nav {
  height: 25px;  list-style-type: none;  padding-left:200px;
line-height:25px;overflow:hidden;background:#0066CC;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link  {
color:skyblue; text-decoration:none;
}
#nav a:visited  {
color:skyblue;text-decoration:none;
}
#nav a:hover  {
color:#FFF;text-decoration:none;font-weight:bold;background:skyblue;
}
#nav li {
float: left; width: 80px;
}
#nav li ul {
line-height: 24px;
list-style-type: none;
text-align:left;
left: -999px;
width: 520px; //注意,这里一定要设置宽度;
position: absolute;
background:skyblue;
}
#nav li ul li{
  float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float
}
#nav li ul a{
display: block; width: 65px;text-align:left;padding-left:15px;
}
#nav li ul a:link  {
color:#F1F1F1; text-decoration:none;
}
#nav li ul a:visited  {
color:#F1F1F1;text-decoration:none;
}
#nav li ul a:hover  {
color:#FFF;text-decoration:none;font-weight:normal;background:#003399;
}
#nav li:hover ul {
left:25%;
}
#nav li.sfhover ul {
left:25%;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
  sfEls.onmouseover=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls.onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls.onMouseUp=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls.onmouseout=function() {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
  }
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">网站首页</a>
<ul>
<li><a href="">网站首页</a></li>
<li ><a href="/sort/">分类导航</a></li>
<li ><a href="/other/lastupdate.shtml">最新更新</a></li>
<li ><a href="/other/top100.shtml">下载排行</a></li>
</ul>
</li>
<li><a href="/sort/list_1_1.shtml">ASP源码</a>
<ul>
<li><a href="/sort/list_1_11_1.shtml">聊天留言</a></li><li><a href="/sort/list_1_12_1.shtml">企业建站</a></li><li><a href="/sort/list_1_13_1.shtml">论坛社区</a></li><li><a href="/sort/list_1_14_1.shtml">新闻文章</a></li><li><a href="/sort/list_1_145_1.shtml">博客日记</a></li><li><a href="/sort/list_1_29_1.shtml">CMS系统</a></li><li><a href="/sort/list_1_20_1.shtml">学校政府</a></li><li><a href="/sort/list_1_28_1.shtml">影音视频</a></li>
</ul>
</li>
<li><a href="/sort/list_2_1.shtml">PHP源码</a>
<ul>
<li><a href="/sort/list_1_20_1.shtml">学校政府</a></li><li><a href="/sort/list_1_28_1.shtml">影音视频</a></li><li><a href="/sort/list_1_21_1.shtml">商务商城</a></li><li><a href="/sort/list_1_18_1.shtml">查询搜索</a></li><li><a href="/sort/list_1_32_1.shtml">人才房产</a></li>
</ul>
</li>
<li><a href="/sort/list_5_1.shtml">JAVA源码</a>
<ul>
<li><a href="/sort/list_1_11_1.shtml">聊天留言</a></li><li><a href="/sort/list_1_12_1.shtml">企业建站</a></li><li><a href="/sort/list_1_13_1.shtml">论坛社区</a></li><li><a href="/sort/list_1_14_1.shtml">新闻文章</a></li><li><a href="/sort/list_1_145_1.shtml">博客日记</a></li><li><a href="/sort/list_1_29_1.shtml">CMS系统</a></li><li><a href="/sort/list_1_20_1.shtml">学校政府</a></li><li><a href="/sort/list_1_28_1.shtml">影音视频</a></li>
</ul>
</li>
<li><a href="/sort/list_7_1.shtml">电子书籍</a>
<ul>
<li><a href="/sort/list_3_105_1.shtml">论坛社区</a></li><li><a href="/sort/list_3_113_1.shtml">商务商城</a></li><li><a href="/sort/list_3_104_1.shtml">企业建站</a></li><li><a href="/sort/list_3_120_1.shtml">影音视频</a></li><li><a href="/sort/list_3_117_1.shtml">办公管理</a></li><li><a href="/sort/list_3_116_1.shtml">图片相册</a></li>
</ul>
</li>
<li><a href="/sort/list_8_1.shtml">VC++</a>
<ul>
<li><a href="/sort/list_8_163_1.shtml">界面编程</a></li><li><a href="/sort/list_8_161_1.shtml">数据库应用</a></li><li><a href="/sort/list_8_166_1.shtml">报表打印</a></li><li><a href="/sort/list_8_165_1.shtml">多媒体技术</a></li><li><a href="/sort/list_8_162_1.shtml">控件相关</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

刺挠 发表于 2012-9-15 21:48:01 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

站是不是站 发表于 2012-9-15 22:04:34 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

广告 发表于 2012-9-15 22:33:31 | 显示全部楼层
看相爱 学习。
回复

使用道具 举报

xskwy 发表于 2012-9-16 14:12:16 | 显示全部楼层
有同感啊。顶你呢。
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-6-2 09:05 , Processed in 0.103031 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表