全角縦方向のナビアイテムを表示

Question

ハンバーガーアイコンをクリックしたときにhttp://www.startupturkey.com/のようなnav機能を実装したかったのです。どうすればいいですか？私はCSSのフレームワークのための意味uiを使用しています。ここで私が試したことは何ですか？

<header class="header"> 
     <!-- <i class="reorder icon"></i> --> 
     <a href="#" class="header__logo">LOGO</a> 
     <i class="content icon header-icon" style="float: right;"></i> 
     <div class="ui vertical menu" style="display:none;"> 
     <a class="active teal item"> 
      Blog 
     </a> 
     <a class="item"> 
      Discussion 
     </a> 
     <a class="item"> 
      Features 
     </a> 
     <a class="item"> 
      Team 
     </a> 
     </div> 
    </header> 
    <section class="home-header show"> 
     <div class="overlay"></div> 
     <div class="request-invitation"> 
     <h2>REQUEST AN INVITATION</h2> 
     </div> 
     <div class="short-intro"> 
     <h1>HEADING IN THE MIDDLE OF IMAGE</h1> 
     </div> 
    </section> 


body { 
    background: #e8e8e8; 
} 

.header { 
    height: 66px; 
    line-height: 66px; 
    color: #fff; 
    background-color: #e8e8e8; 
} 

i.content.icon.header-icon{ 
    color: rgba(102, 102, 102, 0.71); 
    font-size: 3em; 
} 

i.remove.icon.header-icon{ 
    color: rgba(102, 102, 102, 0.71); 
    font-size: 3em; 
} 

.header .menu a{ 
    margin: 10px; 
    font-size: 1.2em; 
} 

.header__logo { 
    font-weight: 700; 
    padding: 0 25px; 
    float: left; 
} 

/* MENU */ 
.menu { 
    float: right; 
} 

section.home-header.show { 
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1Hv_aIqhvzszFyuTWFJlxJzqsQI0Y-eQmCFto8j9mRTER3GMFlI5vQS83) center; 
} 

section.home-header { 
    background: #000; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
    z-index: 1; 
    -moz-transition: 2s background-color; 
    -o-transition: 2s background-color; 
    -webkit-transition: 2s background-color; 
    transition: 2s background-color; 
} 

.request-invitation { 
    background: #fff; 
    z-index: 100; 
    width: 25%; 
    position: absolute; 
    top: 50%; 
    padding: 25px; 
    color: rgba(27, 28, 29, 0.77); 
    text-decoration: underline; 
} 

.short-intro { 
    color: #fff; 
    z-index: 100; 
    font-weight: 900; 
    text-align: center; 
    margin: 10em 20em; 
    /* left: 50%; */ 
} 

.short-intro h1 { 
    font-size: 4em; 
} 

.short-intro h3{ 
    margin-top: 5px; 
} 

Answer 1

https://jsfiddle.net/0taywkL5/

は、このウェブサイトを見てみましょう：そこ https://www.w3schools.com/howto/howto_js_sidenav.asp あなたはそれがトップNAVだろうあなたのための「サイド・ナビ」を^^作成する方法を見ることができます。私はポジションだと思う https://jsfiddle.net/feys00e6

<div id="mySidenav" class="sidenav">