Question

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

使用纯CSS可以吗？

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

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

Answer 2

以下代码对我有用

<!DOCTYPE html>
<html>
   <body>
       <a href="#something" id='target'>Show</a>
       <div id="something">Bingo!<a href="#target">hide</a></div>
       <style>
           #something {display: none;}
           #something:target {display: block;}
           #target:target #something{display: none;}
    </style>
</div>
</body>

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

2 个答案: