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

_Suqin 發布于2019-08-22 10:37 / 2821人閱讀

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

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

下拉菜單 界面設計

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

搭建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()方法，用于設置顯示元素

//設置顯示
Base.prototype.show = function(){
    for (var i=0;i
在base.js中繼續封裝hide()方法，用于設置隱藏元素
//設置顯示
Base.prototype.hide= function(){
    for (var i=0;i
在base.js中繼續封裝hover()方法，用于設置鼠標移入移出事件
//設置鼠標移入移入移出
Base.prototype.hover = function(over,out){//over為移入事件，out為移出事件
    for (var i=0;i
前臺調用
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();
    });
}

以上內容來自李炎恢老師JavaScript課程實戰篇筆記整理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90953.html

JS或Jquery

摘要：大潮來襲前端開發能做些什么去年谷歌和火狐針對提出了的標準，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的標準讓我們可以使用語言來開發。 VR 大潮來襲 --- 前端開發能做些什么去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的 API 標準讓我們可以使用 ...

CatalpaFlat 2019-08-22 11:17 評論0 收藏0
一個基于Angular+Ionic+Phonegap的混合APP實戰

摘要：有二維碼掃描功能，還做了類似消息可拖拽效果，上拉下拉刷新，輪播圖組件。特別適合用于基于模式的移動應用程序開發。簡介是一個用基于，和的，創建移動跨平臺移動應用程序的快速開發平臺。這個項目做得比較早，當時是基于ionic1和angular1做的。做了四個tabs的app，首頁模仿攜程首頁，第二頁主要是phonegap調用手機核心功能，第三頁模仿微信和qq聊天頁，第四頁模仿一般手機的表單設...

孫淑建 2019-08-26 11:46 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0