QQ网站的选项卡、滑动门菜单

2024-09-05 12:19:23

字体：大中小

来源：转载

供稿：网友

来自腾讯QQ网站首页的滑动门菜单，灰色风格，简洁清新，CSS+JS实现，可以一行两列显示，自动省略多出的内容，整齐美观，值得借鉴一下。

<!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/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>滑动门、选项卡</title><script type="text/javascript"></script><style type="text/css">* { margin:0; padding:0; word-break:break-all; }body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }h1, h2, h3, h4, h5, h6 { font-size:1em; }a { color:#1F376D; text-decoration:none; }a:hover { color:#BD0A01; text-decoration:underline; }ul, li { list-style:none; }fieldset, img { border:none; }.board { width:409px; margin:50px; }.board_caption { height:27px; background:url(/jscss/demoimg/200903/tabsbg.gif) no-repeat 0 0; }.board_caption h3 { float:left; width:73px; height:22px; height:20px; padding:3px 0 4px; margin-right:1px; background:url(/jscss/demoimg/200903/tabsbg.gif) no-repeat; text-align:center; line-height:20px; font-weight:normal; cursor:pointer; }.board_caption h3 a { display:block; width:100%; }.board_caption .normal { background-position:-100px -50px; }.board_caption .current { background-position:0 -50px; font-weight:bold; }.board_content { padding:0 0 5px; border-right:1px solid #D4D4D4; border-bottom:1px solid #D4D4D4; border-left:1px solid #D4D4D4;}.board_content .normal { display:none; }.board_content .current { display:block; }.board_content ul { width:98%; overflow:hidden; padding:5px 0 0 5px; }.board_content ul li { display:inline; float:left; width:180px; height:24px; overflow:hidden; margin-left:6px; padding-left:8px; background:#FFF url(/jscss/demoimg/200903/tabsbg.gif) no-repeat 0 -88px; line-height:24px; }.board_content ul li a { font-size:14px; }</style><script type="text/javascript">function secBoard(elementID,listName,n) {var elem = document.getElementById(elementID);var elemlist = elem.getElementsByTagName("h3");for (var i=0; i<elemlist.length; i++) {elemlist[i].className = "normal";var m = i+1;document.getElementById(listName+"_"+m).className = "normal";}elemlist[n-1].className = "current";document.getElementById(listName+"_"+n).className = "current";}</script></head><body><div class="board"><div class="board_caption" id="hotinfo_caption"><h3 class="current">源码</h3><h3 class="normal">科技</h3><h3 class="normal">软件</h3></div><div class="board_content"><div class="current" id="infolist_1"><ul><li>VB远程网络监视、文件传输、消息发送实例程序</li><li>一款超强的VB网络工具箱源程序</li><li>开源指法练习打字软件VB版</li><li>Magento开源网店 v1.2</li></ul></div><div class="normal" id="infolist_2"><ul><li>ASP FSO在线文件管理、上传、编辑系统</li><li>VB托盘气泡提示控件</li><li>一款Java网络格斗游戏源码</li><li>因特达Access数据库在线管理工具 v9.0</li></ul></div><div class="normal" id="infolist_3"><ul><li>VB6写的MSSQL数据库管理工具</li><li>osFileManager PHP网站文件管理系统 v2.2</li><li>56770 Eshop 乐彼网上开店系统 v8.4</li><li>JAVA实现CLDC与MIDP底层编程的代码</li></ul></div></div></div></body></html>

上一篇：简约CSS滑动门 (Tabs)

下一篇：X-Menu 动感导航菜单