在没有 JS 的移动设备上单击以打开和关闭引导汉堡菜单答案

【问题标题】：Clicking to open and close a bootstrap hamburger menu on mobile device without JS在没有 JS 的移动设备上单击以打开和关闭引导汉堡菜单
【发布时间】：2017-07-22 05:32:33
【问题描述】：

我正在开发一个小型网站项目，目前仅尝试使用 HTML 和 CSS，并且对桌面版本非常满意，但是在我的 iPhone 上进行测试时，我可以通过单击展开汉堡菜单，但它不会再次单击它或在屏幕外单击时折叠。用 jquery 似乎比较容易解决，但我现在真的很好奇，如果没有我能做到吗？

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Website</title>
    <!--fonts-->
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
    <!--//fonts-->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- for-mobile-apps -->
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="Personal Website" />
    <!-- //for-mobile-apps -->
</head>
<body>
    <header>
        <a href="index.html" id="logo"></a>
        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#">WORK</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>

CSS：

@media only screen and (max-width : 640px) {

    header {

        position: absolute;

    }

    #menu-icon {

        display:inline-block;

    }

    nav ul, nav:active ul { 

        display: none;
        position: absolute;
        padding: 20px;
        background: #fff;
        border: 5px solid #444;
        right: 20px;
        top: 60px;
        width: 50%;
        border-radius: 4px 0 4px 4px;

    }

    nav li {

        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;

    }

    nav:hover ul {

        display: block;

    }

【问题讨论】：

标签： html css twitter-bootstrap responsive-design hamburger-menu

【解决方案1】：

此解决方案在 iOS Safari 中表现不佳，但似乎在其他任何地方都可以使用。

/* The necessities */
.onclick-menu {
	position: relative;
	display: inline-block;
}
.onclick-menu:before {
	content: "Click me!";
}
.onclick-menu:focus {
	pointer-events: none;
}

.onclick-menu:focus .onclick-menu-content {
	opacity: 1;
	visibility: visible;
}

.onclick-menu-content {
	pointer-events: auto;
	position: absolute;
	z-index: 1;

	opacity: 0;
	visibility: hidden;
	transition: visibility 0.5s;
	-moz-transition: visibility 0.5s;
	-webkit-transition: visibility 0.5s;
	-o-transition: visibility 0.5s;
}

.onclick-menu.no-pointer-events {
	pointer-events: auto !important;
}

.onclick-menu.no-visibility .onclick-menu-content {
	visibility: visible !important;
	display: none;
}

.onclick-menu.no-visibility:focus .onclick-menu-content {
	display: block;
}

.onclick-menu.no-opacity .onclick-menu-content {
	opacity: 1 !important;
}

/*
Eye candy 
( colors courtesy of https://kuler.adobe.com/try-color-theme-3350110 )
*/
.onclick-menu {
	padding: 0;
	margin: 0 0 1em 0;
	outline: 0;
}
.onclick-menu:before {
	padding: 5px 10px;
	background-color: #94a4a5;
}
.onclick-menu-content {
	background-color: #364656;
	width: auto;

	margin-top: 19px;
	margin-left: 0;
	padding: 10px;
}

/* arrow for the expanding part */
.onclick-menu-content:before {
	content: "";
	width: 0;
	height: 0;

	border-bottom: 10px solid #364656;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;

	position: absolute;
	top: -10px;
}

.onclick-menu-content li {
	color: #f2f5e9;
	list-style-type: none;
	white-space: nowrap;
}

/* style the buttons */
.onclick-menu-content button {
	background: transparent;
	border: none;
	color: inherit;
	cursor: inherit;
	outline: 0;
	cursor: pointer;
}
.onclick-menu-content button:hover {
	color: #ff8c31;
}

<div tabindex="0" class="onclick-menu">
    <ul class="onclick-menu-content">
        <li><button onclick="alert('click 1')">Look, mom</button></li>
        <li><button onclick="alert('click 2')">no JavaScript!</button></li>
        <li><button onclick="alert('click 3')">Pretty nice, right?</button></li>
    </ul>
</div>

这最初是由 Koen Kivits 发布的。这是his website的链接。

【讨论】：

【解决方案2】：

如果没有JS 或jQuery 解决方案，您必须使用input selectors （如checkbox）在其:checked 事件上切换他们的siblings。

如下面的sn-p所示。

代码片段

ul {
  display: none;
}

input[type="checkbox"]:checked+ul {
  display: block;
}

<header>
  <a href="index.html" id="logo"></a>
  <nav>
    <input id="menu-icon" type="checkbox" />
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#">WORK</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

【讨论】：