Semantic-UI從移動設備到平板電腦的轉換，側邊欄打開

Question

這是我的html在那里我有一個pointing menu時，屏幕寬度超過630px ，並帶有菜單按鈕欄，當屏幕寬度小於630px ：

<nav class="ui inverted sidebar menu vertical slide out" id="m_menu">
<a href="index.php" class="item">
    <i class="home icon"></i>Home
  </a>

  <a href="about.php" class="item">
    <i class="user icon"></i>User
  </a>

  <a href="portfolio.php" class="item">
    <i class="archive icon"></i> Portfolio
  </a>
</nav>

<div id="menuDiv">
  <nav class="ui inverted fluid four item pointing menu" id="menu">

    <a href="index.php" class="item">
      <i class="home icon"></i>Home
    </a>

    <a href="about.php" class="item">
      <i class="user icon"></i>User
    </a>

    <a href="portfolio.php" class="item">
      <i class="archive icon"></i> Portfolio
    </a>

    <a href="contact.php" class="item">
      <i class="message icon"></i> Contact
    </a>

  </nav>

  <div class="ui labeled icon button black" id="m_btn">
    <i class="icon list layout"></i> Menu
  </div>
</div>


<img src="http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg" alt="Table With Chairs">

這是我的css：

  body{
 margin:0;
  padding:0;
  font-family:"helvetica",arial;
}

#menuDiv{
  margin:40px 40px 0 40px;
  text-align:center;
}

#menu:{
  max-width:1024px;
  margin:0 auto;
}

#m_btn{display:none;}

img{
  width:100%;
  height:auto;
  position:absolute;
  top:0;
  z-index:-1;
}

@media all and (max-width:630px)
{
  #menu{display:none;}
  #m_btn{
    display:inline-block;
  }
}

/*fails to fix sidebar sidebar showing @width>=631px*/
@media all and (min-width:631px)
{
    /*suggested on tutsplus,no change on applying*/
    body.pushable{margin-left:0 !important;}
    #m_menu.visible{
      display:none;  
    }
}

當我將屏幕大小調整為630px或更低時，水平導航欄菜單消失，頁面中央出現一個按鈕。屏幕截圖的鏈接在這里

我打開側邊欄並將屏幕調整到大於630px的寬度，在那里刪除邊欄中的菜單項而不是側邊欄本身。這里有一個截圖

即使以630px以上的分辨率打開，如何確保側邊欄消失？

編輯：

當側邊欄打開時，語義ui將其他所有內容包裝到pusher類中並向body添加pushable類，它使用visible類來為您提供有關側邊欄正在執行的操作的信息，這是嘗試的原因

   @media all and (min-width:631px)
  {
    /*suggested on tutsplus,no change on applying*/
    body.pushable{margin-left:0 !important;}
    #m_menu.visible{
      display:none;  
    }
  }

這是DOM看起來像側邊欄可見的東西：

  <body class="pushable">
     <nav class="ui inverted sidebar menu vertical slide out uncover left animating visible" id="m_menu">
  <a href="index.php" class="item">
    <i class="home icon"></i>Home
  </a>

  <a href="about.php" class="item">
    <i class="user icon"></i>User
  </a>

  <a href="portfolio.php" class="item">
    <i class="archive icon"></i> Portfolio
  </a>
</nav>

<div class="pusher dimmed"><div id="menuDiv">
  <nav class="ui inverted fluid four item pointing menu" id="menu">

    <a href="index.php" class="item">
      <i class="home icon"></i>Home
    </a>

    <a href="about.php" class="item">
      <i class="user icon"></i>User
    </a>

    <a href="portfolio.php" class="item">
      <i class="archive icon"></i> Portfolio
    </a>

    <a href="contact.php" class="item">
      <i class="message icon"></i> Contact
    </a>

  </nav>

  <div class="ui labeled icon button black" id="m_btn">
    <i class="icon list layout"></i> Menu
  </div>
</div><img src="http://paulandtwyla.files.wordpress.com/2010/02/table-chairs-2.jpg" alt="Table With Chairs"></div>
</body>

這是一個jsfiddle和一個runnable

Answer 1

感謝更新Fiddle示例，問題似乎是CSS和jQuery之間的視覺更改之間存在沖突。 此外，一旦屏幕尺寸變回桌面，就沒有任何代碼可以強制移動菜單隱藏。

我提出的解決方案是首先調整CSS以滿足每個media query的主要視覺變化，然后使用檢查屏幕寬度更改的偵聽器對jQuery更改執行相同操作。

這是一個行動的小提琴

CSS

如果關閉腳本，您的CSS應始終處理您想要實現的基礎知識。 否則，頁面可能會中斷。 這也有很少的頁面加載的好處（當CSS可以處理它時從不使用JS）。

如果您使用媒體查詢進行更改，則需要明確說明任何移動/非移動元素應該發生什么。 鑒於我們正在談論具有狀態的東西： showing/hidden ，您必須指定這些狀態涉及的內容：

對於你的移動布局：

@media all and (max-width:630px) {

/* First, hide the main menu */
    #menu {
      display:none;
    }
/* then display the mobile menu */
    #m_menu {
        display:block;
    }
/* lastly, show your mobile menu button */
    #m_btn{
        display:inline-block;
    }
}

桌面布局

基本上撤消您為移動版所做的一切：

@media all and (min-width:631px) {
/* Hide the mobile menu */
    #m_menu {
        display:none;
    }
/* Unhide the regular menu */
    #menu{
      display:block;
    }
/* Lastly, hide the mobile menu button */
    #m_btn{
       display:none;
   }    
}

或者，您可以完全刪除桌面樣式周圍的媒體查詢，因為無論一旦超過(max-width:630px)都將應用在(max-width:630px)之外指定的任何樣式。

jQuery的

然后，您可以應用偵聽器來檢查寬度何時更改超過所選斷點。 抓住確切的寬度是很棘手的，因為“630”射得太寬，所以我選擇了617，因為它與最接近的media query斷點相匹配。

請注意，這僅適用於調整屏幕大小，即用戶拖動瀏覽器大小或將其設備方向從portrait更改為landscape或反之亦然。

在if語句中，只有在屏幕調整為桌面大小時才會觸發，然后我們可以強行隱藏#m_menu 。

$(window).resize(function() {
// Detect if the resized screen is mobile or desktop width
    if($(window).width() > 617) {
        console.log('desktop'); 
        $('#m_menu').sidebar('hide');
    }
    else {
       console.log('mobile');
    }
});

可能有一種更好的方法來完成最后一部分，因為.resize()可能每秒激發很多次，並且可能會顯着減慢頁面速度。

根據我構建自適應網站的經驗，有一個專門針對此類場景設置的“條件javascript”代碼段非常有用，其行為方式與media queries相同。

Answer 2

我找到了一個使用enquirejs的問題的解決方案，可以用來監聽匹配和不匹配的媒體查詢。

  <script src="//rawgit.com/weblinc/media-match/master/media.match.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.js"></script>

  var query='all and (min-width : 631px)';
  enquire.register(query,function(){
   $('#m_menu').sidebar('hide');
  });

這是一個小提琴，這是一個可以運行的。

Semantic-UI從移動設備到平板電腦的轉換，側邊欄打開

問題描述

編輯：

2 個解決方案

解決方案1
2 2014-12-15 06:15:50

解決方案2
0 已采納 2014-12-18 23:28:06

Semantic-UI從移動設備到平板電腦的轉換，側邊欄打開

問題描述

編輯：

2 個解決方案

解決方案1 2 2014-12-15 06:15:50

解決方案2 0 已采納 2014-12-18 23:28:06

解決方案1
2 2014-12-15 06:15:50

解決方案2
0 已采納 2014-12-18 23:28:06