級導航
具體實現方法如下:
首先在html中寫出一級菜單列表,然后在每個一級菜單中再嵌套一個列表即可創建一個二級菜單。
index.html
<div class="menu">
<ul>
<li><a href="">一級菜單</a>
<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>
</ul>
</li>
<li><a href="">一級菜單</a>
<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>
</ul>
</li>
<li><a href="">一級菜單</a>
<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>
</ul>
</li>
</ul>
</div>
接著寫樣式文件,主要是對列表樣式和位置進行修改
<style>
* {
padding: 0;/*內邊距:分別左,上,右,下都為0,這樣就不會出現左右上下內間距*/
margin: 0/*外邊距:分別左,上,右,下都為0,這樣就不會出現左右上下間距*/
}
.menu ul li {
list-style: none;/*列表樣式*/
background-color: burlywood;/*背景顏色*/
width: 120px;/*寬度*/
text-align: center;/*文本對齊:居中*/
height: 40px;/*高度*/
position: relative/*定位:一般用這個就可以絕對定位*/
}
.menu ul li a {
text-decoration: none;/*超鏈接下劃線:無*/
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>
這里需要注意的是一級菜單列表的定位方式要設置為relative,二級菜單列表的定位方式要設置為absolute,這樣二級菜單才會在一級菜單相對的位置出現。
然后通過display這個屬性控制二級菜單的顯示和隱藏就可以了。
下一個文章:輪播圖
何簡潔實現電商網站常用的二級菜單顯示特色產品?這是一個廣泛的東西,哪家和哪家的都不一樣,所以說出一個標準答案,似乎不太可能。主要是看需求吧。
前2天,接一個私活,要求在產品下拉菜單中實現二級菜單的特色產品,我不知道這樣說,是不是說清楚了,簡單些,就是當鼠標移動到一級菜單時,顯示二級菜單,鼠標移到二級菜單選項時,在二級菜單的右側出現特色產品的縮略圖和名稱。
本人理工男,語言表達差,請諒解,還是看效果圖吧:
二級菜單顯示特色圖片
大家把下拉菜單理解為公司產品,把第一個。。。第5個,理解為產品系列,而雪山飛狐中的人物頭像就想想成一個個活生生的產品,就可以了。
下面開始說是如何實現的。
一、HTML結構:
如圖:
html結構1
HTML結構2
HTML結構完成
二、書寫css樣式:
css樣式
css樣式2
css樣式3
css樣式4,完結
三、jquery代碼:
jquery代碼
PS:需要注意的2點:
1、不要忘記引入jquery庫呀。
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
2、注意hover的對象:
<!-- css書寫必須為li:hover否則的話,二級菜單出不來。 -->
如果哪位需要代碼文件的話,請在評論區留言,我會發送給你。
圖1
圖2
源碼完整,需要的朋友可以下載學習(圖3)
圖3
*請認真填寫需求信息,我們會在24小時內與您取得聯系。