上一節：電商項目實戰第二節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【搜索框那一欄】

文章目錄

【考拉海購網站】之【分類導航欄】

【考拉海購網站】之【分類導航欄】

之前我們做了頂部導航和搜索框的部分，這一篇我來講解如何製作分類導航部分
完成效果演示 >>>

第一步，分析頁面佈局

總共4個主要的部分：
  1，橫向分類導航欄
  2，垂直分類導航欄（二級下拉菜單）
  3，三級菜單內容
  4，商品推薦欄
大致情況如下圖所示：

第二步，寫需要的html標籤

根據結構分析佈局可得兩個部分：
（1）水平導航欄
（2）垂直導航欄

還有個三級導航欄，就是在鼠標移動到左側的導航欄的時候，會出現右側的內容塊 >>>

我們將右側內容塊分爲兩個區域，一個左側區域，一個右側區域 >>>

左側內容 >>>

右側內容 >>>

index.html文件代碼

 <!-- 分類導航欄 -->
        <div class="classificationNav">
            <div class="allClass">
                <span>
                    <i></i>
                    <i></i>
                    <i></i>
                </span>
                <span>所有分類</span>
                <ul class="vertical">
                    <li>
                        <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>美容彩妝</span>
                        <div class="context">
                            <div class="leftContext">
                                <ul>
                                    <li><a href="">護膚</a></li>
                                    <li><a href="">潔面</a></li>
                                    <li><a href="" style="color: red;">卸妝</a></li>
                                    <li><a href="">爽膚水</a></li>
                                    <li><a href="" style="color: red;">眼部護理</a> </li>
                                    <li><a href="" style="color: red;">精華</a></li>
                                    <li><a href="">乳液</a></li>
                                    <li><a href="" style="color: red;">凝膠</a></li>
                                    <li><a href="">手</a></li>
                                    <li><a href="">足護理</a></li>
                                    <li><a href="">脣部護理</a></li>
                                    <li><a href="">乳液</a></li>
                                    <li><a href="">凝膠</a></li>
                                    <li><a href="">手</a></li>
                                    <li><a href="">足護理</a></li>
                                    <li><a href="">脣部護理</a></li>
                                    <li><a href="">乳液</a></li>
                                    <li><a href="">凝膠</a></li>
                                    <li><a href="">手</a></li>
                                    <li><a href="">足護理</a></li>
                                    <li><a href="">脣部護理</a></li>
                                </ul>
                                <ul>
                                    <li><a href="">護膚</a></li>
                                    <li><a href="" style="color: red;">潔面</a></li>
                                    <li><a href="">卸妝</a></li>
                                    <li><a href="" style="color: red;">爽膚水</a></li>
                                    <li><a href="">眼部護理</a> </li>
                                    <li><a href="">精華</a></li>
                                    <li><a href="">乳液</a></li>
                                    <li><a href="">凝膠</a></li>
                                    <li><a href="">手</a></li>
                                    <li><a href="">足護理</a></li>
                                    <li><a href="">脣部護理</a></li>
                                </ul>
                                <ul>
                                    <li><a href="">護膚</a></li>
                                    <li><a href="">潔面</a></li>
                                    <li><a href="" style="color: red;">卸妝</a></li>
                                    <li><a href="">爽膚水</a></li>
                                    <li><a href="" style="color: red;">眼部護理</a> </li>
                                    <li><a href="">精華</a></li>
                                    <li><a href="">乳液</a></li>
                                    <li><a href="">凝膠</a></li>
                                    <li><a href="">手</a></li>
                                    <li><a href="">足護理</a></li>
                                    <li><a href="">脣部護理</a></li>
                                </ul>
                                <ul>
                                    <li><a href="">護膚</a></li>
                                    <li><a href="">潔面</a></li>
                                    <li><a href="">卸妝</a></li>
                                    <li><a href="">爽膚水</a></li>
                                    <li><a href="">眼部護理</a> </li>
                                    <li><a href="">精華</a></li>
                                    <li><a href="">乳液</a></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="rightContext">
                                <ul>
                                    <li><img src="./icc1uivj43.jpg" alt=""></li>
                                    <li><img src="./idvqc2kv42.jpg" alt=""></li>
                                    <li><img src="./ii7faa9k34_120_120.jpg" alt=""></li>
                                    <li><img src="./icc1uivj43.jpg" alt=""></li>
                                    <li><img src="./icc1uivj43.jpg" alt=""></li>
                                    <li><img src="./ii7faa9k34_120_120.jpg" alt=""></li>
                                    <img class="ad" src="./廣告.jpg" alt="">
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>母嬰兒童</span>
                    </li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>營養保障</span></li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>數碼家電</span></li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>個人洗護</span></li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>服飾鞋靴</span></li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>運動戶外</span></li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>手錶配飾</span></li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>輕奢</span></li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>家居生活</span></li>
                    <li> <img class="icon"
                            src=" https://haitao.nos.netease.com/1cet9magj32_40_40.png?imageView&thumbnail=20x20&quality=100"
                            alt=""><span>環球美食</span></li>
                </ul>
            </div>
            <ul class="horizontal">
                <li><a style="color: red;">首頁</a></li>
                <li><a>海外直郵</a></li>
                <li><a>工廠店</a></li>
                <li><a>品質奶粉</a></li>
                <li><a>人氣面膜</a></li>
                <li><a>充值</a></li>
            </ul>
        </div>

index.css文件代碼

/*------------------分類導航欄部分--------------- */
/* classificationNav是classification+Nav，意思是分類導航 */
.classificationNav {
    width: 1090px;
}

/* 給分類導航欄的水平導航欄設置相關屬性 */
.classificationNav ul.horizontal {
    width: 100%;
    height: 40px;
}

/* 對分類導航欄的水平導航欄選項進行行級塊元素設置 */
.classificationNav ul.horizontal li {
    display: inline-block;
    height: 40px;
    font-size: 14px;
    font-weight: bolder;
    line-height: 40px;
    overflow: hidden;
    padding: 0 20px;
}

/* 當鼠標經過導航欄裏面的字體的時候，字體顏色變爲紅色，鼠標指針的圖標變成小手 */
.classificationNav ul.horizontal li a:hover {
    color: red;
    cursor: pointer;
}

/* 對全部分類選項進行設置 */
.classificationNav .allClass {
    display: block;
    float: left;
    height: 40px;
    position: relative;
    line-height: 40px;
    width: 164px;
    text-align: center;
    font-size: 14px;
    margin-right: 30px;
    color: #fff;
    background-color: red;
    border-bottom: 1px solid #ff5160;
    cursor: pointer;
}

/* 對全部分類的標籤頭部三槓圖標進行設置 */
.classificationNav .allClass span i {
    display: block;
    width: 15px;
    border-top: 2px solid #ddd;
    height: 0px;
    margin-bottom: 3px;
}

.classificationNav .allClass span:nth-child(1) {
    float: left;
    margin-top: 14px;
    margin-left: 18px;
    margin-bottom: 3px;
}

.classificationNav .allClass span:nth-child(2) {
    margin-left: -30px;
    margin-bottom: 3px;
}

.classificationNav .allClass ul.vertical {
    display: none;
    margin-left: -40px;
    margin-top: 0px;
}

/* 當鼠標移動到全部分類的標籤上時，垂直導航欄將會顯示 */
.classificationNav .allClass:hover ul.vertical {
    display: block;
}

/* 這是一個細節，對垂直導航欄的第一個li的頂部有紅色邊線 */
.classificationNav .allClass ul.vertical>li:first-child {
    border-top: 1px solid #ff5160;
}

.classificationNav .allClass ul.vertical>li {
    width: 160px;
    height: 40px;
    list-style: none;
    border-left: 1px solid #ff1e32;
    border-right: 3px solid #ff1e32;
    border-bottom: 1px solid #ff626f;
    background: linear-gradient(90deg, red, #ff3264);
}

/* 這是一個細節，對垂直導航欄的最後一個li的頂部有白色邊線 */
.classificationNav .allClass ul.vertical>li:last-child {
    border-bottom: 1px solid #fff;
}
                                                                                                   
.classificationNav .allClass ul.vertical>li:hover {
    color: #ff1e32;
    background: #fff;
}

.classificationNav .allClass ul.vertical>li .icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
    width: 20px;
    height: 20px;
    margin-left: -28px;
}

.classificationNav .allClass ul.vertical>li span {
    display: inline-block;
    vertical-align: middle;
    width: 70px;
    line-height: 16px;
    margin-left: 12px;
    white-space: nowrap;
}

/* 鼠標移動到垂直標籤上面的時候，右側內容會出現 */
.classificationNav .allClass ul.vertical>li:nth-child:hover>.context {
    display: block;
}

/* 文本內的內容 */
.context {
    display: block;
    position: absolute;
    width: 930px;
    height: 450px;
    margin-top: -41px;
    margin-left: 162px;
    color: black;
    background-color: rgb(241, 241, 241);
    border: 1px solid #ff1e32;
    cursor: default;
}

/* 文本左邊區域 */
.context .leftContext {
    width: 74%;
    height: 450px;
    background-color: rgb(255, 255, 255);
}

.context .leftContext ul {
    float: left;
    width: 44%;
    height: 46%;
    margin-left: -20px;
    margin-bottom: 16px;
    border-width: 0px;
}


.context .leftContext ul:nth-of-type(even) {
    margin-left: -41px;
}


.context .leftContext ul li {
    float: left;
    list-style: none;
    font-size: 13px;
    margin-left: 20px;
}

.context .leftContext ul li a{
    color: black;
}

.context .leftContext ul li:first-child {
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #ddd;
}

/* 這是一個細節，當鼠標移動到超鏈接上的時候，出現下劃線 */
.context .leftContext ul li:hover a{
    text-decoration: underline;
}

/* 文本右邊區域 */
.context .rightContext {
    position: absolute;
    width: 32%;
    height: 440px;
    top: 22px;
    right: -24px;
}

.context .rightContext ul {
    width: 100%;
    height: 46%;
    border-width: 0px;
}

.context .rightContext ul li {
    float: left;
    list-style: none;
    font-size: 13px;
    margin-left: 1px;
    margin-top: -14px;
}

.context .rightContext ul li>img{
    width: 108px;
    height: 108px;
    border: 1px solid #eaeaea;
    margin: 0 3px 2px 0;
    cursor: pointer;
}

/* 右側區域底部廣告樣式設定 */
.context .rightContext ul img.ad{
    position: absolute;
    width: 220px;
    bottom: 22px;
    left: 42px;
}

index.js文件代碼

這部分代碼可以不寫，我這裏是用來做測試用的，當鼠標移動到下垂標籤上的時候，右側內容塊的文字和圖片會被改變，假裝我們在切換商品（爲什麼要假裝？因爲數據實在是太多了，我就簡單放上一點做個表示，要補全還需自行擴展其他數據）

// 以下全部代碼用於數據調整測試，僅僅是隨機試驗，可以不用
var verticalLi = document.getElementsByClassName('vertical')[0].getElementsByTagName('li');
var verticalImg = document.getElementsByClassName('rightContext')[0].getElementsByTagName('img')
var leftContextLi = document.getElementsByClassName('leftContext')[0].getElementsByTagName('li');
for (i in verticalLi) {
    verticalLi[i].onmouseover = function (e) {
        for (i in verticalLi) {
            if (verticalLi[i] === this) {
                console.log(i);
                res = i - 10;
                if (res < 0) {
                    leftContextLi[0].innerText = '護膚';
                    verticalImg[1].src = "./icc1uivj43.jpg";
                    verticalImg[2].src = "./idvqc2kv42.jpg";
                    verticalImg[3].src = "./ii7faa9k34_120_120.jpg";
                    verticalImg[6].src = "./iqmfbh3y97_244_100.jpg";

                } else {
                    res %= 2;
                    switch (res) {
                        case 0:
                            leftContextLi[0].innerText = '偶數產品';
                            verticalImg[1].src = "./1cj2db4o551_120_120.jpg";
                            verticalImg[2].src = "./igats98t62_120_120.jpg";
                            verticalImg[3].src = "./ii7faa9k34_120_120.jpg";
                            verticalImg[6].src = "./iqmf9t6y71_244_100.jpg"
                            break;
                        case 1:
                            leftContextLi[0].innerText = '結果爲奇數';
                            verticalImg[1].src = "./igats98t62_120_120.jpg";
                            verticalImg[2].src = "./ii7faa9k34_120_120.jpg";
                            verticalImg[3].src = "./1c8527h6j15_244_100.jpg";
                            verticalImg[6].src = "./廣告.jpg"
                            break;
                        default:
                            break;
                    }
                }
            }
        }
    }
}

最終結果 >>>

下一節：電商項目實戰第四節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【輪播圖特效】

電商項目實戰第三節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【分類導航欄】

文章目錄

【考拉海購網站】之【分類導航欄】

第一步，分析頁面佈局

第二步，寫需要的html標籤

index.html文件代碼

index.css文件代碼

index.js文件代碼

《Python進階》學習筆記

Leetcode 3161. 物塊放置查詢

leetcode 60 排列序列

一個docker容器暴露多個端口

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

史上最短最敷衍的Nodejs教程（四）文件系統模塊

用JQ+AJAX+PHP+Mysql做簡單的用戶註冊功能

史上最短最敷衍的Nodejs教程（五）URL模塊

前端CSS小作業練習（四）

Go速成無壓力【一】：Hello World

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結