適合移動手機的jQuery多級側邊欄選單外掛

listjjjclove發表於2024-11-25
jQuery

線上預覽 下載

hc-mobile-nav是一款適合移動手機的jQuery多級側邊欄選單外掛。它可以建立移動優先的、多級的隱藏滑動側邊欄選單，支援摺疊選單、向下展開選單和完全展開選單等多種展示方式。

使用方法

在頁面中引入jquery、hc-mobile-nav.js和hc-mobile-nav.css檔案。

< link rel="stylesheet" href="css/hc-mobile-nav.css">
< script type="text/javascript" src="js/jquery.js">        
< script type="text/javascript" src="js/hc-mobile-nav.js">
HTML結構

該jQuery多級側邊欄選單的基本HTML結構如下：

< nav id="main-nav">

  < ul class="first-nav">
    < li class="cryptocurrency">
      < a href="#">Cryptocurrency
      < ul >
        < li >< a href="#">Bitcoin
        < li >< a href="#">Ethereum
        < li >< a href="#">NEO
        < li >< a href="#">ZCash
        < li >< a href="#">Dogecoin
      
    
  

  < ul class="second-nav">
    < li class="devices">
      < a >Devices
      < ul >
        < li class="mobile">
          < a href="#">Mobile Phones
          < ul >
            < li >< a href="#">Super Smart Phone
            < li >< a href="#">Thin Magic Mobile
            < li >< a href="#">Performance Crusher
            < li >< a href="#">Futuristic Experience
          
        
        < li class="television">
          < a href="#">Televisions
          < ul >
            < li >< a href="#">Flat Superscreen
            < li >< a href="#">Gigantic LED
            < li >< a href="#">Power Eater
            < li >< a href="#">Experience
            < li >< a href="#">Classic Comfort
          
        
        < li class="camera">
          < a href="#">Cameras
          < ul >
            < li >< a href="#">Smart Shot
            < li >< a href="#">Power Shooter
            < li >< a href="#">Easy Photo Maker
            < li >< a href="#">Super Pixel
          
        
      
    
    < li class="magazines">
      < a href="#">Magazines
      < ul >
        < li >< a href="#">National Geographic
        < li >< a href="#">Scientific American
        < li >< a href="#">The Spectator
        < li >< a href="#">The Rambler
        < li >< a href="#">Physics World
        < li >< a href="#">The New Scientist
      
    
    < li class="store">
      < a href="#">Store
      < ul >
        < li >
          < a href="#">Clothes
          < ul >
            < li >
              < a href="#">Women's Clothing
              < ul >
                < li >< a href="#">Tops
                < li >< a href="#">Dresses
                < li >< a href="#">Trousers
                < li >< a href="#">Shoes
                < li >< a href="#">Sale
              
            
            < li >
              < a href="#">Men's Clothing
              < ul >
                < li >< a href="#">Shirts
                < li >< a href="#">Trousers
                < li >< a href="#">Shoes
                < li >< a href="#">Sale
              
            
          
        
        < li >
          < a href="#">Jewelry
        
        < li >
          < a href="#">Music
        
        < li >
          < a href="#">Grocery
        
      
    
    < li class="collections">< a href="#">Collections
    < li class="credits">< a href="#">Credits
JavaScript

在頁面DOM元素載入完畢之後，透過下面的方法來初始化該jQuery多級側邊欄選單外掛：

jQuery(document).ready( function ($) {
    $( '#main-nav' ).hcMobileNav({
      maxWidth: 980
    });
});

配置引數

該jQuery多級側邊欄選單外掛的可用引數如下：

  • maxWidth：代表螢幕小於多少畫素時按移動裝置的方式來顯示選單。預設值為1024。
  • labels：關閉和返回連結的標籤。預設為{close: 'Close',back: 'Back'}

相關文章