純粋なCSSフライアウトメニュー - タップ/タッチ/クリック時の表示/非表示

Question

水平フライアウトを実装するCSS専用メニューを変更しようとしています。元のコードはホバー上でそれを行います。タッチ/タップで同じことを達成しようとしています - それを表示するには一度タップし、もう一度タップするとタップします。

これは純粋なCSSを使用して可能ですか？

私は以下のコードを挿入しましたが、コードページを参照してください - それはより良いレンダリングです。私が直面している課題は、今私はそれがメニューを表示するために押さなければならない - どのように私は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; 
} 

codepen：チェックする疑似クラス：http://codepen.io/anon/pen/EKreRy