我想网

• 查看示例
• 点此下载

效果说明：当你滚动页面的时候，菜单会放大，固定于头部一起滚动。

制作教程

一、创建如下的菜单结构

1. <div id=”navi”>
2. <div id=”menu” class=”default”>
3. <ul>
4. <li><a href=”#”>首页</a></li>
5. <li><a href=”#”>jquery</a></li>
6. <li><a href=”#”>设计</a></li>
7. <li><a href=”#”>flex</a></li>
8. <li><a href=”#”>air</a></li>
9. <li><a href=”#”>ajax</a></li>
10. <li><a href=”#”>html5</a></li>
11. <li><a href=”#”>css3</a></li>
12. <li><a href=”#”>WordPress</a></li>
13. </ul>
14. </div><!– close menu –>
15. </div><!– close navi –>

这是一个菜单列表，结构上很简单，跟一般的菜单结构类似。

二、使用css3构建华丽菜单

接下来我们需要用到css3的知识来实现如demo上的菜单效果。
完整代码如下：

1. #navi {
2. height: 50px;
3. margin-top: 50px;
4. font-size:14px;
5. }
7. #menu {
8. /*背景*/
9. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
10. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);
11. /*圆角*/
12. border-radius: 5px;
13. -webkit-border-radius: 5px;
14. -moz-border-radius: 5px;
15. line-height: 50px;
16. text-align: center;
17. margin: 0 auto;
18. padding: 0;
19. }
22. ul {
23. padding: 0;
24. }
26. ul li {
27. list-style-type: none;
28. display: inline;
29. margin-right: 15px;
30. }
32. ul li a {
33. color: #fff;
34. text-decoration: none;
35. /*文字阴影*/
36. text-shadow: 1px 1px 1px #000;
37. padding: 6px 12px;
38. /*圆角*/
39. border-radius: 5px;
40. -webkit-border-radius: 5px;
41. -moz-border-radius: 5px;
43. -webkit-transition-property: color, background;
44. -webkit-transition-duration: 0.5s, 0.5s;
45. }
47. ul li a:hover {
48. background:#FFC;
49. color:#333;
51. -webkit-transition-property: color, background;
52. -webkit-transition-duration: 0.5s, 0.5s;
53. }
55. .default {
56. width: 850px;
57. height: 50px;
59. box-shadow: 0 5px 20px #888;
60. -webkit-box-shadow: 0 5px 20px #888;
61. -moz-box-shadow: 0 5px 20px #888;
62. }
64. .fixed {
65. position: fixed;
66. top: -5px;
67. left: 0;
68. width: 100%;
70. box-shadow: 0 0 40px #222;
71. -webkit-box-shadow: 0 0 40px #222;
72. -moz-box-shadow: 0 0 40px #222;
73. }

关键部分代码说明
1、给菜单添加渐变背景

1. /*背景*/
2. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
3. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);

webkit和firefox在渐变背景的使用上有出入，语法并不相同，firefox更简洁，webkit更符合标准。接下来明河详细说明下这些 参数是什么意思。
先来看firefox的语法：

1. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);

这里有四个参数，含义如下：

• 第一个参数，渐变的起始点，这里用到了简写，本来应该是 left top，火狐可以只用left，top是默认的，也就是至上向下。
• 第二个参数，起始渐变色
• 第三个参数，中间渐变色
• 第四个参数，终点渐变色

1. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));

webkit的参数比较多，含义如下：

• linear 线性渐变
• left top起始位置
• left bottom终点位置
• color-stop(0%,#8AB9EB)起始颜色
• color-stop(40%,#5C9DDC)中间颜色
• color-stop(100%,#2374C5)终点颜色

关于渐变背景的详细说明请点此。
2、给菜单容器添加圆角

1. /*圆角*/
2. border-radius: 5px;
3. -webkit-border-radius: 5px;
4. -moz-border-radius: 5px;

这个很简单，明河就不说明了
3、给菜单项加入如下样式

1. ul li a {
2. color: #fff;
3. text-decoration: none;
4. /*文字阴影*/
5. text-shadow: 1px 1px 1px #000;
6. padding: 6px 12px;
7. /*圆角*/
8. border-radius: 5px;
9. -webkit-border-radius: 5px;
10. -moz-border-radius: 5px;
12. -webkit-transition-property: color, background;
13. -webkit-transition-duration: 0.5s, 0.5s;
14. }

留意这里的文字阴影的用法。

1. -webkit-transition-property: color, background;
2. -webkit-transition-duration: 0.5s, 0.5s;

只适用于webkit浏览器，是控制背景透明度。

三、使用jquery让菜单跟随页面滚动

1. $(function(){
2. var menu = $(‘#menu’),
3. pos = menu.offset();
5. $(window).scroll(function(){
6. if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass(‘default’)){
7. menu.fadeOut(‘fast’, function(){
8. $(this).removeClass(‘default’).addClass(‘fixed’).fadeIn(‘fast’);
9. });
10. } else if($(this).scrollTop() <= pos.top && menu.hasClass(‘fixed’)){
11. menu.fadeOut(‘fast’, function(){
12. $(this).removeClass(‘fixed’).addClass(‘default’).fadeIn(‘fast’);
13. });
14. }
15. });
16. })

关键代码说明：

1. pos = menu.offset();

offset()获取菜单在当前页面的位置，返回的是一个object:{top:”XXpx”,left:”XXpx”}。

1. $(window).scroll(function(){
2. ……..
3. });

监听窗体的滚动事件。

1. $(this).scrollTop()

scrollTop()将得到滚动条的滚动距离，非常重要的一个值。

1. $(this).scrollTop() > pos.top+menu.height() && menu.hasClass(‘default’)

根据滚动距离，确定菜单是否还可见，不可见，则改变菜单的定位方式.

1. menu.fadeOut(‘fast’, function(){
2. $(this).removeClass(‘default’).addClass(‘fixed’).fadeIn(‘fast’);
3. });

给菜单加入了fixed样式：

1. .fixed {
2. position: fixed;
3. top: -5px;
4. left: 0;
5. width: 100%;
7. box-shadow: 0 0 40px #222;
8. -webkit-box-shadow: 0 0 40px #222;
9. -moz-box-shadow: 0 0 40px #222;
10. }

有二个关键的点：

• position: fixed;将其定位方式改变成固定定位
• box-shadow ：加入阴影

完毕！有问题可以给明河留言谢谢！

• 10種好用且最熱門的php函式庫
• HTML5未来发展的六大趋势
• 个人站长：小站怡情大站伤身 做门户灰飞烟灭
• 暴雪游戏设计11大法则
• 7 项 Web 开发者需要了解的新技术
• 互联网公司混的十大真相
• 归纳社交游戏的17点设计理论和技巧
• 创新工场CE0李开复：互联网创业黄金时代来临
• 程序员必须知道的几个国外IT网站
• 个人行动力≠团队执行力

发布于 2010年7月2日 ，目录 CSS, JQuery。 留言跟 pings 当前都已关闭。