手机/台式机的不同菜单

Question

so I'm using Bootstrap and working on different menus for desktop/tablet and mobile. I have a regular top-fixed navbar for desktop/tablet and a couple of the tabs are drop-down menus with multiple columns making it illogical to use this for mobile, so I'm doing a slide push menu for that. Can anyone point me in the general direction of how to do so efficiently? I know how to implement the menus themselves, it's just facilitating which is shown for their respective devices. Would I need to use media queries and display:none for the respective menus, or possibly a JS if statement? Would the latter cause mobile versions to load the site slower to a point where it isn't feasible as the other menu is extensive?

I've searched SE, and found an answer but it was for WP only so didn't really help, but it utilized an if statement. Thanks for your help!

Answer 1

If you are using Bootstrap, there are class that you can use to tell a part is hidden depending on the screen's width.

These class are hidden-xs , hidden-sm and so on.

See this on the bootstrap documentation : http://getbootstrap.com/css/#responsive-utilities

Answer 2

使用display : none媒体查询功能将完成此任务，并且不会在移动版本中引起任何问题。