Question

我使用mmenu插件进行非画布导航。在移动设备上，单击切换按钮时，主菜单将从左侧滑入。在桌面上我隐藏了切换按钮，菜单显示在浏览器的顶部。为了简单起见，我只是隐藏了桌面上的菜单＆＃39;因为这不是问题 - 而且它为我节省了不需要的CSS。

我遇到的问题是在桌面上我有嵌套列表，就像一个大型菜单。这一切都原则上有效，但样式有点偏，因为我有1 li作为标题，包含另一个嵌套列表，包含该部分的所有选项。

这是一个有效的CodePen：https://codepen.io/moy/pen/NYjpPG

点击＆＃34; Fresh Meat＆＃34;面板滑动。然后，如果您单击其中一个子类别，它会再次滑动，从而显示更多内容。

如果我摆脱嵌套列表并使用div标签，它就会停止工作。但我真的很想这样做而且我没有看到它为什么不起作用的原因？

这里是一个分叉的CodePen，我用div个元素替换了嵌套列表，并删除了li周围的标题＆＃39;：{{3 }}

现在的问题是，＆＃34; Fresh Meat＆＃34;现在显示在同一个面板上！

任何对此有更多经验的人都可以解释为什么这不起作用并希望能帮助我解决这个问题吗？

注意我收到的StackOverflow代码段是无效的版本。它看起来应该可以使用div's，除非我正在阅读https://codepen.io/moy/pen/oqWZXa错误？

＆＃13;

/* ==========================================================================
   #MMENU (plugin)
   ========================================================================== */
   
/* 
 * Slide-out mobile menu with sub-menu support.
 * http://mmenu.frebsite.nl
 */
 
/* 
 * Main Menu navigation.
 */

$(document).ready(function() {
	$(".site-nav").mmenu({
		// Options
		navbar: {
			title: false
		},
		navbars: {
			"position": "top",
			"content": [
				"searchfield"
			]
		},
		"searchfield": {
            "panel": true,
            "showSubPanels": false,
            "showTextItems": true
		}
	}, {
		// Configuration
		clone: true,
		offCanvas: {
			pageSelector: ".page"
		},
		classNames: {
			selected: "active",
			fixedElements: {
				fixed: "fixed",
				sticky: "sticky"
            }
		},
		
	});
	
	var API = $(".site-nav").data("mmenu");
	var $icon = $(".mmenu-toggle");
      
	$icon.on("click", function() {
		API.open();
	});

	API.bind( "open:finish", function() {
		setTimeout(function() {
			$icon.addClass( "is-active" );
		}, 100);
	});
	
	API.bind( "close:finish", function() {
		setTimeout(function() {
			$icon.removeClass( "is-active" );
		}, 100);
	});
});

＆＃13;

.page-head .site-nav {
  display: none;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.0.3/jquery.mmenu.all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.0.3/jquery.mmenu.all.js"></script>
<div class="page">
  <header class="page-head sticky">

    <a href="#my-page" class="mmenu-toggle"><span>Menu</span></a>

    <nav class="site-nav">
      <ul class="site-nav__list">
        <li class="site-nav__item has-megamenu"><span class="site-nav__link">Fresh Meat</span>

          <div class="megamenu">

            <div class="megamenu__block">
              <span class="megamenu__title">Shop by Type</span>
              <ul class="megamenu__list">
                <li class="megamenu__item"><a href="#" class="megamenu__link">Bacon and Sausages</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">BBQ Packs</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Beef</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Chicken</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Christmas</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Gift Packs</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Lamb</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Pork</a></li>
              </ul>
            </div>

            <div class="megamenu__block">
              <span class="megamenu__title">Shop by Category</span>
              <ul class="megamenu__list">
                <li class="megamenu__item"><a href="#" class="megamenu__link">Lean Meat</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Roasting Joints</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Steaks</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Burgers</a></li>
                <li class="megamenu__item"><a href="#" class="megamenu__link">Special Offers</a></li>
              </ul>
            </div>

            <div class="megamenu__block">
              <span class="megamenu__title">You may also like</span>
              <div>
                <a href="#" class="megamenu__promo">
											<img src="img/temp/promo-images/megamenu-promo-1.jpg" alt="ALT TEXT" class="megamenu__promo-image" />
											<h3 class="megamenu__promo-caption">Best Buys handpicked by our head butcher</h3>
										</a>
                <a href="#" class="megamenu__promo">
											<img src="img/temp/promo-images/megamenu-promo-2.jpg" alt="ALT TEXT" class="megamenu__promo-image" />
											<h3 class="megamenu__promo-caption">Save £20 with our Monthly Meat Packs</h3>
										</a>
                <a href="#" class="btn megamenu__btn">See more deals</a>
              </div>
            </div>

          </div>

        </li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Special Offers</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Meat Boxes</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">BBQ</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Butchers Blog</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">About Us</a></li>
      </ul>
    </nav>

  </header>
</div>

＆＃13;

mmenu中的嵌套列表

0 个答案: