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。

语义用户界面将其侧边栏定位为类right，left，top和bottom。我希望边栏位于right用于平板电脑和计算机，top位于移动设备上。

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

语义UI具有用于显示/隐藏内容的css类mobile only，tablet only。但这还不够，因为侧边栏是由这样的JavaScript触发的：

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

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

我很感激你的建议。从语义UI的角度来看，我特别感兴趣的是最优雅的解决方案。

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

一切顺利，丁鲷

Answer 1

仅限移动设备和平板电脑实际上只是基于某些预定屏幕宽度显示/隐藏元素的媒体查询。你可以使用jQuery自己完成这个。

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

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

1 个答案: