jquery – Semantic-UI从侧边栏打开的移动设备到平板电脑的转换

这是我的html,当屏幕宽度超过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或更低时,水平导航栏菜单消失,页面中央出现一个按钮.截图链接为here

我打开侧边栏并将屏幕调整到大于630px的宽度,它会删除侧边栏中的菜单项而不是侧边栏本身.有截图here

即使以630px以上的分辨率打开,如何确保侧边栏消失？

编辑：

当侧边栏打开时语义ui将其他所有内容包装到推送器类中并向主体添加可推送类,它使用可见类来为您提供有关侧边栏正在执行的操作的信息,这是尝试的原因

@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

解决方法

感谢更新fiddle示例,问题似乎是CSS和jQuery之间的视觉更改之间存在冲突.此外,一旦屏幕尺寸变回桌面,就没有任何代码可以强制移动菜单隐藏.

我提出的解决方案是首先调整CSS以满足每个媒体查询的主要视觉变化,然后使用检查屏幕宽度更改的侦听器对jQuery更改执行相同操作.

这是一个 Fiddle的实际行动

CSS

如果关闭脚本,您的CSS应始终处理您想要实现的基础知识.否则,页面可能会中断.这也有很少的页面加载的好处(当CSS可以处理它时从不使用JS).

如果您使用媒体查询进行更改,则需要明确说明任何移动/非移动元素应该发生什么.鉴于我们正在谈论具有状态的东西：显示/隐藏,您必须指定这些状态涉及的内容：

对于你的移动布局：

@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;
   }    
}

或者,您可以完全删除桌面样式周围的媒体查询,因为无论一旦超过630px,都将应用在(max-width：630px)之外指定的任何样式.

jQuery的

然后,您可以应用侦听器来检查宽度何时更改超过所选断点.抓住确切的宽度是很棘手的,因为“630”射得太宽,所以我选择了617,因为它与最接近的媒体查询断点相匹配.

请注意,这仅适用于调整屏幕大小,即用户拖动其浏览器大小或将其设备方向从纵向更改为横向或反之亦然.

在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”代码段非常有用,其行为方式与媒体查询相同.

原文地址：https://www.jb51.cc/jquery/177229.html

jquery – Semantic-UI从侧边栏打开的移动设备到平板电脑的转换

解决方法

相关推荐