CSS制作水彩画风格的导航栏

CSS制作水彩画风格的导航栏

• on 03-16
• 213 viewed
• 6 Comments 

很多天前我教大家利用Photoshop设计一个水彩画风格的导航栏,今天我将一步一步演示给大家看如果利用上期教程设计的图,使用CSS来制作一个导航栏.并且还会涉及到Photoshop的切图技巧,是学习网页制图与CSS的好教程.
在线演示
下载ZIP文件

概览

以下就是我们这个教程所需要用到的图片，如果你没有的话，可以从上面下载的压缩包里得到.

1.主背景

打开PSD文件,然后把“文字”层组隐藏（点击图层左边的小眼睛）.然后保存为main-bg.jpg(eddie提醒:较好的方法是点击菜单栏的”文件-存为Web和设备所用格式”，这样将使图片体积减小)

2.按钮图

把”背景”层隐藏只留下文字层可见,现在如下图所示在home上画一个矩形选区,接着在菜单栏点”编辑-拷贝合并(Shift+Ctrl+C)”

然后创建一个新文件，注意尺寸应该跟刚才的矩形选区一样大（如果不知道多大，请打开”窗口-信息”).
接着把刚才复制的图层粘贴在新画布里,接着点”图像-画布大小”,把高度改为原高度的2倍,如图,并点击下方的”向下箭头”.

接着在粘贴一次那个HOME图层,并把位置调整到上方.接着把HOME周围的边框用”橡皮擦”擦掉.

这就是我们最后要的效果,按钮的大小就是刚才那个选区大小,当鼠标移上按钮的时候,就会变成有边框的那个HOME.

重复移上步骤知道你拥有其他的按钮.(eddie提醒:如果保持每个按钮一样大会比较方便后续的制作).

3.HTML代码

注意到我们使用的是无序列表ul来制作导航,ul的id是menu,并且每个li都有一个class.一个空span标签是为了实现鼠标移上去的效果.代码如下:

<ul id="menu">
<li><a class="home" href="#">Home </a></li>
<li><a class="about" href="#">About </a></li>
<li><a class="rss" href="#">RSS </a></li>
</ul>

4.CSS代码

#menu的CSS
把所有margin与padding重置为0,在这里最主要就是设置position:relative;以便后面利用绝对定位来布局按钮

#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是因为span平时是不需要显示的,知道鼠标移到按钮上

#menu span {
  display: none;
  position: absolute;
}

#menu a
设置text-indent: -900%;的作用是使html的文字移到用户看不见的地方（但是搜索引擎蜘蛛会看到）.

#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}

#menu a:hover
当鼠标移上去时候背景图定位到bottom

#menu a:hover {
  background-position: left bottom;
}

#menu a:hover span
当鼠标移上去时候,让span标签显示出来(从none到block)

#menu a:hover span {
  display: block;
}

#menu .home
设置按钮的尺寸与背景图

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}

#menu .home span
这里设置span的背景图,也就是鼠标移上去要显示的样子,并注意top属性中20前面是一个负号.

#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about

#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

#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;
}

全部CSS如下

#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;
}

完成了

你可以预览我做的导航，但是这个导航栏在IE6下有BUG,那就是span元素无法显示出来，如果你要修正这个BUG，那么你需要使用javascript.

英文原文:http://www.webdesignerwall.com/tutorials/advanced-css-menu/
转载请注明来自eddieYang’s creative