效果链接
效果说明:当你滚动页面的时候,菜单会放大,固定于头部一起滚动。
制作教程
一、创建如下的菜单结构
- <div id="navi">
- <div id="menu" class="default">
- <ul>
- <li><a href="#">首页</a></li>
- <li><a href="#">jquery</a></li>
- <li><a href="#">设计</a></li>
- <li><a href="#">flex</a></li>
- <li><a href="#">air</a></li>
- <li><a href="#">ajax</a></li>
- <li><a href="#">html5</a></li>
- <li><a href="#">css3</a></li>
- <li><a href="#">WordPress</a></li>
- </ul>
- </div><!-- close menu -->
- </div><!-- close navi -->
这是一个菜单列表,结构上很简单,跟一般的菜单结构类似。
二、使用css3构建华丽菜单
接下来我们需要用到css3的知识来实现如demo上的菜单效果。
完整代码如下:
- #navi {
- height: 50px;
- margin-top: 50px;
- font-size:14px;
- }
-
- #menu {
- /*背景*/
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
- background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);
- /*圆角*/
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- line-height: 50px;
- text-align: center;
- margin: 0 auto;
- padding: 0;
- }
-
-
- ul {
- padding: 0;
- }
-
- ul li {
- list-style-type: none;
- display: inline;
- margin-right: 15px;
- }
-
- ul li a {
- color: #fff;
- text-decoration: none;
- /*文字阴影*/
- text-shadow: 1px 1px 1px #000;
- padding: 6px 12px;
- /*圆角*/
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
-
- -webkit-transition-property: color, background;
- -webkit-transition-duration: 0.5s, 0.5s;
- }
-
- ul li a:hover {
- background:#FFC;
- color:#333;
-
- -webkit-transition-property: color, background;
- -webkit-transition-duration: 0.5s, 0.5s;
- }
-
- .default {
- width: 850px;
- height: 50px;
-
- box-shadow: 0 5px 20px #888;
- -webkit-box-shadow: 0 5px 20px #888;
- -moz-box-shadow: 0 5px 20px #888;
- }
-
- .fixed {
- position: fixed;
- top: -5px;
- left: 0;
- width: 100%;
-
- box-shadow: 0 0 40px #222;
- -webkit-box-shadow: 0 0 40px #222;
- -moz-box-shadow: 0 0 40px #222;
- }
关键部分代码说明
1、给菜单添加渐变背景
- /*背景*/
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
- background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);
webkit和firefox在渐变背景的使用上有出入,语法并不相同,firefox更简洁,webkit更符合标准。接下来明河详细说明下这些参数是什么意思。
先来看firefox的语法:
- background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);
这里有四个参数,含义如下:
- 第一个参数,渐变的起始点,这里用到了简写,本来应该是 left top,火狐可以只用left,top是默认的,也就是至上向下。
- 第二个参数,起始渐变色
- 第三个参数,中间渐变色
- 第四个参数,终点渐变色
- 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、给菜单容器添加圆角
- /*圆角*/
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
这个很简单,明河就不说明了
3、给菜单项加入如下样式
- ul li a {
- color: #fff;
- text-decoration: none;
- /*文字阴影*/
- text-shadow: 1px 1px 1px #000;
- padding: 6px 12px;
- /*圆角*/
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
-
- -webkit-transition-property: color, background;
- -webkit-transition-duration: 0.5s, 0.5s;
- }
留意这里的文字阴影的用法。
- -webkit-transition-property: color, background;
- -webkit-transition-duration: 0.5s, 0.5s;
只适用于webkit浏览器,是控制背景透明度。
三、使用jquery让菜单跟随页面滚动
- $(function(){
- var menu = $('#menu'),
- pos = menu.offset();
-
- $(window).scroll(function(){
- if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
- menu.fadeOut('fast', function(){
- $(this).removeClass('default').addClass('fixed').fadeIn('fast');
- });
- } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
- menu.fadeOut('fast', function(){
- $(this).removeClass('fixed').addClass('default').fadeIn('fast');
- });
- }
- });
- })
关键代码说明:
offset()获取菜单在当前页面的位置,返回的是一个object:{top:”XXpx”,left:”XXpx”}。
- $(window).scroll(function(){
- ........
- });
监听窗体的滚动事件。
scrollTop()将得到滚动条的滚动距离,非常重要的一个值。
- $(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')
根据滚动距离,确定菜单是否还可见,不可见,则改变菜单的定位方式.
- menu.fadeOut('fast', function(){
- $(this).removeClass('default').addClass('fixed').fadeIn('fast');
- });
给菜单加入了fixed样式:
- .fixed {
- position: fixed;
- top: -5px;
- left: 0;
- width: 100%;
-
- box-shadow: 0 0 40px #222;
- -webkit-box-shadow: 0 0 40px #222;
- -moz-box-shadow: 0 0 40px #222;
- }
有二个关键的点:
- position: fixed;将其定位方式改变成固定定位
- box-shadow :加入阴影