会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
海浪
博客园
首页
新随笔
订阅
管理
选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-language" content="zh-cn" /> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <style> dl { position:absolute; width:270px; height:170px; border:10px solid #eee; } dd { margin:0; width:270px; height:170px; overflow:hidden; } dt { position:absolute; right:1px; } ul { margin:0; padding:0; width:260px; height:170px; list-style:none; background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px; border:1px solid #ccc } #b { background-position:75% center } #c { background-position:75% 86% } li { width:255px; height:27px; font:12px/27px "宋体",sans-serif; white-space:nowrap; overflow:hidden; } dt a { display:block; margin:1px; width:70px; height:56px; text-align:center; font:700 12px/55px "宋体",sans-serif; color:#fff; text-decoration:none; background:#666; } dt a:hover { background:orange } </style> <head/> <body> <dl> <dt><a href="#a" title="">一个好孩子</a><a href="#b" title="">科比入党了</a><a href="#c" title="">失忆的猪猪</a></dt> <dd> <ul id="a"> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> </ul> <ul id="b"> <li><marquee behavior="alternate">·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></marquee></li> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> </ul> <ul id="c"> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> </ul> </dd> </dl> </body> </html>
提示:您可以先修改部分代码再运行
<script> // ############## SIMPLE BROWSER SNIFFER if (document.layers) {navigator.family = "nn4"} if (document.all) {navigator.family = "ie4"} if (window.navigator.userAgent.toLowerCase().match(/gecko/)) {navigator.family = "gecko"} if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1) {navigator.family = 'opera';} toplevel="4"; function riseup (box) { toplevel++; if (navigator.family == "ie4") {document.all[box].style.zIndex = toplevel;} if (navigator.family == "opera" || navigator.family == "gecko") {document.getElementById(box).style.zIndex = toplevel;} } </script> <div id="box1" style="position:absolute; background-color:#FF0000; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:4"> Howdy, this could be a neat little Tab style nav feature. </div> <div id="box2" style="position:absolute; background-color:#FF5555; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:3"> <a href="http://javascript.internet.com">JSS</a><br> <a href="http://www.javascripts.com">JavaScripts</a><br> <a href="http://www.javascript.com">JavaScript</a><br> <a href="http://webdevelopersjournal.com">WDJ</a><br> <a href="http://www.jars.com">Jars(Java)</a><br> </div> <div id="box3" style="position:absolute; background-color:#FF9999; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:2"> <a href=#><img src=http://javascript.internet.com/navigation/apple_logo.gif border=0></a><br> Third palette now with an image link. <b>This might</b> be cool. </div> <div id="box4" style="position:absolute; background-color:#FFBBBB; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:1"> Forth palette blah blah blah yada yada yada adfadf adf adf. </div> <div id="box5" style="position:absolute; background-color:#FFDDDD; padding:5; visibility:show; left:10px; top:400px; width:100; height:150; z-index:1"> Fifth palette, how many can you have? <br><br> unlimited. </div> <div id="tab1" onclick="javascript:riseup('box1');" style="cursor:hand; position:absolute; background-color:#FF0000; visibility:show; left:110px; top:400px; width:40; height:20; z-index:3"> <b>tab1</b> </div> <div id="tab2" onclick="javascript:riseup('box2');" style="cursor:hand; position:absolute; background-color:#FF5555; visibility:show; left:110px; top:425px; width:40; height:20; z-index:3"> <b>tab2</b> </div> <div id="tab3" onclick="javascript:riseup('box3');" style="cursor:hand; position:absolute; background-color:#FF9999; visibility:show; left:110px; top:450px; width:40; height:20; z-index:3"> <b>tab3</b> </div> <div id="tab4" onclick="javascript:riseup('box4');" style="cursor:hand; position:absolute; background-color:#FFBBBB; visibility:show; left:110px; top:475px; width:40; height:20; z-index:3"> <b>tab4</b> </div> <div id="tab5" onclick="javascript:riseup('box5');" style="cursor:hand; position:absolute; background-color:#FFDDDD; visibility:show; left:110px; top:500px;width:40; height:20; z-index:3"> <b>tab5</b> </div> <!-- THIS TABLE IS USED TO BLOCK THE AREA WHERE THE TABULAR NAV IS PLACED --> <script> // ################# THIS FIXES GECKO DIV PLACEMENT if (navigator.family == "gecko"){ for (x=1;x<6;x++) {document.getElementById("tab"+x).style.left = 120; } } </script>
提示:您可以先修改部分代码再运行
[
本帖最后由 marvellous 于 2007-3-26 01:52 编辑
]
左边的是导航菜单位于右侧的纵向选项卡,参见:
http://bbs.blueidea.com/viewthre ... p;page=1#pid3109176
右边的是导航菜单位于上侧的横向选项卡,参见:
http://bbs.blueidea.com/thread-2606562-1-1.html
posted @
2007-03-27 15:31
海浪~~
阅读(
289
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告