README

这是一个小型模块，旨在为您提供一种简单的方法来

当视口较窄（=移动视图）时添加简单的移动菜单按钮
通过使用CSS类将移动/桌面触发器集成到现有的桌面/移动菜单布局中
配置一个简单的像素断点，在桌面和移动视图模式之间切换布局（或只是菜单）

该模块使用JavaScript来确定移动/桌面模式，这或许不是最干净的方式，但相当简单。也许在某个时候可以通过创建另一种方法来构建纯CSS的移动/桌面菜单，从而将JavaScript要求设置为可选。至少到目前为止，需要jQuery，但除此之外没有使用任何外部库。

特性

这不是一个“开箱即用”的解决方案，而是设计得如此，以便它不会引导您使用一些预设计的菜单布局，这会使您在学习如何修改菜单以适应您网站布局时面临很大的学习曲线。

菜单按钮

本模块为您提供了一个简单的移动菜单按钮，看起来像这样：。它有三个粗黑线，背景透明。如果它不符合您的审美，您始终可以更改它 - 虽然目前没有简单的设置，所以只需使用您的CSS文件覆盖 a#mobile-menu-button 的 background-image 。此外，请记住相应地更改元素的宽度和高度。

要使菜单按钮显示出来，请将 <% include MobileMenuButton %> 放置在SilverStripe模板的某个位置，或者您也可以创建一个 <a id="mobile-menu-button"></a> HTML元素并按需自定义。

菜单元素

该模块中没有实际的菜单模板。请在您的 layout.css 或其他样式表中使用以下CSS选择器来检测不同的模式

body.mobile-width your-element-selector-here：当视口宽度小于当前定义的断点（默认为768px）时应用。
body.desktop-width your-element-selector-here：当视口宽度大于当前定义的断点（默认为768px）时应用。
body.mobile-menu-open your-element-selector-here：当移动菜单按钮被点击并且移动菜单应该可见时（通常在页面上所有其他元素之上）应用。
body.mobile-menu-closed your-element-selector-here：当移动菜单按钮没有被点击（或被再次点击）并且移动菜单应该隐藏时应用。

如果您需要一个在桌面和移动视图模式之间切换的菜单的示例，以下是为您的

HTML

<a id="mobile-menu-button"></a>
<nav>
	<% loop $Level(1) %>
		<a href="$Link" title="$Title.XML">$MenuTitle.XML</a>
	<% end_loop %>
</nav>

CSS

nav
{
	background-color: #e1e1e1;
}

body.mobile-width nav
{
	display: none; /* Hide the menu by default in mobile mode */
}
 
body.mobile-width.mobile-menu-open nav
{
	/* When the mobile menu is opened, position it across the whole viewport */
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh; /* Make the navigation view as tall as the viewport is (not as tall as the page is) */
	z-index: 1; /* Put the menu above everything else (except the mobile menu button, see below). */
}
 
body.mobile-width.mobile-menu-open nav a
{
	display: block;
}

a#mobile-menu-button
{
	z-index: 2; /* Display the button always above the mobile menu even if it's open */
	float: right; /* Not needed, but better avoids overlapping with the content of the nav element. Replace this with your own way to position the button in the right place on your page. */
}

此示例尚未经过测试。如果您在其中发现错误，请告诉我，我将尽力解决。

移动视图和桌面视图之间的断点

默认断点是768像素。它不会以任何方式影响您的布局，因此如果您希望，您可以只为移动菜单定义一个断点，或者您可以将其用于更大范围的布局，这样您就可以省略媒体查询（至少如果您的布局设计简单，单个断点就足够了）。

更改断点，创建一个名为 mysite/_config/mobilemenu.yml 的文件，并将其内容放入其中

MobileMenu:
  breakpoint: your-custom-value-in-pixels #Default: 768

元视图端口

如果您在CSS中使用 @media 查询，您可以将 <% include MobileMenuMeta %> 放入您的 <head> 部分中。这将为您提供以下元视图端口HTML代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但是，这并非此模块运行的必需条件。

未来

目前没有计划 :)。有什么想法吗？ :) 欢迎Pull Request、问题报告和反馈！

作者

您可以通过GitHub联系我，我的用户名是 Taitava。该模块使用MIT许可证。

taitava / silverstripe-mobilemenu

维护者

详细信息

README

特性

菜单按钮

菜单元素

移动视图和桌面视图之间的断点

元视图端口

未来

作者