README

为 contao 设计的平滑动画导航菜单，具有悬停下拉菜单（例如在大屏幕上）和抽屉式菜单（例如在移动设备上）模式。

技术说明

• 通过使用 nav_buttermenu_default 模板将黄油菜单附加到您的 navigation 前端模块。
• 在 页面设置（Encore Fieldset）中将 contao-buttermenu-bundle 设置为 活动条目
• 将 @import "~contao-buttermenu/scss/_buttermenu"; 添加到您的项目 scss 文件中，并在需要的情况下调整变量

样式

默认情况下不生成样式，将 $bm-menu-generate-classes 设置为 true 以使用默认样式设置黄油菜单，否则请按以下说明使用提供的混入。

默认模式所需的混入（包含在您的媒体查询中）

@include media-breakpoint-up(md) {
	@include bm-default(theme-color('primary'));
}

紧凑抽屉式模式所需的混入（包含在您的媒体查询中）

// .header_compact.scss
@include media-breakpoint-down(sm) {
	@include bm-compact-basics();
	@include bm-compact-backdrop();
	@include bm-compact-default(theme-color('primary'));
}

使用紧凑抽屉式模式

如果您已在 nav_buttermenu_default 模板上将 data-bm-compact-mode 设置为 off-canvas，则需要一个画布包装器以及一个汉堡菜单。以下示例显示了它的工作原理

<div class="header-static">
	<a href="/" class="header-brand">
		<img src="logo.png" alt="logo"
	</a>
	<button class="hamburger hamburger--spin" type="button" data-bm-compact-toggle=".bm-compact-canvas" aria-controls=".header-collapse" aria-expanded="false">
	  <span class="hamburger-box">
	    <span class="hamburger-inner"></span>
	  </span>
	</button>
</div>
<div class="header-collapse bm-compact-canvas" aria-hidden="false">
	<div class="header-language">
		<!-- Optional: Change language module can be here by using {{insert_module::x}} -->
	</div>
	<div class="header-meta">
		<!-- Optional: Meta navigation can be here by using {{insert_module::x}} -->
	</div>
	<div class="header-navbar bm-compact-scroll">
		<!-- Required: Insert your Navigation menu module with attached nav_buttermenu_default here by using {{insert_module::x}} -->
	</div>
</div>

我们建议使用 Jonathan Suh 的动画 Hamburger 图标。当抽屉式菜单打开时，将自动添加 is-active。

设置