整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html簡單的二級菜單制作


          級導航

          具體實現方法如下:

          首先在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否則的話,二級菜單出不來。 -->

          如果哪位需要代碼文件的話,請在評論區留言,我會發送給你。

          家好,今天給大家介紹一款,css+JavaScript實現的二級導航菜單html頁面前端源碼(圖1)。送給大家哦,獲取方式在本文末尾。

          圖1

          點擊左側菜單欄即可彈出二級菜單(圖2)

          圖2

          源碼完整,需要的朋友可以下載學習(圖3)

          圖3

          本源碼編碼:20225,需要的朋友,訪問下面鏈接后,搜索20225,即可獲取。

          「鏈接」


          主站蜘蛛池模板: 国产婷婷一区二区三区| 欧美日韩精品一区二区在线视频| 日本一区二区三区精品国产| 国内自拍视频一区二区三区| 无码中文字幕人妻在线一区二区三区 | 国产suv精品一区二区33| 国精品无码一区二区三区左线| 久久精品一区二区东京热| 亚洲综合在线成人一区| 国内精品视频一区二区三区| 区三区激情福利综合中文字幕在线一区 | 国产一区二区三区美女| 精品国产一区二区三区2021| 国产AV午夜精品一区二区三区 | 中文字幕av一区| 美女视频免费看一区二区| 亚洲国产专区一区| 老熟妇仑乱视频一区二区 | 国产成人久久精品区一区二区| 2018高清国产一区二区三区| 日本一区免费电影| 国产福利一区二区在线视频 | 国产精品一区三区| 精品熟人妻一区二区三区四区不卡 | 国产在线视频一区二区三区| 制服丝袜一区二区三区| 亚洲sm另类一区二区三区| 亚洲国产精品第一区二区三区| 人妻aⅴ无码一区二区三区| 波霸影院一区二区| 久久国产精品无码一区二区三区| 国产主播一区二区三区| 香蕉久久一区二区不卡无毒影院| 韩国一区二区三区| 在线播放一区二区| 亲子乱av一区二区三区| 精品亚洲av无码一区二区柚蜜| 看电影来5566一区.二区| 日美欧韩一区二去三区 | 少妇激情av一区二区| 人妻内射一区二区在线视频|