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