用css3实现一个苹果风格的导航菜单

这是apple.com的很漂亮的导航栏：

如果用Firebug仔细研究一下，就会发现这个导航栏的实现用了4张图片。如下图：

现在随着css3的脚步越来越近，我在想用光用css3能不能实现上面的效果呢？下面就是我用纯css3实现的导航，一点都没有用到图片。

当然肯定跟原版的有些差距，我很难把握原来的渐变颜色，但是基本的风格还是一直的。

 

实现过程

首先，html代码：

<ul id='nav'>
   <li><a href='#'>Store</a></li>
   <li><a href='#'>Mac</a></li>
   <li><a href='#'>iPod</a></li>
   <li><a href='#'>iPhone</a></li>
   <li><a href='#'>iPad</a></li>
   <li><a href='#'>iTune</a></li>
   <li class='last'><a href='#'>Support</a></li>
</ul>

就是利用这样一段简单的代码，加上神奇的css3，就能实现apple style了。

然后：样式化 

分析一下苹果网站的那个导航栏，都有哪些元素？圆角，渐变，阴影，文字内嵌的效果，分隔符也有点外发光的效果。这些效果大部分都可以用css3来实现。

先给出整个css的代码：

        <style>
            #nav{
                margin:100px auto;
                width:850px;
                height:40px;
                /*渐变*/
                background:-moz-linear-gradient(-90deg,#cacaca,#9f9f9f);
                background:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#9f9f9f));
                /*圆角*/
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                /*阴影*/
                box-shadow:#b1b1b1 1px 1px;
                -moz-box-shadow:#b1b1b1 0 1px 2px;
                -webkit-box-shadow:#b1b1b1 0 1px 2px;
            }
            #nav li{
                float:left;
                /*padding:0 40px;*/
                width:110px;
                text-align:center;
                list-style:none;
                height:40px;
                line-height:40px;
                border-right:1px solid #999999;
            }
            
            #nav li.last{
                border:none;
            }
            
            #nav a{
                text-decoration:none;
                color:#262626;
                font-weight:600;
                font-size:13px;
                font-family:"Segoe UI",Helvetica,sans-serif;
                /*文本阴影*/
                text-shadow:#e8e8e8 0 1px 1px;
            }
        </style>

第一步： 给ul和li设置一下样式，先形成导航栏的基本样子。

#nav{ margin:100px auto;  850px;  height:40px;}    (#nav是ul的id)

#nav li{ float:left; 110px;  text-align:center; list-style:none; height:40px; line-height:40px;}

#nav a{ text-decoration:none; color:#262626; font-weight:600; font-size:13px; font-family:"Segoe UI",Helvetica,sans-serif;}

因为我们是根据苹果的风格来的，所以在字体，字号的设置上也是以接近苹果风格为目标。

 

第二步：实现渐变颜色效果

#nav{

　　...

　 background:-moz-linear-gradient(-90deg,#cacaca,#9f9f9f);
    background:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#9f9f9f));

　 ...}

如果这些css3语法不太清除的话可以参考这里：你应该知道的基本的css技巧  或是 css技巧

通过-moz-和-webkit-可以看出来，这个效果只能在firefox，chrome，safari中实现，至于ie，只能期待ie9了。

第三步：实现圆角效果

#nav{

　　...

　　-moz-border-radius:5px;
     -webkit-border-radius:5px;

      ...}

第四步：实现导航的阴影

#nav{

　 ....

    box-shadow:#b1b1b1 1px 1px;
    -moz-box-shadow:#b1b1b1 0 1px 2px;
    -webkit-box-shadow:#b1b1b1 0 1px 2px;}

第五步：文字内嵌效果

#nav a{

　　....

　　text-shadow:#e8e8e8 0 1px 1px;

　　...}

第六步：分隔线

#nav li{

　　...

　　border-right:1px solid #999999;}

秉着不写没用的代码的原则，我这里用的是给li加右边框。这样就不可能实现像apple.com的那样有点微微外发光的效果了。我认为为了性能，牺牲一些视觉效果是合算的。但是要想实现苹果那样有点立体感的效果，我觉得可以通过给给li元素加背景图片实现。

这样一个css3版的苹果风格导航栏就完成了!

这样的实现跟原版还有个很大的区别，就是没有翻转效果。但是这个效果实现了，翻转效果也就不难了，同样的道理嘛