语义 UI (React)：通过在移动设备上更改为水平来响应垂直菜单

Question

我正在使用垂直菜单（ semantic ui react ）。 这是我的结构：

<Grid>
    <Grid.Column mobile={16} tablet={5} computer={5}>
        <div className='ui secondary pointing menu vertical compact inherit'>
            <a className='item'>
                Element
            </a>
        </div>
    </Grid.Column>
</Grid>

但是我需要菜单变成移动设备上的水平图标菜单。 是否有可能以这种方式响应？ 我的意思是在计算机上它应该是带有文本项的垂直菜单，而在移动设备上它应该是带有图标的水平显示...

Answer 1

我认为您正在寻找可堆叠的菜单变体。 此外，您可以将 Grid 的可见性用于更复杂的事情。

Answer 2

我一直在寻找响应式反应语义 UI 菜单，这看起来不错，折叠时带有一个汉堡包图标

https://codesandbox.io/s/325y47xk36

Answer 3

我在我的反应应用程序中使用这个包https://www.npmjs.com/package/dna-responsive-nav 。