snazzy border menus 上下TAB菜单 - 狼客门

snazzy border menus 上下TAB菜单 - [代码]

2008-12-04

Tag：代码网页设计 js css 菜单

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
 http://unnet.blogbus.com/logs/32145534.html

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效,无图片圆角TAB菜单.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Stu Nicholls | CSSplay | Another snazzy menu</title> <style type="text/css"> #outer {display:block; position:relative; background:#eee; padding:2em; text-align:center;} #outer h2 {margin-bottom:1em;} #navigation {background:transparent; margin:0 auto; height:3em; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } #navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;} #navigation li {display:block; float:left; margin:0 1px;} .snazzy {background:transparent;} .snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;} .b1, .b2, .b3, .b4 {display:block; font-size:1px; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } .b1, .b2, .b3 {height:1px;} .b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;} .b1 {margin:0 5px; background:#fff;} .b2 {margin:0 3px; border-width:0 2px;} .b3 {margin:0 2px;} .b4 {height:2px; margin:0 1px;} .boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;} a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;} a.menu:hover {background:transparent; cursor:pointer;} a.menu:hover span {padding-top:10px; background:#888;} a:menu:hover b {background:#888;} .red {background:#c00;} .orange {background:#f90;} .yellow {background:#b8b800;} .green {background:#090;} .blue {background:#00c;} .indigo {background:#309;} .violet {background:#c6c;} .grey {background:#888;} a:hover b.red {background:#888;} a:hover b.orange {background:#888;} a:hover b.yellow {background:#888;} a:hover b.green {background:#888;} a:hover b.blue {background:#888;} a:hover b.indigo {background:#888;} a:hover b.violet {background:#888;} .active {padding-top:10px; background:#888; cursor:default;} #navigation2 {clear:both; background:transparent; margin:0 auto; height:3em; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } #navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;} #navigation2 li {display:block; float:left; margin:0 1px;} .pad {display:block; height:1em; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;} a.menu2:hover {background:transparent; cursor:pointer;} a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;} a.menu2:hover .pad {height:0.2em;} </style> </head> <body> <div id="wrapper"> <div id="info"> <h2>More snazzy border menus</h2> <div id="outer"> <div id="navigation"> <ul> <li> <a class="menu" href="#nogo">item #1 </a> </li> <li> <a class="menu" href="#nogo">item #2 </a> </li> <li> <a class="menu" href="#nogo">item #3 </a> </li> <li> <a class="menu" href="#nogo">item #4 </a> </li> <li> <a class="menu" href="#nogo">item #5 </a> </li> <li> <a class="menu" href="#nogo">item #6 </a> </li> <li> <a class="menu" href="#nogo">item #7 </a> </li> </ul> </div>  <h3>TAB DOWN</h3> <h3>TAB UP</h3> <div id="navigation2"> <ul> <li> <a class="menu2" href="#nogo">item #1 </a> </li> <li> <a class="menu2" href="#nogo">item #2 </a> </li> <li> <a class="menu2" href="#nogo">item #3 </a> </li> <li> <a class="menu2" href="#nogo">item #4 </a> </li> <li> <a class="menu2" href="#nogo">item #5 </a> </li> <li> <a class="menu2" href="#nogo">item #6 </a> </li> <li> <a class="menu2" href="#nogo">item #7 </a> </li> </ul> </div>  </div>  </div>    </div>  </body> </html>
Via:lanrentuku

历史上的今天：
抓色小猫-绿色屏幕抓取软件 2008-12-04
RGB色彩对照表 2008-12-04
中国传统色彩名录 2008-12-04
超漂亮的仿MAC的CSS菜单 2008-12-04
完全用CSS实现的中英文双语导航菜单 2008-12-04

随机文章：
完全用CSS实现的中英文双语导航菜单 2008-12-04
cssplay实用css代码精选-靠边的隐藏菜单（网页设计js,css代码特效） 2008-12-02
中国传统色彩名录 2008-12-04
超漂亮的仿MAC的CSS菜单 2008-12-04
鼠标移过放大的JS动态菜单 2008-12-04

收藏到：Del.icio.us

引用地址：

发表于22:53:41 | 编辑 | 继续话题 | 转发 | 分享　0

<< 完全用CSS实现的中英文双语导航菜单 | 首页 | 超漂亮的仿MAC的CSS菜单 >>

狼客门

snazzy border menus 上下TAB菜单 - [代码]

2008-12-04

历史上的今天：

随机文章：

目录

最近更新

狼 客 门

snazzy border menus 上下TAB菜单 - [代码]

2008-12-04

历史上的今天：

随机文章：

目录

最近更新

狼客门