Question

我正在攻击一个小型网站项目，现在只尝试使用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;

    }

Answer 1

对于没有JS或jQuery解决方案，您必须选择input selectors checkbox来siblings切换:checked个ul { display: none; } input[type="checkbox"]:checked+ul { display: block; }事件。

如下面的代码段所示。

代码段

＆＃13;

<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>

＆＃13;

CD.COM

＆＃13;

Answer 2

这个解决方案在iOS Safari中并不好用，但它似乎可以在其他地方使用。

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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

点击在没有JS的情况下打开和关闭移动设备上的bootstrap汉堡包菜单

2 个答案:

代码段