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

问题

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>

There is also a JSFiddle here.

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?

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')
;

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.

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.

This is my first project using Semantic UI.

All best, Tench

回答1:

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');
   }
});

来源：https://stackoverflow.com/questions/33624778/how-to-change-position-of-semantic-ui-sidebar-for-different-screen-sizes

标签

javascript

jquery

css

semantic-ui