JS實現博客前端頁面（三） ——封裝下拉菜單

時間 2019-12-04

原文原文鏈接

在JS實現博客前端頁面（一）和JS實現博客前端頁面（二）中已經實現了對獲取DOM元素和CSS樣式相關的方法的封裝，本文將實現下拉菜單組件封裝。javascript

下拉菜單

界面設計

建立一個頂部header區域，放入「logo圖片」和「我的中心」，鼠標滑過「我的中心」時，會顯示下拉菜單，鼠標移出時會隱藏，對於下拉菜單的每一項，鼠標劃過有背景樣式的切換。
css

搭建HTML界面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="js/base.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>
        <header id="header">
            <div class="logo"><img src="images/logo.gif" alt="" /></div>
            <div class="member">我的中心
                <ul class="member_ul">
                    <li><a href="###">設置</a></li>
                    <li><a href="###">換膚</a></li>
                    <li><a href="###">幫助</a></li>
                    <li><a href="###">退出</a></li>
                </ul>    
            </div>
            <div class="login">登陸</div>
        </header><!-- /header -->  
    </body>
</html>

設置CSS樣式

body {
    margin:0;
    padding:0;
    background:#fff url(../images/header_bg.png) repeat-x;
    font-size:12px;
    color:#333;
}
ul {
    padding:0;
    margin:0;
}
ul li {
    list-style-type:none;
}
#header {
    width:900px;
    height:30px;
    margin:0 auto;
}
#header .logo {
    width:100px;
    height:30px;
    float:left;
}
#header .logo img {
    display:block;
}
#header .member {
    position:relative;
    width:70px;
    height:30px;
    left: 0;
    line-height:30px;
    float:right;
    background:url(../images/arrow.png) no-repeat 55px center;
    cursor:pointer;
}
#header .login{
    float: right;
    width: 35px;
    height: 30px;
    line-height: 30px;    
    cursor: pointer;
}
#header ul {
    position:absolute;
    top:30px; 
    background:#FBF7E1;
    width:100px;
    height:120px;
    border:1px solid #999;
    border-top:none;
    padding:10px 0 0 0;
    display:none;
}
#header ul li {
    height:25px;
    line-height:25px;
    text-indent:20px;
    letter-spacing:1px;
}
#header ul li a {
    display:block;
    text-decoration:none;
    color:#333;
    background:url(../images/arrow3.gif) no-repeat 5px 45%;
}
#header ul li a:hover {
    background:#fc0 url(../images/arrow4.gif) no-repeat 5px 45%;
}

設置效果

在base.js中繼續封裝show()方法，用於設置顯示元素html

//設置顯示
Base.prototype.show = function(){
    for (var i=0;i<this.elements.length;i++){
        var element = this.elements[i];
        element.style.display = 'block';
        
    }
    return this;        
}

在base.js中繼續封裝hide()方法，用於設置隱藏元素前端

//設置顯示
Base.prototype.hide= function(){
    for (var i=0;i<this.elements.length;i++){
        var element = this.elements[i];
        element.style.display = 'none';
        
    }
    return this;        
}

在base.js中繼續封裝hover()方法，用於設置鼠標移入移出事件java

//設置鼠標移入移入移出
Base.prototype.hover = function(over,out){//over爲移入事件，out爲移出事件
    for (var i=0;i<this.elements.length;i++){
        var element = this.elements[i];
        element.onmouseover = over;
        element.onmouseout = out;
     
    }
    return this;    
}

前臺調用

window.onload = function () {
    //我的中心的下拉菜單
    $().getClass('member').hover(function () {//傳入over事件
        $().getClass('member').css('background', 'url(images/arrow2.png) no-repeat 55px center');
        $().getClass('member_ul').show();
    }, function () {//傳入out事件
        $().getClass('member').css('background', 'url(images/arrow.png) no-repeat 55px center');
        $().getClass('member_ul').hide();
    });
}