jQuery横向向上弹出导航菜单特效代码

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

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

以下是 jQuery横向向上弹出导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Fresh Bottom Slide Out Menu with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Fresh Bottom Slide Out Menu with jQuery" />
        <meta name="keywords" content="jQuery, navigation, CSS3, menu" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    </head>
    <body>
        <div class="container">
            <ul id="menu">
                <li>
                    <a>
                        <i class="icon_about"></i>
                        <span class="title">About</span>
                        <span class="description">Learn about us and our services</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_work"></i>
                        <span class="title">Work</span>
                        <span class="description">See our work and portfolio</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_help"></i>
                        <span class="title">Help</span>
                        <span class="description">Talk to our support</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_search"></i>
                        <span class="title">Search</span>
                        <span class="description">Search our website</span>
                    </a>
                </li>
            </ul>
        </div>        <!-- The JavaScript -->
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-15px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'-10px'
                        }, 400);
                },
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-95px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'50px'
                        }, 400);
                }
            );
        });
        </script>
    </body>
</html>

CSS代码(style.css):

*{margin:0;padding:0;}
body{font-family:Helvetica,Arial,sans-serif;font-weight:bold;color:#999;background:#f0f0f0 url(../title.png) no-repeat center center;height:600px;}
a.ref{color:#888;text-decoration:none;text-shadow:1px 1px 1px #000;position:absolute;bottom:10px;right:10px;}
a.ref:hover{color:#000;}
a.back{width:184px;height:32px;position:absolute;bottom:10px;left:10px;background:transparent url(../back.png) no-repeat top left;}
.container{width:900px;height:130px;margin:0 auto;position:relative;overflow:hidden;border:3px solid #fff;background-color:#fff;-moz-box-shadow:1px 1px 6px #000;-webkit-box-shadow:1px 1px 6px #000;-moz-border-radius:0px 0px 20px 20px;-webkit-border-bottom-left-radius:20px;-webkit-border-bottom-right-radius:20px;border-radius:0px 0px 20px 20px;}
ul#menu{list-style:none;position:absolute;bottom:0px;left:20px;font-size:36px;font-family:Helvetica,Arial,sans-serif;font-weight:bold;color:#999;letter-spacing:-2px;}
ul#menu li{float:left;margin:0px 10px 0px 0px;}
ul#menu a{cursor:pointer;position:relative;float:left;bottom:-95px;line-height:20px;width:210px;}
.icon_about,.icon_work,.icon_help,.icon_search{width:64px;height:64px;display:block;left:140px;top:50px;position:absolute;}
.icon_about{background:transparent url(../images/id_card.png) no-repeat top left;}
.icon_work{background:transparent url(../images/globe.png) no-repeat top left;}
.icon_help{background:transparent url(../images/help.png) no-repeat top left;}
.icon_search{background:transparent url(../images/find.png) no-repeat top left;}
ul#menu span.title{display:block;height:26px;text-shadow:1px 1px 1px #000;color:#B7B7B6;text-indent:10px;}
ul#menu span.description{width:140px;height:80px;background-color:#B7B7B6;border:3px solid #fff;color:#fff;display:block;font-size:24px;padding:10px;-moz-box-shadow:1px 1px 6px #000;-webkit-box-shadow:1px 1px 6px #000;box-shadow:1px 1px 6px #000;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
ul#menu a:hover span.description{background-color:#54504F;}
ul#menu a:hover span.title{color:#54504F;}

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