相关文章
北京网站制作解决Dreamweaver不支持中文文件名方法
企通互联详细讲解HTML网页设计中关于字体的设计
网站建设用Javascript刷新框架子页面的七种方法
北京网站建设Photoshop巧变单眼皮为双眼皮
北京网站建设Dreamweaver CS3集成Spry效果试用
企通互联网页设计基本配色参考色谱——热带
北京网页设计色彩系列教程(2)：色系和色调
北京网站设计RSS 在线阅读器开发实例
网页设计网站策划之网站改版的几点建议
北京网站制作应用DIV+CSS编码时容易犯的一些错误
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网站设计网站设计CSS实现导航条图片的翻转菜单
北京网站设计网站设计CSS实现导航条图片的翻转菜单
如果用传统的方法制作这个翻转菜单，至少需要把图片切成10块，还要加上JS代码，在图片按钮上再加行为，现在完全用CSS来实现，图片只要一张，见下图：
Www~Chinaz~com
北京网站建设 CSS代码： Chinaz^com
#imgmenu{ 网页设计
width: 450px; 网页设计
height: 25px; /*高度是背景图片的一半*/ 北京网页设计
background: url(/imagelist/06/43/473648jpj0j1.gif); 网站建设
北京网站制作 北京网站设计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:hover,#activeh{ 网站设计
background: url(/imagelist/06/43/473648jpj0j1.gif) 0 -25px; 网页设计
/*翻转时背景图的位置，左边0px，顶部-25px, 企通互联
背景图的下半部分，下同*/ 网站制作企通互联
} 北京网站建设
#imgmenu li#about a:hover,#activea{ 网站建设
background: url(/imagelist/06/43/473648jpj0j1.gif) -90px -25px; 网站制作
/*第二个菜单的位置距左边90px， 网页设计
每个菜单的宽度是90px*/ 北京网站设计
} 企通互联
#imgmenu li#pro a:hover,#activep{ 网站设计
background: url(/imagelist/06/43/473648jpj0j1.gif) -180px -25px;
} 网站建设
网站设计#imgmenu li#faq a:hover,#activef{ 网站制作
网页设计background: url(/imagelist/06/43/473648jpj0j1.gif) -270px -25px; 北京网站设计
} 北京网站制作
#imgmenu li#contact a:hover,#activec{ 网站制作
background: url(/imagelist/06/43/473648jpj0j1.gif) -360px -25px; 北京网页设计
}
Chinaz
<ul id="imgmenu"> 网站制作
<li id="activeh"><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>
可以在LI内套入SPAN元素，加入文本链接，在风格中设SPAN不可见。