css3渐变头部导航

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3渐变头部导航的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css3����ͷ������</title>
</head>
<body>
<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 -->
<div id="height">

</div>
    	<style>#navi {
    height: 50px;
    margin-top: 50px;
    font-size:14px;
}
#height {
	   height:500px
}
 
#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;
}</style>
	    		<script>$(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');
                });
            }
        });
})</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)