如何將桌面站點的導航轉換爲可摺疊菜單？

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都使用該方法。你可以看到它在那裏工作。