[英]Semantic UI: Make vertical menu (sidebar) collapse in tablet and mobile view
I'm building an HTML + CSS design based on Semantic UI and I was able to make pretty much any element responsive by using the class stackable
. 我正在建立基于语义UI的HTML + CSS设计,通过使用
stackable
类,我几乎可以使任何元素做出响应。
However the left vertical menu, which I use as a visible sidebar, won't collapse in tablet and mobile view. 但是,我用作可见侧栏的左侧垂直菜单在平板电脑和移动设备视图中不会折叠。
The result I need is exactly like the Semantic UI Docs page: the sidebar visible in desktop and landscape tablet and hidden, but toggleable, in portrait tablet and mobile. 我需要的结果与“语义UI文档”页面完全一样:侧边栏在台式机和横向平板电脑中可见,而在纵向平板电脑和移动设备中隐藏但可切换。
Here's my code: 这是我的代码:
<div class="ui left vertical menu collapsible main sidebar visible desktop only">
<div class="transparent-bg">
<div class="ui center aligned basic sideheader segment">
<h2 class="ui header">Dashboard</h2>
</div>
<a class="bold item">
<i class="building outline icon"></i>Add Item
</a>
<a class="active item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
</div>
Any idea on how I can achieve this? 关于如何实现此目标的任何想法吗? There's no documentation on the official docs page.
官方文档页面上没有文档。
Many thanks! 非常感谢!
我不使用语义UI,但是您是否检查过https://semantic-ui.com/modules/sidebar.html ?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.