如何更改不同屏幕尺寸的语义UI侧栏的位置? [英] How to change position of Semantic UI sidebar for different screen sizes?

问题描述

我正在使用语义UI侧栏-这是标准设置:

I am using a Semantic UI sidebar — it's a standard setup:

       <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位置.

Semantic UI positions its sidebar with classes right, left, top and bottom. I would like to have the sidebar positioned right for tablets and computers, and top on mobile devices.

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

What would be the best way to control the position of the sidebar based on the screen size? In other words, how could one position the sidebar on top for mobiles, and leave it on the right for other screen sizes?

语义UI具有用于显示/隐藏内容的CSS类mobile only，tablet only.但这还不够，因为侧边栏由JavaScript触发，如下所示:

Semantic UI has css classes mobile only, tablet only for showing/hiding content. But that's not enough here, because the sidebar is triggered by JavaScript like this:

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

所以我猜测我需要某种JS和CSS的组合才能根据屏幕尺寸实现边栏的动态定位，但我只是无法到达那儿.

so I'm guessing I need some kind of combination of JS and css to achieve the dynamic positioning of the sidebar based on the screen size, but I just haven't been able to get there.

感谢您的建议.从语义UI的角度来看，我对什么才是最优雅的解决方案特别感兴趣.

I'd be grateful for your suggestions. I'm especially interested in what would be considered the most elegant solution from the point of view of Semantic UI.

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

This is my first project using Semantic UI.

祝一切顺利， 绷紧

推荐答案

仅移动设备和仅平板电脑实际上只是基于某些预定屏幕宽度显示/隐藏元素的媒体查询.您可以使用jQuery自行完成此操作.

Mobile only and tablet only are actually just media queries that show/hide elements based on some predetermined screen width. You can do this on your own using jQuery.

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

这篇关于如何更改不同屏幕尺寸的语义UI侧栏的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！