下载信息  [文件大小：38.45 KB 下载次数： 次]

点击下载文件:下拉菜单

看到论坛有不少人问下拉菜单怎么做，不由得想起了以前刚进论坛的自己，觉得有必要写点什么来，因此费了点心思做了一个简单的教程，希望能对一些朋友有所帮助。

【一】PHOTOSHOP作图（这步可跳过）

     1.Ctrl+N，新建文档，设置高宽为800*28[假设导航条的高度和宽度是这么多，下面实际做的是1000*28]。

     2.工具面板——>图形工具(U)——>圆角矩形,设置半径为5px,然后在文档中画下图形，拉满。

     3.双击该形状图层，设置样式选项:

         (1)渐变叠加——>线性。颜色从上大小为#facdac，#f67a0d，#ff6e02；

         (2)描边——>内部——>大小2px——>填充选项设为线性——>迸发状，然后将颜色渐变从外到内设为#ff6c00，fff0df。

     4.Ctrl+M，点击形状图层，得到形状图层的选区，然后点工具面板——>选区（M），将选项改为“与选区交叉”，随后拉一个矩形选框，纵向位置为居中靠上，横向拉满，随后得到与圆角矩形选区交叉的部分，紧接着，在菜单选项中找到——>选择(s)——>修改——>收缩2px,将得到的选区转换成图层，并填充颜色为#e9771a，这样一个简单的导航条图形就制作成功了。（见附件中的PSD文件）。  

【二】切图（如何切，很重要）

      在切图时经常要考虑到的几个问题是：

      1.如何切可以使用更小的图片；

      2.如何切能使得代码的灵活性更大；

      3.如何才能和要实现的某些特殊效果对接起来。

      依据以上原则，对于一个圆角矩形的导航条，我们通常可以有三种切法：

      1.整切——就是整个切成一个背景图片，优点是省事，快速，缺点是缺乏灵活性。

      2.分切——分成左中右三部分，左右背景靠不同的标签的背景实现，中间部分通过平铺实现，优点是比较灵活，（因为中间可变，导航条整长就不受限制了）可能使得图片容量变小，缺点是费时一点。

      3.定位切——配合页面其它部分的背景图，放置在一整张图片中，如腾讯，网易等网站的首页就是这样做的（这样做的好处相当明显，它可以极大地减少整个背景图片的大小，使得页面在渲染时能够变得十分快速，唯一的缺憾是对于平铺类型的背景图无法实现，只能将整个平铺图片都放在背景图中，增大了图片的大小和占用空间。呵呵，有点跑题了）。

  限于需要，我这里采用的第二种。

【三】构造代码  

     构造好的代码将极大的减省你做出效果的复杂性，所以在这个方面你应该多学习，如果你将CSS知识和JS知识掌握得很好，你就能写出十分简洁又明了的代码了。好了，我这里简单的把代码粘出来。

如此，一个简单的二级下拉菜单就制作成功了。

PS:如果你有使用jQuery库，js的书写就更简单了，而且你还能实现各种不同的绚丽效果。

很好狠强大

看看

代码这么多呀，对我来说，难度真的很大呀

分享一下