一、导航条效果预览

代码演示：photoshop+css打造个性横向导航菜单代码

代码下载：本地下载

二、导航条设计思路

1.一般网页宽度为900-980px，导航条高度38-42px间。下设首页、产品展示等8个子菜单，每个子菜单116px，导航条两边为圆弧形，左右各8px.

2.导航条对首页与最后一个子菜单作特殊效果处理，即背景色有所区别，体现个性化。

3.导航条有鼠标经过与当前选择子菜单特效，做一个图片。

三、导航条psd制作与切片

1.新建一600*200的背景为白色的文档，设置前景色为#4b4b4b,新建一图层1,用圆角矩形工具，半径为5px,画一个圆角矩形，宽度为500px左右，高度为40px。如下图1所示.注意高度要算准确，一般38-42px均常见。

2.对刚才那个新建的形状图层，执行“栅格化图层”命令，将其更名为“navbg”.如图2所示。

对该层执行“滤镜-杂色-添加杂色”，设置如下：数量2%，平均分布，单色。

3.打开navbg图层样式，设置如下：

（1）投影设置；（2）外发光设置；（3）内发光设置；（4）渐变叠加设置；（5）描边设置；

此时效果图如下：我用放大镜放大了一倍，让大家看清楚。

注：上述内发光设置中的不透明度数值与大小，大家自己可设置，主要目的是设置清楚，矩形四周的边框线，如上图所示。