Zeal Blog - 泽欧里
WWW Zeal Blog
梦想 就像鸡蛋
要么孵化 要么臭掉

关于Blog顶部的滚动导航条代码

Posted by zeal on 2006-09-13 17:13 , 9936 characters |  + 2 - 0   English
转载请保留本行原始链接信息 : http://www.zeali.net/entry/432 MADE 1n ZEAL
标签 ( WebDev ):  ,  , 
不少朋友通过各种方式问我要 Blog 顶部的滚动导航菜单的代码。其实也没什么特别的,但既然有需求,我就还是把这部分代码整理出来,供大家参考。附加冰男所要求的浮动在窗口底部的代码。

代码可以运行于 IE / Firefox / Opera 下。

Updated 2006-10-18 16:37 -- 对于冰男提出的把浮动层显示在窗口的底部问题,但对于 IE 来说比较好办,但如果要同样兼容于 IE / NS / Firefox / Opera 的话,需要增加一些额外的处理代码,同时对于 Firefox 来讲那个有趣的 fixed 属性就不好派上用场了。下面是浮动层固定在浏览器窗口底部的完整示例代码,其中的差别请各位自己研究下:)

This Entry was Last Modified on 2007-05-28 14:34
对于这篇日志有什么看法?我想听听您的高见:
您也可以在页面底部的 Google Friend Connect 工具栏进行评论,体验更好的互动交流 »
首先为了证明您不是没有思想的机器Spammer,请告诉我 4 + 8 =
然后任选以下两种方式之一告诉我您的身份:
1. 使用您的 OpenID
2. 使用传统留言格式
(必填) 名字
如何称呼您?
(选填) URL
在此填写您的 Blog / Homepage 的地址,我将非常乐于访问
(选填) Email
Email地址将在经过防SPAM处理后显示在页面。如果您不希望公开自己的Email,请略过此栏
并写下您的见解:
(由于需要进行SPAM过滤,如果评论提交速度慢请耐心等待)
(所有URL都会加 nofollow 标记,保证不被搜索引擎收录,请SEOers不要白费力气)
记住我?

  如何进行评论                   当有新回复时给我发送邮件通知
除了 <b> 和 <i> 之外,其他的HTML标签都将从您的评论中去除. URL 或 Email 地址会被自动加上链接.
当您点击发表或者预览之后,系统会自动保存您此次评论的内容,以便当网络原因发表失败时直接按Ctrl-V重新粘贴上次评论内容。
注意:快捷键及自动拷贝功能仅对IE浏览器有效。
15 条评论:
- mei美 () (link) 于 2006-09-13 17:59
谢谢提供。可以用上了。
- Gavin (link) 于 2006-09-14 13:46
哈哈,不错,不错!
- kevin () (link) 于 2006-09-17 15:16
同样的 我看到有滚动导航栏加在下面的 在那里变动一下呢?
- zeal (link) 于 2006-09-18 01:49
只需要修改reposzealNavigatorBar把导航栏移动到特定的位置即可。
- ralf () (link) 于 2006-09-19 10:18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t..
你好,想问问以上的这些代码起什么作用,是不是类似于一个程序/代码集的意思?
因为有些javascript代码有这些内容和没有的时候效果不同。
- zeal (link) 于 2006-09-19 11:21
是的。由于历史原因,xhtml的语法有不同的版本,有些版本是不向下兼容的。定义了DOCTYPE就是告诉浏览器用什么标准来解析页面内容。
- liveonnet (link) 于 2006-09-19 14:59
好玩的东东,等有机会再用,收藏了,谢谢!@
- ahu2006-10-08 17:53
友情报告一下:也可以运行于最新版的opera下!
- 冰男 () 于 2006-10-15 04:54
请你说一下这个代码,怎么才能让它改放在底部好吗?要怎么修改?请教了!
- 冰男 () 于 2006-10-15 04:58
看了您的上面说明:只需要修改reposzealNavigatorBar把导航栏移动到特定的位置即可。可是具体要改哪里还是不懂!请您指教了!
- zeal (link) 于 2006-10-18 16:44
to 冰男: 代码贴出来了,具体的差别自己研究吧:)
- 冰男 () 于 2006-10-19 16:28
感谢zeal,看到回答,真的令我感动不已!还有个问题,就是您提供的底部代码,打开后,默认的还是在顶部,瞬间再回到底部的,我把里面的top英文逐个替换成底部的英文,都没有用,唉,汗,见笑了!
- zeal (link) 于 2006-10-20 09:35
那是因为浮动层缺省的css样式里面设置了初始位置:
#zealNavigatorBar {
position: absolute;
z-index: 100;
width: 760px;
height: 32px;
line-height: 32px;
top: 0px;
left: 0px;
padding: 0px;
margin: 0px;
border-bottom:1px solid #646465;
background-color: #C0C0C3;
}
你可以把它先设置成 display:none; 然后在reposzealNavigatorBar的时候再显示出来。
建议你先把css/dhtml/javascript的基础多了解一些。否则别人写给你的代码永远只是让你ctrl-c,ctrl-v的东西,而不是自己的东西。
- 冰男 () 于 2006-10-20 15:39
嗯,谢谢zeal指导!
- 冰男 () (link) 于 2007-09-12 08:44
我又来了,突然想起这里,特来表示感谢,我把代码转载到"找找社区"里了,留作备用,谢谢!
日志存档
2009年
2008年
2007年
2006年
本 Blog 原创内容
遵循以下授权:

Creative Commons
(创作共用) CC

署名-非商业性
-相同方式分享
Zeal Blog 基于
Powered byPivot - 1.24.1: 'Arcee'
Pivot1.24.1
开发
Launched @
2005-04-27
 里,居也。——《说文》    里,邑也。——《尔雅》。李注:“居之邑也。”RSS Feed (Entries) | Back To Home | All Links | zbird.com | 沪ICP备05024379号