整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
級(jí)導(dǎo)航
具體實(shí)現(xiàn)方法如下：
首先在html中寫(xiě)出一級(jí)菜單列表，然后在每個(gè)一級(jí)菜單中再嵌套一個(gè)列表即可創(chuàng)建一個(gè)二級(jí)菜單。
index.html
<div class="menu">
<ul>
<li><a href="">一級(jí)菜單</a>
<ul>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
</ul>
</li>
<li><a href="">一級(jí)菜單</a>
<ul>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
</ul>
</li>
<li><a href="">一級(jí)菜單</a>
<ul>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
<li><a href="">二級(jí)菜單</a></li>
</ul>
</li>
</ul>
</div>接著寫(xiě)樣式文件，主要是對(duì)列表樣式和位置進(jìn)行修改
<style>
* {
padding: 0;/*內(nèi)邊距:分別左,上,右,下都為0,這樣就不會(huì)出現(xiàn)左右上下內(nèi)間距*/
margin: 0/*外邊距:分別左,上,右,下都為0,這樣就不會(huì)出現(xiàn)左右上下間距*/
}
.menu ul li {
list-style: none;/*列表樣式*/
background-color: burlywood;/*背景顏色*/
width: 120px;/*寬度*/
text-align: center;/*文本對(duì)齊:居中*/
height: 40px;/*高度*/
position: relative/*定位:一般用這個(gè)就可以絕對(duì)定位*/
}
.menu ul li a {
text-decoration: none;/*超鏈接下劃線:無(wú)*/
display: block;/*顯示:正常顯示用block,隱藏none*/
line-height: 40px
}
.menu ul li:hover {
background-color: aqua
}
.menu ul li ul {
display: none;
position: absolute;
left: 120px;
top: 0
}
.menu ul li:hover ul {
display: block
}
</style>這里需要注意的是一級(jí)菜單列表的定位方式要設(shè)置為relative,二級(jí)菜單列表的定位方式要設(shè)置為absolute，這樣二級(jí)菜單才會(huì)在一級(jí)菜單相對(duì)的位置出現(xiàn)。
然后通過(guò)display這個(gè)屬性控制二級(jí)菜單的顯示和隱藏就可以了。
下一個(gè)文章：輪播圖
本篇文章主要給大家介紹一下如何使用html+css完成二級(jí)橫向以及豎向菜單導(dǎo)航制作；菜單導(dǎo)航是網(wǎng)站建設(shè)中最常用的一塊了，基本每個(gè)網(wǎng)站內(nèi)都會(huì)有個(gè)導(dǎo)航菜單，用鼠標(biāo)劃過(guò)還可以有下拉子菜單。
由上圖我們可以看出，該圖包含一個(gè)橫向?qū)Ш綏l，然后鼠標(biāo)經(jīng)過(guò)橫向?qū)Ш綏l之后，子導(dǎo)航顯示出來(lái)。
我們這里主要用到的知識(shí)點(diǎn)就是列表標(biāo)簽（ul、dl）的使用、浮動(dòng)（float）的使用、絕對(duì)定位（absolute）及鼠標(biāo)經(jīng)過(guò)（hover）的效果。
1、列表標(biāo)簽ul、dl（我們使用ul、dl來(lái)創(chuàng)建同類型的導(dǎo)航元素內(nèi)容，通過(guò)設(shè)置css樣式來(lái)達(dá)到圖片所示效果）；
2、浮動(dòng)元素float（每個(gè)導(dǎo)航元素我們需要使用float:left;讓其左對(duì)齊，這里涉及到了我們之前講解的如何清除浮動(dòng)的影響）；
3、絕對(duì)定位absolute（對(duì)于子導(dǎo)航我們要使用絕對(duì)定位來(lái)讓其浮動(dòng)在上級(jí)有定位元素的下方，不占據(jù)元素空間）
4、鼠標(biāo)經(jīng)過(guò)hover（使用css的鼠標(biāo)經(jīng)過(guò)元素（hover）效果，配合display的none（隱藏）和block（顯示）來(lái)實(shí)現(xiàn)子菜單的顯示與隱藏）
具體的實(shí)現(xiàn)html代碼以及css代碼就如下圖所示：
還有一個(gè)縱向菜單導(dǎo)航原理跟橫向的類似，只需簡(jiǎn)單調(diào)整一下css代碼即可。
html代碼跟橫向一樣，這里就不再貼圖，具體的實(shí)現(xiàn)圖片效果以及css代碼就如下圖所示：
好了，本篇文章就給大家說(shuō)到這里，大家自己動(dòng)手寫(xiě)一下看能不能寫(xiě)出一樣的頁(yè)面效果出來(lái)，也可以找一些類似的頁(yè)面自己練習(xí)一下，有需要源碼的可以直接私信我即可。
每日金句：每天收獲小進(jìn)步，積累起來(lái)就是大進(jìn)步；每天收獲小幸福，積攢起來(lái)便成大幸福。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
何簡(jiǎn)潔實(shí)現(xiàn)電商網(wǎng)站常用的二級(jí)菜單顯示特色產(chǎn)品？這是一個(gè)廣泛的東西，哪家和哪家的都不一樣，所以說(shuō)出一個(gè)標(biāo)準(zhǔn)答案，似乎不太可能。主要是看需求吧。
前2天，接一個(gè)私活，要求在產(chǎn)品下拉菜單中實(shí)現(xiàn)二級(jí)菜單的特色產(chǎn)品，我不知道這樣說(shuō)，是不是說(shuō)清楚了，簡(jiǎn)單些，就是當(dāng)鼠標(biāo)移動(dòng)到一級(jí)菜單時(shí)，顯示二級(jí)菜單，鼠標(biāo)移到二級(jí)菜單選項(xiàng)時(shí)，在二級(jí)菜單的右側(cè)出現(xiàn)特色產(chǎn)品的縮略圖和名稱。
本人理工男，語(yǔ)言表達(dá)差，請(qǐng)諒解，還是看效果圖吧：
二級(jí)菜單顯示特色圖片
大家把下拉菜單理解為公司產(chǎn)品，把第一個(gè)。。。第5個(gè)，理解為產(chǎn)品系列，而雪山飛狐中的人物頭像就想想成一個(gè)個(gè)活生生的產(chǎn)品，就可以了。
下面開(kāi)始說(shuō)是如何實(shí)現(xiàn)的。
一、HTML結(jié)構(gòu)：
如圖：
html結(jié)構(gòu)1
HTML結(jié)構(gòu)2
HTML結(jié)構(gòu)完成
二、書(shū)寫(xiě)css樣式：
css樣式
css樣式2
css樣式3
css樣式4,完結(jié)
三、jquery代碼：
jquery代碼
PS：需要注意的2點(diǎn)：
1、不要忘記引入jquery庫(kù)呀。
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
2、注意hover的對(duì)象：
<!-- css書(shū)寫(xiě)必須為li:hover否則的話，二級(jí)菜單出不來(lái)。 -->
如果哪位需要代碼文件的話，請(qǐng)?jiān)谠u(píng)論區(qū)留言，我會(huì)發(fā)送給你。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
