时间:2021-05-08
这款菜单大家需要注意HOVER状态下背景图片定位发生了变化,从而实现了这样的效果。
本实例是一位国外的朋友所写,不进行任何翻译,直接发出来,大家可以偿试阅读,如果遇到困难可以求助于翻译软件。
不断的提高自己的英文阅读能力也是我们一直所提倡的,让我们一起努力吧!
Overview
Here are the required graphics to assembe the menu
1. Main background
Open the Photoshop file. Turn off the menu text Layer Group and save the main background as menu-bg.jpg.
2. Button graphics
Turn off the background Layer Group and leave only the menu text layers visible. Make a rectangle selection cover the "home" item, go to menu Edit > Copy Merged (Cmd + Shift + C).
Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Paste the "home" graphic in the new file. Go to menu Image > Canvas Size, adjust the image height x 2 (58 + 58 = 116px). Duplicate the home graphic layer and align it to the bottom. Erase the highlight strokes in the upper layer.
Here is how the hover effect will work. We will set the link button to 144 x 58px, when mouseover, we will shift the background image from top to bottom.
Repeat this step for the other buttons. You should have the follow graphics:
3. HTML source
When you are done with the graphics, let’s start coding. Start with an un-ordered list <ul>.
● note there is an id="menu" assigned to the<ul> tag
● an unique class name assigned to each link <a>
● an empty <span> tag (the purpose of this is to make the mouseover effect)
Example Source Code [www.52css.com]<ul id="menu">
<li><a href="#" class="home">Home <span></span></a></li>
<li><a href="#" class="about">About <span></span></a></li>
<li><a href="#" class="rss">RSS <span></span></a></li>
</ul>
#menu
Reset the menu to no padding, no margin, and no list-style. Specify the width and height same dimension as the menu-bg.jpg. Then attach the menu background image. The key point to remember here is set the position property to relative.
Example Source Code [www.52css.com]#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span
Specify the span element to display:none (so they will be invisible by default). Specify position:absolute, so we can place the mouseover GIF image on exact position.
Example Source Code [www.52css.com]#menu span {
display: none;
position: absolute;
}
#menu a
The key point here is the text-indent property. We specify the text-indent property with a negative value (-900%), so the text will be hidden.
Example Source Code [www.52css.com]#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover
When mouseover the link, we want to shift the background image from top to bottom.
Example Source Code [www.52css.com]#menu a:hover {
background-position: left bottom;
}
#menu a:hover span
When mouseover the link, we want the span element to display:block.
Example Source Code [www.52css.com]#menu a:hover span {
display: block;
}
#menu .home
Specify the width, height, and background image. Since we already specified all <a> element postition:absolute in previous step, now just say where the .home button should be by specifying the left and top property.
Example Source Code [www.52css.com]#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span
Here we are specifying the width, height, background, and position of the span element of .home (mouseover GIF image)
Example Source Code [www.52css.com]#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about
Copy the .home rules and rename them to .about. Now just change the width, height, background, left, and top property.
Example Source Code [www.52css.com]#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss
Repeat this step for .rss
Example Source Code [www.52css.com]#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
All in one:
Example Source Code [www.52css.com]#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了CSS基于单张背景图实现自适应宽度的圆角菜单效果代码。分享给大家供大家参考。具体如下:这是一款基于单张背景图片实现的CSS圆角菜单,菜单项的背景可
IE6下CSS背景图片闪烁的Bug(ie6下的背景图片缓存问题)IE6下的背景图片每次使用都会重新发送请求(非本地),连一个hover效果时候同样的背景图片仅仅
本文实例讲述了纯css实现蓝色圆角效果水平导航菜单代码。分享给大家供大家参考。具体如下:这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实
本文实例讲述了CSS3实现银灰色动画效果的导航菜单代码。分享给大家供大家参考。具体如下:这是一款使用CSS3技术实现的导航菜单,欢迎大家参考,使用了几张背景图片
对于图片,首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样,那么就从CSS控制背景图片讲起吧。定义和用法background-im