css - 纯 CSS 弹出菜单 - 在点击/触摸/单击时显示/隐藏

Question

我正在尝试修改实现水平弹出窗口的纯 CSS 菜单。原始代码在悬停时执行。我试图通过触摸/点击实现相同的功能 - 即:点击一次显示它，再次点击关闭它。

这可能使用纯 CSS 吗？

我插入了下面的代码，但请引用 codepen - 它呈现得更好。我现在面临的挑战是我必须按住它才能显示菜单 - 如何在不使用 javascript 的情况下进行切换？

代码笔:http://codepen.io/pliablepixels/pen/WwPgwg

/*
Forked from http://codepen.io/IanLunn/pen/NPapxy */
/*
 sass flyout.scss >flyout.css (sudo gem install sass)
 or sass flyout.scss --style compressed >flyout.min.css
 "IL" logo Copyright (c) Ian Lunn Design Limited 2015

 Modified by pliable pixels
*/
.drawer {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  /*height: 100%;*/
  padding: .4em 0;
  background: #7D294E;
  color: white;
  text-align: center;
  /* Remove 4px gap between <li> */
  font-size: 0;
}
.drawer li {
  pointer-events: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  transform: translateZ(0);
}
.drawer a {
  pointer-events: auto;
  position: relative;
  display: block;
  min-width: 5em;
  margin-bottom: .4em;
  padding: .4em;
  line-height: 100%;
  /* Reset font-size */
  font-size: 16px;
  text-decoration: none;
  color: white;
  transition: background 0.2s;
}
.drawer a:active, .drawer a:focus {
  background: #B44659;
}
.drawer i {
  display: block;
  margin-bottom: .2em;
  font-size: 2em;
}
.drawer span {
  font-size: .625em;
  font-family: sans-serif;
  text-transform: uppercase;
}
.drawer li:active ul {
  /* Open the fly-out menu */
  transform: translateX(0);
  background: #B44659;
  /* Enable this if you wish to replicate hoverIntent */
}
.drawer > li {
  display: block;
  /* Fly out menus */
}
.drawer > li > a {
  background: #7D294E;
}
.drawer > li:active, .drawer > li:focus {
  z-index: 100;
}
.drawer > li:active, .drawer > li:focus a {
  background: #B44659;
}
.drawer > li a:active {
  background: #F56356;
}
.drawer > li ul {
  position: absolute;
  /* Stack below the top level */
  z-index: -1;
  top: 0;
  left: 100%;
  /* height: 100%;*/
  width: auto;
  white-space: nowrap;
  /* Close the menus */
  transform: translateX(-100%);
  background: #B44659;
  transition: 0.2s transform;
}

<ul class="drawer">
        <li>
            <a href="">
               
                <span>Info</span>
            </a>
            <ul>
                <li>
                    <a href="http://www.google.com">
                        
                        <span>Item 1</span>
                    </a>
                </li>
                <li>
                    <a href="http://www.google.com" >
                        
                        <span>Item 2</span>
                    </a>
                </li>
                <li>
                    <a href="http://www.google.com">
                        
                        <span>Item 3</span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>

Answer 1

检查以下代码，它应该适合您。

<a href="#something">Show</a>
<div id="something">Bingo!</div>

CSS:

#something {
  display: none;
}

#something:target {
  display: block;
}

这是一个代码笔:http://codepen.io/anon/pen/EKreRy