任何的tab导航,都可以采用下面的方式来实现。看一下下面的Tab menu效果。
我们需要准备tab左面背景和中右部背景图片(不过我个人偏向于把中间的背景和右边的背景分开,我认为那样可以实现中部背景循环,就算文字长一米也无所谓了,不过这太夸张了,考虑中国没有哪个菜单文字会超过6个字,英文也很少有太长的tab,所以两张图片完全够用了。)以及他们的鼠标悬停时的图片。采用图片的滑动门技术,因此把图片做成一张图,如下。
css代码和xhtml代码如下:
<style type="text/css">
/*- Menu Tabs--------------------------- */
#tabs {
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
显示tab菜单左侧
#tabs a {
float:left;
background:url("tab.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
tab菜单中右侧
#tabs a span {
float:left;
display:block;
background:url("tab.gif") no-repeat right -96px;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
鼠标悬停时的图片显示,采用滑动门技术给图片定好位就行了。
#tabs a:hover span {
background-position:100% -138px;
color:#000;
}
#tabs a:hover {
background-position:0% -42px;
}
</style>
<h2>Tab Menu</h2>
<div id="tabs">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
通过这种方式,我们可以做各种自己喜欢的tab样式,只要变换一下图片就行了。
发表评论
-
PS加强网页设计中像素化细节的技巧
2009-05-13 10:12 851PS加强网页设计中像素化细节的技巧 http://www. ... -
如何在浏览器地址栏前添加自定义的小图标?
2009-05-07 17:37 3452如何在浏览器地址栏前添加自定义的小图标?你是不是记得有时在浏览 ... -
CSS属性:装饰超链接
2009-05-07 17:35 974CSS属性:装饰超链接 ※装饰超链接 网页默认的 ... -
网页收藏
2009-04-02 16:12 727http://www.cool80.com/ 搜罗精美酷站, ... -
一位CSS新手整理的CSS网页布局技巧
2009-03-31 15:44 725对CSS网页布局的技巧,可谓是名目繁多,在52CSS.com上 ... -
CSS样式的filter(滤镜效果)可控制DIV透明度
2009-03-26 23:06 1865我们可以用CSS样式的filter(滤镜效果)对HTML的一些 ... -
div+css学习网站
2009-03-26 23:05 736http://www.aa25.cn/ -
使用css设置字体的透明度及艺术字代码
2009-03-26 23:03 6020使用css设置字体的透明度及艺术字代码 2006/10/28 ... -
优秀站点的CSS导航菜单
2009-03-26 22:54 10201. http://www.alvit.de/css-sho ... -
CSS导航菜单:仿淘宝首页导航条布局效果
2009-03-26 22:49 1864一直以来,人们都认为淘宝的导航条不错,更有很多网站效仿;今天 ... -
点击出现图片大图效果
2009-03-26 22:33 903<style>#demo{overflow:hid ... -
非常漂亮的导航菜单
2009-03-26 22:30 907实际效果图: <!DOCTYPE html PUBL ... -
国内设计好站/酷站收藏类网站收集
2009-03-26 22:15 812设计站点必须要有灵感,好的灵感需要多阅读多思考,所以WEB设计 ... -
【酷站】中国互联网Web2.0 Top 100
2009-03-26 22:11 866猫扑 http://www.mop.com 和讯 h ... -
国内WEB2.0酷站赏析
2009-03-26 22:10 778RichURL在线收藏夹 * http:/ ... -
国内酷站欣赏
2009-03-26 22:07 769http://www.citycy.com/http://ww ... -
用网页技术CSS实现网页背景渐变
2009-03-26 22:01 1400用网页技术CSS实现网页背景渐变的四种代码设置。 一、从上往 ... -
三角形图标的DIV+CSS做法
2009-03-26 21:53 1165以前做三角形图标,都是做一个三角的图片,然后在css里面调用, ...
相关推荐
导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。这是tab选项卡切换的源代码,由于内容较多,所以只截取了大致的结构。其实第二个盒子...
HTML5 JQUERY css3 Tab网页选项卡,另类的滑动门导航菜单,用到了少许图片来修饰,大部分是基于CSS3技术实现的,在火狐或Chrome浏览下测试,效果更佳。
CSS多级菜单,类似TAB标签风格的两级滑动式网站菜单,风格十分简洁清新,鼠标放在一级主菜单后,二级菜单滑动切换显示,之所以我称它为TAB式菜单,是因为它和目前网页上普遍使用的TAB选项卡十分相似,其实这种菜单和...
CSS3实现Tab菜单小工具是一款外观非常简洁清新,tab选项卡的上边框有加粗的线条,让这些tab菜单按钮显得很有立体感。
一个简单的导航菜单插件,结合html5+css3技术实现,效果还过得去。
tab 选项卡 banner css js各种样式具体如:35个菜单样式、19个CSS菜单、鼠标放大镜查看图片效果、css_tab_ul菜单安装程序、让你震撼的图片展示javascript代码10款打包、19款网站常见多图片自动轮播banner源码、导航...
一款基于SVG和CSS3的动画Tab菜单插件,菜单图标使用SVG绘制而成,切换时还会产生不错的动画效果,还同时会渐变地更新页面的背景颜色,当然如果你觉得太花里胡哨,可以自行修改js代码取消背景颜色的渐变切换。
3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 6.jquery制作自动播放的TAB切换特效 7.基于jQuery简单的Tab...
JS 特效 选项卡 菜单 下拉菜单 滚动特效 相册特效等等 网页特效 素材 web div+css 3级横向导航菜单 163网盘折叠菜单 CSS下拉菜单 div显示隐藏效果 Javascrip实现相册缩略图导航的两种效果 JS 图片轮换 封装中处理...
滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以。 运行效果截图...
jQuery多选项卡图片切换是一款类似多级导航菜单的jQuery css3图片切换特效。
4种标签风格的漂亮网站导航特效,纯CSS代码实现,有圆角的菜单,也有TAB式的菜单,每一款都各有特点,用到的技术也是很普通的,主要是DIV CSS,大家看一下演示截图就明白了,4款菜单都用有GIF图片来修饰菜单效果,...
一些CSS应用实例,如:CSS 水平导航菜单、Tab菜单选项卡、度量衡计算器等
一个简单的导航栏,自带动画和光环,主要有HTML5和CSS3组成,里面有每一个盒子的注释,大小可以自定义设置宽高
基于Prototype框架制作的导航菜单,类似FLASH动画一样,在老外网站经常...本类菜单其实就像是一个TAB选项卡一样,只不过带有动画切换效果,用部分资源图片和CSS的配合实现了好看的圆角,由Prototype完成动画控制部分。
这是一款基于 jQuery 和 CSS3 的动画 Tab 菜单,拥有水平和垂直的 Tab 菜单导航效果。
64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...
3.新增效果:导航栏点击栏目右侧添加相应tab选项卡,点击已经生成过的选项卡直接跳转到该选选项卡 4.新增导航栏收缩按钮 5.修改已知BUG vip-admin Html v1.5.1.zip 更新时间:2017-03-21 1....
内容简介 1 输入年月求日 输入年月求...32 导航选项卡 导航选项卡 33 动态更换样式表 动态更换样式表 34 天气预报代码ANDiframe 天气预报代码ANDiframe 35 添加收藏和设为主页 添加收藏和设为主页 希望大家支持~~