我們在瀏覽一些大型商城網(wǎng)站時，經(jīng)常會看到一些非常漂亮的二級導(dǎo)航菜單。它的二級導(dǎo)航菜單并不是常見的網(wǎng)站導(dǎo)航的二級下拉菜單，而是圖片展示列表，并且可以進(jìn)行滾動展示。效果如下圖：

怎么在自己做網(wǎng)站時也能做出這樣的圖片滾動展示橫向二級導(dǎo)航菜單呢？下面學(xué)做網(wǎng)站論壇就來講一下方法。

方法/步驟

1. 制作滾動展示版塊，用于顯示圖片橫向列表；HTML代碼如下：

   
   <div class="Box">
   
   ?      <div class="content">       
   
   
   
   ?          <div class="Box_con clearfix">
   
   ?              <span class="btnl btn" id="btnl"></span>
   
   ?              <span class="btnr btn" id="btnr"></span>
   
   
   
   ?              <div class="conbox" id="BoxUl">
   
                       <ul>
   
   
   
                           <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
   
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
   
   
   ?                  </ul>
   
   ?              </div>
   
   
   
   ?          </div>
   
   
   
   ?      </div>
   
   ?   </div>
   
   

2. 再給圖片展示區(qū)域添加CSS樣式；CSS樣式如下：

   
   .Box {position: fixed;right: 0;left: 0;z-index: 1031;background:#fff;box-shadow: 0 0 10px rgba(0,0,0,0.15);}
   
   .Box .content {width: 1170px;margin: 0 auto;}
   
   .Box h2 {text-align: center;margin-bottom: 35px;padding-top: 250px;}
   
   .Box .Box_con {position: relative;}
   
   .Box .Box_con .btnl {position: absolute;}
   
   .Box .Box_con .btn {display: block;width: 41px;height: 41px;position: absolute;top: 50px;cursor: pointer;}
   
   .Box .Box_con .btnl {background: url(images/jtl02.png) no-repeat center;left: -72px;}
   
   .Box .Box_con .btnr {background: url(images/jtr02.png) no-repeat center;right: -72px;}
   
   .Box .Box_con .btnl:hover {background: url(images/jtl03.png) no-repeat center;}
   
   .Box .Box_con .btnr:hover {background: url(images/jtr03.png) no-repeat center;}
   
   .Box .Box_con .conbox {position: relative;overflow: hidden;}
   
   .Box .Box_con .conbox ul {position: relative;}
   
   .Box .Box_con .conbox ul li {float: left;width: 155px;height: 180px;margin-left: 40px;text-align:center;overflow: hidden;}
   
   .Box .Box_con .conbox ul li:first-child {margin-left: 20px;}
   
   .Box .Box_con .conbox ul li img {display: block;width: 100px;height: 123px;margin:15px auto 10px;transition: all 0.5s;}
   
   .Box .Box_con .conbox ul li:hover img {transform: scale(1.1);}
   
   

3. 通過上面的HTML和CSS就可以制作出圖片展示區(qū)塊。但如果想讓它們滾動起來，還需要加上JS代碼，放在整個頁面代碼的底部。代碼如下：

   
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   
   <script type="text/javascript">
   
   ?      //滾動元素id，左切換按鈕，右切換按鈕，切換元素個數(shù)id,滾動方式，切換方向，是否自動滾動，滾動距離，滾動時間，滾動間隔，顯示個數(shù)
   
   ?      LbMove('BoxUl','btnr','btnl','BoxSwitch',true,'left',true,195,1000,3000,6);
   
   
   
   ?   </script>
   
   

4. 下載一個控制圖片滾動的JQUERY插件，下載地址：sub.js，并用以下的代碼引用到自己的網(wǎng)站上。放在</head>標(biāo)簽上面；

   
   <script src="sub.js"></script>//記得修改JS的路徑
   
   

5. 這樣一個可以滾動圖片展示的區(qū)域就制作好了。（為了防止一些新手學(xué)建網(wǎng)站不懂代碼，這里也提示了演示網(wǎng)頁的下載。下載地址：https://pan.baidu.com/s/1JMhxLjHZPR2JWO_V7DU7Bw
6. 制作好展示區(qū)域之后，就是實(shí)現(xiàn)當(dāng)鼠標(biāo)指向菜單時，才顯示這個圖片展示橫向二級導(dǎo)航菜單，當(dāng)鼠標(biāo)離開時，自動隱藏。方法見：https://www.xuewangzhan.com/wenti/18516.html

通過以上步驟的操作，就可以在自己建網(wǎng)站時，在自己的網(wǎng)站導(dǎo)航上制作這樣的圖片滾動展示橫向二級導(dǎo)航菜單了。

標(biāo)簽： isp 代碼 建網(wǎng)站 學(xué)建網(wǎng)站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。