如何针对不同的屏幕尺寸更改语义 UI 侧边栏的位置？

Question

我正在使用语义 UI 侧边栏 — 这是标准设置：

       <div class="ui inverted labeled icon right inline vertical sidebar menu">
          <a class="item">
            <i class="home icon"></i>
            Home
          </a>
          <a class="item">
            <i class="block layout icon"></i>
            Topics
          </a>
          <a class="item">
            <i class="smile icon"></i>
            Friends
          </a>
          <a class="item">
            <i class="calendar icon"></i>
            History
          </a>
        </div>

这里还有一个JSFiddle。

语义 UI 将其侧边栏定位为类 right、left、top 和 bottom。对于平板电脑和计算机，我想将侧边栏定位为 right，在移动设备上定位为 top。

根据屏幕尺寸控制侧边栏位置的最佳方法是什么？换句话说，如何将侧边栏放在移动设备的顶部，而将其放在其他屏幕尺寸的右侧？

语义 UI 有 css 类 mobile only，tablet only 用于 showing/hiding 内容。但这还不够，因为侧边栏是由 JavaScript 触发的，如下所示：

$('.ui.sidebar')
  .sidebar({
    context: $('.bottom.segment')
  })
  .sidebar('attach events', '.menu .tS')
;

所以我猜我需要某种 JS 和 css 的组合来实现侧边栏基于屏幕尺寸的动态定位，但我就是没能做到。

非常感谢您的建议。从语义 UI.

的角度来看，我对什么被认为是最优雅的解决方案特别感兴趣

这是我使用语义的第一个项目UI。

一切顺利，丁奇

Answer 1

仅限移动设备和仅限平板电脑实际上只是 show/hide 元素基于某些预定屏幕宽度的媒体查询。您可以使用 jQuery.

自行完成此操作

$(window).resize(function () {
   if (window.innerWidth < 600) { //Some arbitrary mobile width
      $(".sidebar").addClass('top').removeClass('right');
   } else {
      $(".sidebar").removeClass('top').addClass('right');
   }
});

如何针对不同的屏幕尺寸更改语义 UI 侧边栏的位置？

How to change position of Semantic UI sidebar for different screen sizes?

javascript

css

jquery

semantic-ui