[英]How can I convert a desktop site's navigation into a collapsable menu?
The header has a navigation menu I'd prefer to keep, but it's taking up too much space. 标题有一个我宁愿保留的导航菜单,但它占用了太多的空间。 What can I do to make it look good on mobile?
我该怎么做才能让它在移动设备上看起来很棒?
One possibility is to use togglers - buttons that make its inner content appear/disappear. 一种可能性是使用切换器 - 使其内部内容出现/消失的按钮。 The uraniumjs library contains some widgets, one of them being a very simple yet useful toggler implementation .
uraniumjs库包含一些小部件,其中一个小部件是一个非常简单但有用的切换器实现 。 It also does that unobtrusively.
它也是不引人注目的。
You will need to include the uranium js file, so you can just use it. 您需要包含铀js文件,以便您可以使用它。 Then, you can do it as explained below.
然后,您可以按照以下说明执行此操作。
You need to transform your menu code into three parts: a wrapper container, a "button" section and a content section. 您需要将菜单代码转换为三个部分:包装容器,“按钮”部分和内容部分。 To identify each of those parts, use these data attributes:
要识别每个部分,请使用以下数据属性:
data-ur-set="toggler"
(add this attribute to the wrapper) (将此属性添加到包装器)
data-ur-toggler-component="button"
(add this attribute to the "button" section) (将此属性添加到“按钮”部分)
data-ur-toggler-component="content"
(add this attribute to the content section) (将此属性添加到内容部分)
You need to include these CSS rules somewhere too: 您还需要在某处包含这些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;
}
You can see a small example running here: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b . 你可以在这里看到一个小例子: http : //play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b 。
Both the Bloomingdales and the Macys mobile sites use that approach. Bloomingdales和Macys移动网站都使用这种方法。 You can see it working there.
你可以看到它在那里工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.