如何将桌面站点的导航转换为可折叠菜单？

Question

头部有一个我更愿意保留的导航菜单，但占用了太多的空间。我能做些什么来使它在移动设备上看起来不错？

Answer 1

一种可能性是使用切换器 - 使其内部内容出现/消失的按钮。该库包含一些小部件，其中之一是一个非常简单但useful toggler implementation。它也是那么不显眼。

您需要包含铀js文件，以便您可以使用它。然后，您可以按照下面的说明进行操作。

您需要将菜单代码转换为三部分：包装容器，“按钮”部分和内容部分。识别每个那些部分的，使用这些数据属性：

data-ur-set="toggler" 

（添加该属性来包装）

data-ur-toggler-component="button" 

（添加此属性的 “按钮” 一节）

data-ur-toggler-component="content" 

（将此属性添加到内容节）

您需要包括这些CSS规则太多地方：

*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] { 
    display:none; 
} 
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] { 
    display: block; 
} 

你可以看到一个小例子运行位置：http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b。

移动网站Bloomingdales和Macys都使用该方法。你可以看到它在那里工作。