展开/折叠没有JavaScript的移动导航栏 [英] Expand/collapse mobile navbar without JavaScript

问题描述

在移动设备上，Bootstrap 3默认将导航栏（navbar）缩小为汉堡包图标。单击汉堡包时，JavaScript会切换导航菜单项的显示，即展开或折叠导航栏。但

如何在不需要JavaScript的情况下切换引导移动导航栏折叠/展开？

它会有很好的性能优势：用户可以在JavaScript执行之前进行导航（对于移动连接来说很好），较小的项目可以完全放弃对jQuery + bootstrap javascript的依赖，节省第一页加载大约45k。此外，网站会在JS错误的情况下变得更加强大 - 至少网页导航仍然可用。

或者，可以来切换显示

如何在SO之前讨论没有JavaScript的CSS属性， href =http://stackoverflow.com/questions/20009469/changing-custom-css-attributes-without-javascript> 1 。应用此引导很简单。

尝试 实时演示 感谢 rawgit 或在 flexponsive

完整的演示可在Github专案bs3-navbar-collapse-without-javascript 。

浏览器支持

• 广泛支持CSS一般兄弟选择器


• 已在移动设备上成功测试：Android 5和iOS 8

限制

• 如果您决定使用JS，下拉列表仍然需要JS。

< h1>详细步骤

首先，您需要添加自定义CSS：

  / *显示当选中navbar切换时的折叠* / 
＃navbar-toggle-cbox：checked〜.collapse {
 display：block; 
} 
 
 / *复选框仅在内部使用;不显示它* / 
＃navbar-toggle-cbox {
 display：none 
} 
  

然后按如下所示更改navbar HTML：

  > 
< input type =checkboxid =navbar-toggle-cbox> 
<！ - 将hamburger图标从一个按钮更改为复选框的标签 - > 
< div class =navbar-header> 
< label for =navbar-toggle-cboxclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbararia-expanded = navbar> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / label> 
<！ -  end label not button  - > 
  

On mobile devices, Bootstrap 3 by default reduces the navigation bar (navbar) to a hamburger icon. When clicking the hamburger, a JavaScript toggles the display of the navigation menu items - either expanding or collapsing the navbar. But

how to toggle the bootstrap mobile navbar collapse/expand without requiring JavaScript?

If this were possible, it would have nice performance advantages: users can already navigate before JavaScript is executed (a good plus on flaky mobile connections), and smaller projects may be able to drop the dependency on jQuery + bootstrap javascript entirely, saving around 45k on first page load. Plus, the site becomes more robust in case of JS errors - at least the page navigation stays usable.

Alternatively, one could re-implement the bootstrap JS without jQuery dependency - done here for the navbar.

For reference, this is what the static navbar top example looks like in mobile mode:

解决方案

Yes, it's possible!

Getting the BS3 mobile navbar to toggle without JavaScript

1. creating a hidden checkbox that contains the navbar state (expand if checked)

2. changing the navbar button to a label for this invisible checkbox

3. use the CSS General Sibling Selector to toggle display of the navbar.

How to change CSS attributes without JavaScript was discussed before on SO, and the principle shown there 1. Applying this bootstrap is straightforward.

Try the Live demo thanks to rawgit or see it in production on flexponsive

A full demo is available on Github project bs3-navbar-collapse-without-javascript.

Browser Support

• the CSS general sibling selector is widely supported
• successfully tested in mobile: Android 5 and iOS 8
• also works on desktop: Chrome 43 and Firefox 38

Limitations

• dropdowns still require JS, if you decide to use them

Steps in detail

First, custom CSS you need to add:

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}

Then change the navbar HTML as follows:

<!-- insert checkbox -->
<input type="checkbox" id="navbar-toggle-cbox">
<!-- change the "hamburger" icon from being a button to a label for checkbox -->
<div class="navbar-header">
 <label for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </label>
<!-- end label not button -->

这篇关于展开/折叠没有JavaScript的移动导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！