如何更改不同屏幕尺寸的語義UI邊欄的位置？

我使用的是語義UI欄 - 這是一個標準的安裝：如何更改不同屏幕尺寸的語義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。但是，這還不夠，在這裏，因爲側邊欄是由JavaScript這樣的觸發：

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

所以我猜我需要一些JS的組合和CSS來實現基於屏幕上的側邊欄的動態定位大小，但我只是無法到達那裏。

我很感激您的建議。我特別感興趣的是從Semantic UI的角度來看，它將被認爲是最優雅的解決方案。

這是我第一個使用Semantic UI的項目。

所有最好的，坦奇

來源

2015-11-10 Tench

你的小提琴是空的。 – vijayP

抱歉。錯了。現在糾正它。 [http://jsfiddle.net/psychomachine/8mwbd5f4/6/](http://jsfiddle.net/psychomachine/8mwbd5f4/6/） – Tench

手機只和平板電腦僅實際上只是媒體查詢，顯示基於一些預定屏幕寬度/隱藏要素。您可以使用jQuery自行完成此操作。

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

來源

2015-11-10 17:50:16 Harangue

非常感謝J4G！ – Tench

如何更改不同屏幕尺寸的語義UI邊欄的位置？

回答

相關問題