打印

蓝色理想的导航怎么用标准??

论坛的两个风格 - 默认/blue
现在都是table实现的,因为间隙必须和tab对齐,这样就形成了 表格排版
如果特别的 用div实现 怎么办??


新风格table样式点击下面的地址察看
http://bbs.blueidea.com/?styleid=1&sid=EjU8s9
上海一超新颖线下创意项目寻合作。
类似下来菜单的制作就很容易实现,可是现在二级导航偏偏天各一边就很为难了,就是效果做出来也很难符合语义,结构也不够好!

我勉强做了一个,ie和其他浏览器用hack给达到视觉效果一致了,那些激活的链接效果使用背景图就可以实现。
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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 style="clear:both;"
</div>
</body>
</html>


 提示:您可以先修改部分代码再运行
greengnn's space W3C技术资料 WEB标准群:46077068 西安BI会员群:63970757
IE 5.5+和Opera 9下测试正常

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

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

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处
谢谢了 不过那个高光部分没能实现
greengnn的 那个active的按钮没能和子菜单连接起来
winsteps朋友的那个子菜单 下面没有一个高光

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

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

 提示:您可以先修改部分代码再运行
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
上海一超新颖线下创意项目寻合作。
那个用背景图片实现就可以!
greengnn's space W3C技术资料 WEB标准群:46077068 西安BI会员群:63970757

TOP



 提示:您可以先修改部分代码再运行
没有任何图片
ie5.0+,fx 1.5+,opera 9+
本帖最近评分记录
  • 蓝色 威望 +1 我很赞同 2006-7-20 20:18

TOP

不错不错  受教了 `~~~

TOP

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

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

上方的一行,则是站点导航,功能上是蓝色这种效果,但操作上却又是鼠标滑过显示级联菜单的,点击主菜单时,可以发生跳转进入相关站点首页,而点击级联菜单中的链接则直接进入该站点的相应栏目;一个级联菜单可以再包括子菜单,可以直达细节页面.这样一来,IE里面导航仍就那么块地方,在DW里面可是硕大无比:D
缘至而来,缘尽而散,无谓付出与索取。蓝色珍重!

TOP

看来真是高手云集,学习一下

TOP

引用:
原帖由 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 ...
还是需要使用 负数.. 果然和我之前想的一样
我之前认为参数设置为 负数的兼容性不好 就放弃了这个想法 而采用单独的一个绝对定位的层来表现高光.
上海一超新颖线下创意项目寻合作。

TOP

高手效率是高啊 解决了这个问题
drawer.hellowind.com

TOP

要改版了?
很期待!

TOP

引用:
原帖由 feng4ever 于 2006-7-20 11:46 发表

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

TOP

终于搞定了 不过
_bottom /**/: -3px;
是为谁准备的呢??
加上这个东西以后 IE5 稍微出现了一点问题 去掉反而正常了

 提示:您可以先修改部分代码再运行
上海一超新颖线下创意项目寻合作。

TOP

_bottom /**/: -3px;

是为ie5准备的

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

TOP

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


 提示:您可以先修改部分代码再运行
通过了ie5.5 ie6 ff1.5 但是下面在细节地方有差异,ff下面1,2级之间还是被截断了。

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

 提示:您可以先修改部分代码再运行
大家可以改变一下body 中id的值,index1-index10可以切换到其他相关栏目,这样导航就可以单独提取出来了。
本帖最近评分记录
  • 蓝色 威望 +1 精品文章 2006-7-20 20:19
  • feng4ever 威望 +2 精品文章 2006-7-20 20:06
流星…………

TOP

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

<div id="wrap">
       <div id ...
强烈支持!!!!
更改页面 只要更改 body的 id标签就可以了...

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

[ 本帖最后由 feng4ever 于 2006-7-20 20:25 编辑 ]
上海一超新颖线下创意项目寻合作。

TOP

分解一下
_bottom: -3px;  
为ie准备的,只有ie识别
_bottom /**/: -3px;
空格+/*/是ie 5.x独有的
greengnn's space W3C技术资料 WEB标准群:46077068 西安BI会员群:63970757

TOP



 提示:您可以先修改部分代码再运行
[ 本帖最后由 goos 于 2006-7-24 13:03 编辑 ]

TOP