超酷蘋果風格圖標滑出菜單

2024-09-05 12:20:50

字體：大中小

來源：轉載

供稿：網友

超酷蘋果風格圖標滑出菜單，調用了jquery1.3.2的庫文件，整個菜單動感十足，用在網站上增色不少。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>    <head>        <title>超酷蘋果風格圖標滑出菜單</title>        <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>        <style>		 body{            margin:0px;            padding:0px;            background-color:#f0f0f0;            font-family:Arial;        }        .title{            position:absolute;            top:100px;            left:50%;            margin-left:-204px;            width:409px;            height:348px;            background:transparent url(/jscss/demoimg/201102/title.png) no-repeat top left;        }        .info{            position:fixed;            bottom:0px;            left:0px;        }        .back{            display:block;            background:transparent url(/jscss/demoimg/201102/back.png) no-repeat top left;            width:281px;            height:143px;        }        a.dry{            position:absolute;            bottom:10px;            right:10px;            color:#000;            font-weight:bold;            font-size:16px;        }.navigation{    position:relative;    margin:0 auto;    width:915px;}ul.menu{    list-style:none;    font-family:"Verdana",sans-serif;    border-top:1px solid #bebebe;    margin:0px;    padding:0px;    float:left;}ul.menu li{    float:left;}ul.menu li a{    text-decoration:none;    background:#7E7E7E url(/jscss/demoimg/201102/bgMenu.png) repeat-x top left;    padding:15px 0px;    width:128px;    color:#333333;    float:left;    text-shadow: 0 1px 1px #fff;    text-align:center;    border-right:1px solid #a1a1a1;    border-left:1px solid #e8e8e8;    font-weight:bold;    font-size:13px;    -moz-box-shadow: 0 1px 3px #555;    -webkit-box-shadow: 0 1px 3px #555;}ul.menu li a.hover{    background-image:none;    color:#fff;    text-shadow: 0 -1px 1px #000;}ul.menu li a.first{    -moz-border-radius:0px 0px 0px 10px;    -webkit-border-bottom-left-radius: 10px;    border-left:none;}ul.menu li a.last{    -moz-border-radius:0px 0px 10px 0px;    -webkit-border-bottom-right-radius: 10px;}ul.menu li span{    width:64px;    height:64px;    background-repeat:no-repeat;    background-color:transparent;    position:absolute;    z-index:-1;    top:80px;    cursor:pointer;}ul.menu li span.ipod{    background-image:url(/jscss/demoimg/201102/ipod.png);    left:33px; /*128/2 - 32(half of icon) +1 of border*/}ul.menu li span.video_camera{    background-image:url(/jscss/demoimg/201102/video_camera.png);    left:163px; /* plus 128 + 2px of border*/}ul.menu li span.television{    background-image:url(/jscss/demoimg/201102/television.png);    left:293px;}ul.menu li span.monitor{    background-image:url(/jscss/demoimg/201102/monitor.png);    left:423px;}ul.menu li span.toolbox{    background-image:url(/jscss/demoimg/201102/toolbox.png);    left:553px;}ul.menu li span.telephone{    background-image:url(/jscss/demoimg/201102/telephone.png);    left:683px;}ul.menu li span.print{    background-image:url(/jscss/demoimg/201102/print.png);    left:813px;}		</style>    </head>    <body>        <div   id="iwvjtn8m0"   class="navigation">            <ul class="menu" id="menu">                <li><span id="iwvjtn8m0"    class="ipod"></span>Players</li>                <li><span id="iwvjtn8m0"    class="video_camera"></span>Cameras</li>                <li><span id="iwvjtn8m0"    class="television"></span>TVs</li>                <li><span id="iwvjtn8m0"    class="monitor"></span>Screens</li>                <li><span id="iwvjtn8m0"    class="toolbox"></span>Tools</li>                <li><span id="iwvjtn8m0"    class="telephone"></span>Phones</li>                <li><span id="iwvjtn8m0"    class="print"></span>Printers</li>            </ul>        </div>        <script type="text/javascript" src="http://www.survivalescaperooms.com/ajaxjs/jquery1.3.2.js"></script>        <script type="text/javascript">            $(function() {                var d=1000;                $('#menu span').each(function(){                    $(this).stop().animate({                        'top':'-17px'                    },d+=250);                });                $('#menu > li').hover(                function () {                    var $this = $(this);                    $('a',$this).addClass('hover');                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});                },                function () {                    var $this = $(this);                    $('a',$this).removeClass('hover');                    $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});                }            );            });        </script>    </body></html>

上一篇：風格經典，無任何修飾的CSS選項卡

下一篇：jQuery 折疊菜單，折疊面板