请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 4922|回复: 18

蓝色理想的导航怎么用标准?? [复制链接]

feng4ever 楼主

小可爱

版主 手机认证 

帖子
5262
体力
14768
威望
181
发表于 2006-7-18 15:31:44 |显示全部楼层
论坛的两个风格 - 默认/blue
现在都是table实现的,因为间隙必须和tab对齐,这样就形成了 表格排版
如果特别的 用div实现 怎么办??


新风格table样式点击下面的地址察看
http://bbs.blueidea.com/?styleid=1&sid=EjU8s9
长期有外企UI/UE/WEB实习职位(深圳、上海)
西部数码顶级域名注册商39元抢注!

酒酣几度

荣誉管理 手机认证 

帖子
1367
体力
3521
威望
127
发表于 2006-7-19 07:58:42 |显示全部楼层
类似下来菜单的制作就很容易实现,可是现在二级导航偏偏天各一边就很为难了,就是效果做出来也很难符合语义,结构也不够好!

我勉强做了一个,ie和其他浏览器用hack给达到视觉效果一致了,那些激活的链接效果使用背景图就可以实现。

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

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

  11. #menu{ width:95%; background:#212C23; margin:30px auto; position:relative;}
  12. ul#mainnav{ list-style:none; float:right;}
  13.         ul#mainnav li{ float:left; text-align:center; width:80px; border-right:1px #333 solid;border-top:1px #333 solid; background:#3C4844;}
  14.                 ul#mainnav li.now{ background:#88BD6F; overflow:auto;_height:1%; color:#fff;border-right:0;}
  15.                
  16. 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;}
  17. * html ul#mainnav li.now .subnav{ top:21px;}
  18. html>body ul#mainnav li.now .subnav{ width:100%;}
  19. ul#mainnav li .subnav ul{background:#88BD6F; }
  20. ul#mainnav li.now .subnav ul.user-tool{ width:70%; float:left; text-align:left;}
  21. ul#mainnav li.now .subnav ul.all-tool{ width:30%; float:right; text-align:right;}
  22. ul#mainnav li.now .subnav ul.user-tool li{ float:none; display:inline;background:#88BD6F; border:0; color:#fff;}
  23. ul#mainnav li.now .subnav ul.all-tool li{ float:none; display:inline;background:#88BD6F; border:0;}
  24. </style>
  25. </head>

  26. <body>
  27. <div id="menu">
  28. <ul id="mainnav">
  29.         <li><a href=http://www.blueidea.com/news/ class=navLink>业界动态</a></li>
  30.         <li><a href=http://www.blueidea.com/tech/ class=navLink>技术文档</a></li>
  31.         <li><a href=http://www.blueidea.com/design/ class=navLink>艺术设计</a></li>
  32.         <li><a href=http://www.blueidea.com/photo/ class=navLink>摄影摄像</a></li>
  33.         <li><a href=http://www.blueidea.com/computer/ class=navLink>计算机技术</a></li>
  34.         <li><a href=http://www.blueidea.com/download/ class=navLink>资源下载</a></li>
  35.         <li><a href=http://www.blueidea.com/column/ class=navLink>个人专栏</a></li>
  36.         <li><a href=http://www.blueidea.com/cg/ class=navLink>CG绘画</a></li>
  37.         <li><a href=http://www.blueidea.com/special/ class=navLink>专题</a></li>
  38.         <li class="now"><a href="index.php">经典论坛</a>
  39.                 <span class="subnav">
  40.                         <ul class="user-tool">
  41.                                 <li>您好,<b>greengnn</b></li>
  42.                                 <li><a href="logging.php?action=logout">[退出]</a></li>
  43.                                 <li><a href="pm.php" target="_blank">短消息</a></li>
  44.                                 <li><a href="search.php?srchuid=128197&mytopics=yes&searchsubmit=yes">我的话题</a></li>       
  45.                                 <li><a href="memcp.php">控制面板</a></li>
  46.                                 <li><a href="admincp.php" target="_blank">系统设置</a></li>
  47.                         </ul>
  48.                         <ul class="all-tool">
  49.                                 <li><a href="search.php">搜索</a></li>
  50.                                 <li><a href="stats.php">统计</a></li>
  51.                                 <li><a href="faq.php">帮助</a></li>
  52.                         </ul>
  53.                 </span>
  54.         </li>
  55. </ul>
  56. <div style="clear:both;"
  57. </div>
  58. </body>
  59. </html>
复制代码

 提示:您可以先修改部分代码再运行

blog Web标准化交流会 WEB标准群:23783439
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

帖子
82
体力
454
威望
1
发表于 2006-7-19 09:59:49 |显示全部楼层
IE 5.5+和Opera 9下测试正常

 提示:您可以先修改部分代码再运行



fixed.

[ 本帖最后由 winsteps 于 2006-7-19 11:22 编辑 ]

使用道具 举报

feng4ever 楼主

小可爱

版主 手机认证 

帖子
5262
体力
14768
威望
181
发表于 2006-7-19 10:47:37 |显示全部楼层
谢谢了 不过那个高光部分没能实现
greengnn的 那个active的按钮没能和子菜单连接起来
winsteps朋友的那个子菜单 下面没有一个高光

看看我目前的作的 我使用了绝对定位才实现了这个效果
其实论坛的这个效果是这样的

一级菜单在激活的时候 要能够遮住二级菜单的高光.来制造一种一级菜单和二级菜单连接起来的效果

 提示:您可以先修改部分代码再运行

附件: 你需要登录才可以下载或查看附件。没有帐号?注册
长期有外企UI/UE/WEB实习职位(深圳、上海)

使用道具 举报

酒酣几度

荣誉管理 手机认证 

帖子
1367
体力
3521
威望
127
发表于 2006-7-19 17:04:28 |显示全部楼层
那个用背景图片实现就可以!
blog Web标准化交流会 WEB标准群:23783439

使用道具 举报

帖子
197
体力
45
威望
5
发表于 2006-7-19 19:42:34 |显示全部楼层

 提示:您可以先修改部分代码再运行



没有任何图片
ie5.0+,fx 1.5+,opera 9+
已有 1 人评分威望 收起 理由
蓝色 + 1 我很赞同

总评分: 威望 + 1   查看全部评分

使用道具 举报

kxy000 
帖子
51
体力
202
威望
0
发表于 2006-7-20 02:06:46 |显示全部楼层
不错不错  受教了 `~~~

使用道具 举报

包谷 

尽量经典

荣誉管理

帖子
5467
体力
20293
威望
53
发表于 2006-7-20 03:08:35 |显示全部楼层
我有一个类似的,功能上基本成熟了,可惜没有解决在所有页面中引用的问题,基于CSS+DIV+TABLE,还有项目,在IE里显示倒是效果很不错了,但是在DW里面,如果用"包括"引入,(不过最近发现当文件已经处在远程服务器端,用虚拟参数引入而非文件参数时,工作区里不显示该文件,但是原来也是用同样的参数,也将文件已经上传到了远程端,却照样显示,当中究竟有什么讲究,还没有搞清楚).该文件有些时候直接在DW工作区里显示,而且那些表格\层和项目并不规矩,占着很大地方,不好用.现在做着一个仅有表格和文字链接的导航.

我的导航条分两行:一行由蓝色理想这种风格的导航组成,处在下方,作为栏目导航,想实现的是点击相应栏目菜单,底下那一行自动弹出显示相关分栏目(这里就不再做什么效果了,直接超链接进入相关页面完事),而点击菜单时,不发生跳转(至少效果上是这样),而是直接在下方同一框架内显示相关内容.想把这个导航放在首页上,当点击菜单时,仍然在首页上览相关内容,(这样给人的感觉是链接不深);

上方的一行,则是站点导航,功能上是蓝色这种效果,但操作上却又是鼠标滑过显示级联菜单的,点击主菜单时,可以发生跳转进入相关站点首页,而点击级联菜单中的链接则直接进入该站点的相应栏目;一个级联菜单可以再包括子菜单,可以直达细节页面.这样一来,IE里面导航仍就那么块地方,在DW里面可是硕大无比:D
傍晚的太阳,余温尚存,继续散发光和热

使用道具 举报

cues 
帖子
59
体力
5
威望
0
发表于 2006-7-20 10:50:45 |显示全部楼层
看来真是高手云集,学习一下

使用道具 举报

feng4ever 楼主

小可爱

版主 手机认证 

帖子
5262
体力
14768
威望
181
发表于 2006-7-20 11:46:52 |显示全部楼层
原帖由 meltifa 于 2006-7-19 19:42 发表

<!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/xh ...

还是需要使用 负数.. 果然和我之前想的一样
我之前认为参数设置为 负数的兼容性不好 就放弃了这个想法 而采用单独的一个绝对定位的层来表现高光.
长期有外企UI/UE/WEB实习职位(深圳、上海)

使用道具 举报

帖子
68
体力
181
威望
0
居住地
河北省 石家庄市
发表于 2006-7-20 11:56:18 |显示全部楼层
高手效率是高啊 解决了这个问题
drawer.hellowind.com

使用道具 举报

好帅的爸爸

高级会员 手机认证 

帖子
360
体力
1348
威望
2
居住地
湖北省 武汉市
发表于 2006-7-20 13:33:04 |显示全部楼层
要改版了?
很期待!

使用道具 举报

帖子
197
体力
45
威望
5
发表于 2006-7-20 15:45:08 |显示全部楼层
原帖由 feng4ever 于 2006-7-20 11:46 发表

还是需要使用 负数.. 果然和我之前想的一样
我之前认为参数设置为 负数的兼容性不好 就放弃了这个想法 而采用单独的一个绝对定位的层来表现高光.

你从哪里听来的这个说法?负数的兼容性很好的

使用道具 举报

feng4ever 楼主

小可爱

版主 手机认证 

帖子
5262
体力
14768
威望
181
发表于 2006-7-20 15:59:10 |显示全部楼层
终于搞定了 不过
_bottom /**/: -3px;
是为谁准备的呢??
加上这个东西以后 IE5 稍微出现了一点问题 去掉反而正常了


 提示:您可以先修改部分代码再运行

长期有外企UI/UE/WEB实习职位(深圳、上海)

使用道具 举报

帖子
197
体力
45
威望
5
发表于 2006-7-20 16:14:06 |显示全部楼层
_bottom /**/: -3px;

是为ie5准备的

ie5对盒模型理解有问题,造成导航大小有细微差异,所以就加了这个

使用道具 举报

帖子
103
体力
305
威望
4
发表于 2006-7-20 16:36:43 |显示全部楼层
个人觉得web标准归根结底还是文档结构的标准,只有在文档结构符合语义的情况下再去注重表现,我用dl dt dd重新对导航进行了组织,不过写起来问题还是比较多的。
  1. <div id="wrap">
  2.         <div id="header">
  3.                 <div id="logo"><h1>蓝色经典</h1></div>
  4.                 <div id="nav">
  5.                         <dl>
  6.                           <dt id="nav1"><a href="#">业界动态</a></dt>
  7.                           <dd id="nav1Child"><div>本站动态 | 软件信息 | 硬件信息 | 设计比赛 | 专业书讯 | 招聘求职 | 其它信息 | 教育培训</div></dd>
  8.                           <dt id="nav2"><a href="#">技术文档</a></dt>
  9.                           <dd id="nav2Child"><div>网页制作 | 图形图像 | 多媒体制作 | 网络编程 | 网站建设</div></dd>
  10.                           <dt id="nav3"><a href="#">艺术设计</a></dt>
  11.                           <dd id="nav3Child"><div>设计理论 | pages | 像素设计 | 佳作欣赏</div></dd>
  12.                           <dt id="nav4"><a href="#">摄影摄像</a></dt>
  13.                           <dd id="nav4Child"><div>摄影作品 | 摄影游记 | 摄影器材 | 摄影技巧 | 摄影动态 | 摄影好站</div></dd>
  14.                           <dt id="nav5"><a href="#">计算机技术</a></dt>
  15.                           <dd id="nav5Child"><div>操作系统 | 网络安全 | 应用程序 | 网络工程</div></dd>
  16.                           <dt id="nav6"><a href="#">资源下载</a></dt>
  17.                           <dd id="nav6Child"><div>网页快照 | 经典产品| 三维实景欣赏</div></dd>
  18.                           <dt id="nav7"><a href="#">个人专栏</a></dt>
  19.                           <dd id="nav7Child"><div>会员文章 | Flash | ColdFusion | Mobile | Web Standards | Design | .NET | ASP | PHP | site</div></dd>
  20.                           <dt id="nav8"><a href="#">CG绘画</a></dt>
  21.                           <dd id="nav8Child"><div>手绘教程 | Wacom专区</div></dd>
  22.                           <dt id="nav9"><a href="#">专题</a></dt>
  23.                           <dd id="nav9Child"><div>中国设计网站站长心声探索 | 《领航人》专题 | B/S引擎—NoahWeb专题</div></dd>
  24.                           <dt id="nav10"><a href="#">经典论坛</a></dt>
  25.                           <dd id="nav10Child" nowrap><div><span>您好,流星划过 [退出] 短消息 我的话题 控制面板</span>搜索 帮助</div></dd>
  26.                         </dl>
  27.                 </div>
  28.         </div>
  29. </div>
复制代码

 提示:您可以先修改部分代码再运行


通过了ie5.5 ie6 ff1.5 但是下面在细节地方有差异,ff下面1,2级之间还是被截断了。

对于现在板式的导航也写了个样式,不过毛病就更多了,最突出的就是不能自动适应宽度

 提示:您可以先修改部分代码再运行


大家可以改变一下body 中id的值,index1-index10可以切换到其他相关栏目,这样导航就可以单独提取出来了。
已有 2 人评分威望 收起 理由
蓝色 + 1 精品文章
feng4ever + 2 精品文章

总评分: 威望 + 3   查看全部评分

流星…………

使用道具 举报

feng4ever 楼主

小可爱

版主 手机认证 

帖子
5262
体力
14768
威望
181
发表于 2006-7-20 20:08:04 |显示全部楼层
原帖由 流星划过 于 2006-7-20 16:36 发表
个人觉得web标准归根结底还是文档结构的标准,只有在文档结构符合语义的情况下再去注重表现,我用dl dt dd重新对导航进行了组织,不过写起来问题还是比较多的。

<div id="wrap">
        <div id ...

强烈支持!!!!
更改页面 只要更改 body的 id标签就可以了...

很特别的子标签用法 灵魂附体..

[ 本帖最后由 feng4ever 于 2006-7-20 20:25 编辑 ]
长期有外企UI/UE/WEB实习职位(深圳、上海)

使用道具 举报

酒酣几度

荣誉管理 手机认证 

帖子
1367
体力
3521
威望
127
发表于 2006-7-20 21:04:48 |显示全部楼层
分解一下
_bottom: -3px;  
为ie准备的,只有ie识别
_bottom /**/: -3px;
空格+/*/是ie 5.x独有的
blog Web标准化交流会 WEB标准群:23783439

使用道具 举报

goos 

锅巴三月三

荣誉管理 手机认证 

帖子
2031
体力
3739
威望
15
居住地
北京市 通州区
发表于 2006-7-24 12:57:14 |显示全部楼层

 提示:您可以先修改部分代码再运行


[ 本帖最后由 goos 于 2006-7-24 13:03 编辑 ]

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 10:03 , Processed in 0.198946 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部