代码改变世界

悬浮Panel效果（主要是Css给力）

2011-08-12 16:58  前端小鬼  阅读(1389)  评论(0)    收藏  举报

（1）HTML 递上：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>index</title>
        <link href="../Css/reset.css" type="text/css" rel="stylesheet"/>
        <link href="../Css/index.css" type="text/css" rel="stylesheet"/>
        <script src="../Js/jquery-min.js" type="text/javascript"></script>
        <script src="../Js/index.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="main">
            <div class="nav">
                <ul>
                    <li class="li-panel">
                        <a class="a-panel" href="#">喜团挂挂</a>
                        <ul class="panel">
                            <li><a href="#">挂挂简介</a></li>
                            <li><a href="#">使用方法</a></li>
                            <li><a href="#">挂挂你我</a></li>
                        </ul>
                    </li>
                    <li>
                        |<a href="#">喜团广告</a>
                    </li>
                    <li>
                        |<a href="#">喜团商务</a>
                    </li>
                    <li>
                        |<a href="#">喜团客服</a>
                    </li>
                    <li>
                        |<a href="#">喜团市场</a>
                    </li>
                </ul>
            </div>
            <div class="beauty">
            </div>
        </div>
    </body>
</html>

（2）Css代码递上

body {
    text-align: center;
}
#main {
    margin: 0 auto;
    width: 640px;
    height: 480px;
    border: 1px solid #CCC;
    text-align: center;
}
.nav {
    width: 100%;
    height: 30px;
    position: relative;
}
.nav ul {
    line-height:18px;
    width:480px;
    position: absolute;
    right: 10px;
    top: 5px;
}
.nav ul li {
    float: left;
}
.nav a {
    margin: 0 5px 0 6px;
    color: #333;
}
.nav a:hover {
    color: #CC0000;
    text-decoration: none;
}
.li-panel {
    position: relative;
}
.a-panel {
    background: url(../img/headfooter.png) no-repeat;
}
.a-panel {
    display: block;
    width: 52px;
    padding-right: 17px;
    padding-left: 15px;
    background-position: 69px -153px;
    background-color: #FFF;
    z-index: 10;
    position: relative;
    border: 1px solid #ADADAD;
    border-bottom: 0;
}
.li-panel ul {
    position: absolute;
    width: 100px;
    left: 6px;
    top: 18px;
    padding: 7px;
    padding-left: 14px;
    border: 1px solid #ADADAD;
    background-color: #FFF;
}
.li-panel ul li {
    float: left;
    color: #333;
    width: 100%;
    height: 23px;
    line-height: 22px;
    margin-bottom: 2px;
}
.panel li {
    border-bottom: 1px dotted #CCC;
    text-align: left;
}
.panel a {
    margin: 0;
}
/* Beauty Section */
.beauty {
    background: url(../img/beauty.png) no-repeat;
    width: 455px;
    height: 360px;
    margin: 0 auto;
}

（3）Js（jquery）递上

/**
 * @author lyl
 */
$(document).ready(function(){
        //初始化表现
        $('.a-panel').css({'border': '0'}).next().hide();
        //鼠标事件的监听
        $('.a-panel').mouseenter(function(){
            $(this).css({'border': '1px solid #ADADAD', 'border-bottom': '0', 'background-position': '-131px -153px'});
            $(this).next().show();
        });
        $('.li-panel').mouseleave(function(){
            $('.a-panel').css({'border': '0', 'background-position': '69px -153px'}).next().hide();
        });
});

（4）效果递上

（5）总结：总觉得这个效果不太满意，主要是Js的不够抽象。