[英]How can i make my Semantic Ui menu collapsable
This is my Semantic Ui menu, stackable for mobile devices. 这是我的语义Ui菜单,可堆叠用于移动设备。 On low resolutions (mobile devices) i wanna make this collapsable.
在低分辨率(移动设备)上,我想使其可折叠。 Insert something like this http://i.imgur.com/6gEp3Py.png
插入类似这样的内容http://i.imgur.com/6gEp3Py.png
How can i do this? 我怎样才能做到这一点? Ty
泰
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div id="container" class="ui fluid container"> <div id="navbar" class="ui stackable yellow inverted menu"> <div class="item"> <img src="assets/images/logo.png"> </div> <a class="item" href="">Page1</a> <div class="ui pointing dropdown link item"> <span class="text yellow inverted">Page 2</span> <i class="dropdown icon"></i> <div class="menu"> <a class="item" href="">Small</a> <a class="item">Medium</a> <a class="item">Large</a> </div> </div> <a class="item" href="">Page 3</a> <a class="item" href="">Page 4</a> <a class="item" href="">Page 5</a> </div> </div> <script src="semantic/dist/semantic.min.js"></script> <script> $('.dropdown').dropdown({ transition: 'drop', on: 'hover' }); </script> </body> </html>
Maybe put all items to <div id="hiddable">
and add css mediaquery: 也许将所有项目放入
<div id="hiddable">
并添加CSS mediaquery:
@media only screen and (max-width: 320px){
#hiddable { display:none }
}
And add 并添加
$( ".dropdown" ).click(function() {
$("#hiddable").show();
});
or somehting like this. 或类似的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.