CSS实现导航条图片的翻转菜单

如果用传统的方法制作这个翻转菜单，至少需要把图片切成10块，还要加上JS代码，在图片按钮上再加行为，现在完全用CSS来实现，图片只要一张，见下图：

CSS代码:

    #imgmenu{
width: 450px;
height: 25px; /*高度是背景图片的一半*/
list-style-type: none;
padding: 0px;
margin: 0px;
}
#imgmenu li{
float: left;
}
#imgmenu li a{
display: block;
width: 90px;
height: 25px;
}
#imgmenu li#home a{
background: url(menu.gif) 0 0;
/*背景图的位置，左边0px，顶部0px,
背景图的下半部分，下同*/
}
#imgmenu li#about a{
background: url(menu.gif) -90px 0;
/*第二个菜单的位置距左边90px，
每个菜单的宽度是90px*/
}
#imgmenu li#pro a{
background: url(menu.gif) -180px 0;
}
#imgmenu li#faq a{
background: url(menu.gif) -270px 0;
}
#imgmenu li#contact a{
background: url(menu.gif) -360px 0;
}
#imgmenu li#home a:hover{
background: url(menu.gif) 0 -25px;
/*翻转时背景图的位置，左边0px，顶部-25px,
背景图的下半部分，下同*/
}
#imgmenu li#about a:hover{
background: url(menu.gif) -90px -25px;
/*第二个菜单的位置距左边90px，
每个菜单的宽度是90px*/
}
#imgmenu li#pro a:hover{
background: url(menu.gif) -180px -25px;
}
#imgmenu li#faq a:hover{
background: url(menu.gif) -270px -25px;
}
#imgmenu li#contact a:hover{
background: url(menu.gif) -360px -25px;
}

<ul id="imgmenu"> <li id="home"><a href="#"></a></li> <li id="about"><a href="#"></a></li> <li id="pro"><a href="#"></a></li><li id="faq"><a href="#"></a></li> <li id="contact"><a href="#"></a></li></ul>

CSS实现导航条图片的翻转菜单相关推荐

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul ...
[CSS]30种时尚的CSS网站导航条
[原文地址]:http://coolshell.cn/?p=562 我想,大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计.这些导航条基本上来说都是用CSS来做的.这里,我们将向你介绍几种 ...
CSS实现导航条Tab切换的三种方法
前面的话导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法布局根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效 ...
用css实现扑克牌，图片的翻转效果
用css实现扑克牌,图片的翻转效果话不多说,直接上代码! 1.实现商品图片的翻转以及信息的展示(下面代码仅是个人想要效果的HTML代码,所有的class名称可根据自身需求进行改动) <!doc ...
HTML+CSS实现导航条
HTML+CSS实现导航条: 点我进群一起学习交流!(群里有许多的学习资料,我做过的一些网页我都上传在群里了,需要的直接下载就可以了) QQ群:722384575 1.HTML部分源代码如下 ...
css修改导航条样式
css修改导航条样式近期由于工作需要要修改table表格导航条样式. 本人特整理出相关代码,以及最后效果,供各位小伙伴参考. 具体代码如下: .xp-table-content ::-webkit- ...
织梦CMS v5.7 完美实现导航条下拉二级菜单
转载请标明是引用于 http://blog.csdn.net/chenyujing5678 欢迎拍砖! 一.引言好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按 ...
HTML+CSS实现导航栏二级下拉菜单图书案例
一.效果图二.内容.要求学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分法)进行分门别类,其中上面括号中的类别为 ...
css+div导航条样式
用双竖线做的效果 <head> <meta http-equiv="Content-Type" content="text/html; charset= ...
1.angular html+css+js导航条点击样式修改，加跳转页面
1.html页面代码如下: <div class="main-menu" id="L1" (click)="Tab(1)" style ...

CSS实现导航条图片的翻转菜单

CSS实现导航条图片的翻转菜单相关推荐

最新文章

热门文章