本页内容是《css3实现仿苹果风格的导航菜单》同时我们还提供济宁地区的网站建设,百度,雅虎,google的推广,点金,商友,等营销软件
请输入关键字:

标题搜索 内容搜索  

你现在所在的位置->首页->html/css->css3实现仿苹果风格的导航菜单

css3实现仿苹果风格的导航菜单

时间:[2013-1-18 17:26:20]     作者:请作者尽快与我们联系。


[提示:你可先修改部分代码,再按运行]

今天和大家分享apple.com的导航菜单是如何实现的,先看一下apple.com导航菜单,是不是很漂亮!
效果如下图:css3实现仿苹果风格的导航菜单

首先用Firebug仔细研究一下,就会发现这个导航栏的实现用了4张图片。如下图:css3实现仿苹果风格的导航菜单现在随着css3的袭来,我们是不是可以考虑一下CSS3能不能实现上面的效果呢?答案那是必须可以的!我们完全可以用CSS3完成上面的效果并且不用一张背景图片。
首先,html代码:

  1. <ul id='nav'>
  2.    <li><a href='#'>Store</a></li>
  3.    <li><a href='#'>Mac</a></li>
  4.    <li><a href='#'>iPod</a></li>
  5.    <li><a href='#'>iPhone</a></li>
  6.    <li><a href='#'>iPad</a></li>
  7.    <li><a href='#'>iTune</a></li>
  8.    <li class='last'><a href='#'>Support</a></li>
  9. </ul>


一段简单的html代码搞定,下面我们就加加上神奇的css3来实现apple导航菜单,首先我们分析一下苹果网站的那个导航栏,都有哪些元素?圆角,渐变,阴影,文字内嵌的效果,分隔符也有点外发光的效果。
这里先给出整个css的代码,然后再做进一步的分析:
css样式表:

  1. #nav{
  2.                 margin:100px auto;
  3.                 width:850px;
  4.                 height:40px;
  5.                 /*渐变*/
  6.                 background:-moz-linear-gradient(-90deg,#cacaca,#9f9f9f);
  7.                 background:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#9f9f9f));
  8.                 /*圆角*/
  9.                 -moz-border-radius:5px;
  10.                 -webkit-border-radius:5px;
  11.                 /*阴影*/
  12.                 box-shadow:#b1b1b1 1px 1px;
  13.                 -moz-box-shadow:#b1b1b1 0 1px 2px;
  14.                 -webkit-box-shadow:#b1b1b1 0 1px 2px;
  15.             }
  16.             #nav li{
  17.                 float:left;
  18.                 /*padding:0 40px;*/
  19.                 width:110px;
  20.                 text-align:center;
  21.                 list-style:none;
  22.                 height:40px;
  23.                 line-height:40px;
  24.                 border-right:1px solid #999999;
  25.             }
  26.            
  27.             #nav li.last{
  28.                 border:none;
  29.             }
  30.            
  31.             #nav a{
  32.                 text-decoration:none;
  33.                 color:#262626;
  34.                 font-weight:600;
  35.                 font-size:13px;
  36.                 font-family:"Segoe UI",Helvetica,sans-serif;
  37.                 /*文本阴影*/
  38.                 text-shadow:#e8e8e8 0 1px 1px;
  39.             }

第一步: 给ul和li设置一下样式,先形成导航栏的基本样子。
#nav{ margin:100px auto; width:850px; height:40px;} (#nav是ul的id)
#nav li{ float:left; width: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元素加背景图片实现。注意:.last 这个类是可以用CSS3选择器完成,但然IE9以是不支持的

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

这样的实现跟原版还有个很大的区别,就是没有翻转效果。但是这个效果实现了,翻转效果也就不难了,同样的道理,你不妨也试着做一下!

【声明】本站刊载的《css3实现仿苹果风格的导航菜单》一文如果有侵害你权益的情况,请联系我们。我们将及时采取措施。
QQ:44637339 Email:just6@163.com Tel:13355163107 Lining studios

友情链接

本页内容是《css3实现仿苹果风格的导航菜单》 返回顶部
© 2001-2017 Lining studios 济宁速创科技有限公司, All Rights Reserved
 Processed Time:46.875ms