手機屏幕上可點擊的子菜單

我正在構建一個WP主題，並使用默認的子菜單行爲作爲用戶鼠標懸停並出現下拉菜單。但由於手機屏幕懸停功能不起作用，我只是將子菜單隱藏在移動分辨率上。但是，正如我們在WP儀表板中看到的那樣，子菜單通過可點擊的功能進行轉換，我們可以通過單擊父項來訪問子菜單。如何在我的主題中實現此功能？手機屏幕上可點擊的子菜單

來源

2016-03-15 Mian Shahzad Raza

這裏是你在找什麼

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
     a { 
      text-decoration: none; 
     } 
     .container { 
      width: 90%; 
      max-width: 900px; 
      margin: 10px auto; 
     } 
     .toggleMenu { 
      display: none; 
      background: #666; 
      padding: 10px 15px; 
      color: #fff; 
     } 
     .nav { 
      list-style: none; 
      *zoom: 1; 
      background: #175e4c; 
     } 
     .nav:before, 
     .nav:after { 
      content: " "; 
      display: table; 
     } 
     .nav:after { 
      clear: both; 
     } 
     .nav ul { 
      list-style: none; 
      width: 9em; 
     } 
     .nav a { 
      padding: 10px 15px; 
      color: #fff; 
     } 
     .nav li { 
      position: relative; 
     } 
     .nav > li { 
      float: left; 
      border-top: 1px solid #104336; 
     } 
     .nav > li > .parent { 
      background-image: url("images/downArrow.png"); 
      background-repeat: no-repeat; 
      background-position: right; 
     } 
     .nav > li > a { 
      display: block; 
     } 
     .nav li ul { 
      position: absolute; 
      left: -9999px; 
     } 
     .nav > li.hover > ul { 
      left: 0; 
     } 
     .nav li li.hover ul { 
      left: 100%; 
      top: 0; 
     } 
     .nav li li a { 
      display: block; 
      background: #1d7a62; 
      position: relative; 
      z-index: 100; 
      border-top: 1px solid #175e4c; 
     } 
     .nav li li li a { 
      background: #249578; 
      z-index: 200; 
      border-top: 1px solid #1d7a62; 
     } 
     @media screen and (max-width: 768px) { 
      .active { 
       display: block; 
      } 
      .nav > li { 
       float: none; 
      } 
      .nav > li > .parent { 
       background-position: 95% 50%; 
      } 
      .nav li li .parent { 
       background-image: url("images/downArrow.png"); 
       background-repeat: no-repeat; 
       background-position: 95% 50%; 
      } 
      .nav ul { 
       display: block; 
       width: 100%; 
      } 
      .nav > li.hover > ul, 
      .nav li li.hover ul { 
       position: static; 
      } 
     } 
    </style> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
    <div class="container"> 

     <a class="toggleMenu" href="#">Menu</a> 
     <ul class="nav"> 
      <li class="test"> 
       <a href="#">Shoes</a> 
       <ul> 
        <li> 
         <a href="#">Womens</a> 
         <ul> 
          <li><a href="#">Sandals</a> 
          </li> 
          <li><a href="#">Loafers</a> 
          </li> 
          <li><a href="#">Flats</a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">Mens</a> 
         <ul> 
          <li><a href="#">Loafers</a> 
          </li> 
          <li><a href="#">Sneakers</a> 
          </li> 
          <li><a href="#">Formal</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 



      <li> 
       <a href="#">Shipping Info</a> 
      </li> 
     </ul> 
    </div> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
     var ww = document.body.clientWidth; 

     $(document).ready(function() { 
      $(".nav li a").each(function() { 
       if ($(this).next().length > 0) { 
        $(this).addClass("parent"); 
       }; 
      }) 

      $(".toggleMenu").click(function(e) { 
       e.preventDefault(); 
       $(this).toggleClass("active"); 
       $(".nav").toggle(); 
      }); 
      adjustMenu(); 
     }) 

     $(window).bind('resize orientationchange', function() { 
      ww = document.body.clientWidth; 
      adjustMenu(); 
     }); 

     var adjustMenu = function() { 
      if (ww < 768) { 
       $(".toggleMenu").css("display", "inline-block"); 
       if (!$(".toggleMenu").hasClass("active")) { 
        $(".nav").hide(); 
       } else { 
        $(".nav").show(); 
       } 
       $(".nav li").unbind('mouseenter mouseleave'); 
       $(".nav li a.parent").unbind('click').bind('click', function(e) { 
        // must be attached to anchor element to prevent bubbling 
        e.preventDefault(); 
        $(this).parent("li").toggleClass("hover"); 
       }); 
      } else if (ww >= 768) { 
       $(".toggleMenu").css("display", "none"); 
       $(".nav").show(); 
       $(".nav li").removeClass("hover"); 
       $(".nav li a").unbind('click'); 
       $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { 
        // must be attached to li so that mouseleave is not triggered when hover over submenu 
        $(this).toggleClass('hover'); 
       }); 
      } 
     } 
    </script> 
</body> 

</html>

來源

2016-03-15 07:23:16 ahmdabos

謝謝，它幫助。 :) –

你的歡迎:) – ahmdabos

手機屏幕上可點擊的子菜單

回答

相關問題