当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css 背景图片定位在菜单效果中的应用实例

CSS样式表
分页显示之超级提速版
兼容多浏览器实现半透明(Opera ie firefox)
解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
utf8和unicode编码究竟是什么关系？有何区别?
XHTML下css+div布局总结 超强推荐
在IE下拖动滚动条时border消失的解决方法
CSS中常用的单位
有关表格边框的css语法整理(1)
中文排版CSS心得
一个针对IE7的CSS Hack
css也疯狂! 用background 插入flash播放器
如何解决下拉菜单被flash覆盖的问题
网页中关闭IE的图像工具栏和XP主题
解决IE升级后Flash线框问题
em px的关系
在iframe中隐藏横向滚动条的方法大全
Iframe自适应其加载的内容高度
固定右栏宽度, 左栏内容先出现同时自适应宽度的布局
IE Bug--浮动对象外补丁的双倍距离的解决方法
解决IE7以下版本不支持无A状态伪类的几种方法

No. « 33 34 35 36 »

技术文章搜索

关键字

CSS样式表 中的 css 背景图片定位在菜单效果中的应用实例

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 148 ::
收藏到网摘: n/a

这款菜单大家需要注意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)

div css xhtml xml Example Source Code 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;
}