在侧边栏打开的情况下，从移动设备到平板电脑显示的语义UI转换

vamsiampolu 发表于 Dev

瓦姆西安波卢

这是我的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;  
    }
}

当我调整屏幕630像素或更低时，水平导航栏菜单消失，按钮出现在page.A链接截图的中心是在这里

我打开侧边栏，并调整屏幕宽度大于630像素的地方删除菜单项在侧边栏，但没有侧边栏itself.There是截图在这里

如何以超过630像素的分辨率打开侧边栏也不会消失？

编辑：

当侧边栏处于打开状态时，语义ui将其他所有内容包装到一个pusher类中，并向中添加一个pushable类body，它使用类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

瓦姆西安波卢

我找到了使用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');
  });

这是一个小提琴，这是一个可运行的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。