Blueidea BBS二级横向导航制作

80酷酷网    80kuku.com

  

上次蓝色理想论坛更改程序的时候打算将程序标准化的,找到了我,我也很想帮忙实现了,可是听说Discuz!论坛实现标准化太难了,就这样搁着了,昨天看到feng4ever姐姐在标准化版问“蓝色理想的导航怎么用标准??”,估计还是想挑战难度,这个部分的代码不完全属于论坛程序,应该容易改动,昨天晚上没有时间,今天早上把它完成了,还没有完全解决问题,浏览器兼容问题还存在问题,找不出什么原因,就是li的下级元素的百分比宽度计算ie和支持标准的不同,ie认为100%是li的宽度,而别的认为是设定相对定位的元素的宽度,其实后者的正确的,可悲的ie总是气人阿。代码在下面运行你可以运行看看效果,要是更好的办法请留言在此,大家讨论讨论。

<!DOCTYPE html PUBLIC "-//W3C//DTD  1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Blueidea forum navigation</title>
<style type="text/css">
*{ margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:150%; list-style:none;}
body{ text-align:center;background:#212C23; overflow:hidden;}

a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:underline;}

#menu{ width:95%; background:#212C23; margin:30px auto; position:relative;}
ul#mainnav{ list-style:none; float:right;}
 ul#mainnav li{ float:left; text-align:center; width:80px; border-right:1px #333 solid;border-top:1px #333 solid; background:#3C4844;}
  ul#mainnav li.now{ background:#88BD6F; overflow:auto;_height:1%; color:#fff;border-right:0;}
  
ul#mainnav li.now .subnav{display:block;position:absolute;top:20px;right:0;width:1170%;overflow:auto;_height:1%;border:1px #3f0 solid;background-color:#88BD6F; padding:3px;}
* html ul#mainnav li.now .subnav{ top:21px;}
html>body ul#mainnav li.now .subnav{ width:100%;}
ul#mainnav li .subnav ul{background:#88BD6F; }
ul#mainnav li.now .subnav ul.user-tool{ width:70%; float:left; text-align:left;}
ul#mainnav li.now .subnav ul.all-tool{ width:30%; float:right; text-align:right;}
ul#mainnav li.now .subnav ul.user-tool li{ float:none; display:inline;background:#88BD6F; border:0; color:#fff;}
ul#mainnav li.now .subnav ul.all-tool li{ float:none; display:inline;background:#88BD6F; border:0;}
</style>
</head>

<body>
<div id="menu">
<ul id="mainnav">
 <li><a href=http://www.blueidea.com/news/ class=navLink>业界动态</a></li>
 <li><a href=http://www.blueidea.com/tech/ class=navLink>技术文档</a></li>

 <li><a href=http://www.blueidea.com/design/ class=navLink>艺术设计</a></li>
 <li><a href=http://www.blueidea.com/photo/ class=navLink>摄影摄像</a></li>
 <li><a href=http://www.blueidea.com/computer/ class=navLink>计算机技术</a></li>
 <li><a href=http://www.blueidea.com/download/ class=navLink>资源下载</a></li>
 <li><a href=http://www.blueidea.com/column/ class=navLink>个人专栏</a></li>
 <li><a href=http://www.blueidea.com/cg/ class=navLink>CG绘画</a></li>

 <li><a href=http://www.blueidea.com/special/ class=navLink>专题</a></li>
 <li class="now"><a href="index.php">经典论坛</a>
  <span class="subnav">
   <ul class="user-tool">
    <li>您好,<b>greengnn</b></li>
    <li><a href="logging.php?action=logout">[退出]</a></li>

    <li><a href="pm.php" target="_blank">短消息</a></li>
     <li><a href="search.php?srchuid=128197&mytopics=yes&searchsubmit=yes">我的话题</a></li> 
    <li><a href="memcp.php">控制面板</a></li>
    <li><a href="admincp.php" target="_blank">系统设置</a></li>
   </ul>
   <ul class="all-tool">
    <li><a href="search.php">搜索</a></li>

    <li><a href="stats.php">统计</a></li>
    <li><a href="faq.php">帮助</a></li>
   </ul>
  </span>
 </li>
</ul>
<div ></div>
</body>
</html>



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: