Javascript 显示全宽垂直导航项目

我想实现与单击汉堡图标时类似的导航功能。我怎样才能做到？我正在为css框架使用语义ui。这是我试过的吗

博客
讨论
特征
团队
请求邀请
图像中锋
身体{
背景：#e8e8e8；
}
.标题{
高度：66px；
线高：66px；
颜色：#fff；
背景色：#e8e8e8；
}
i、 content.icon.header-icon{
颜色：rgba（102,102,102,0.71）；
字号：3em；
}
i、 删除.icon.header-icon{
颜色：rgba（102,102,102,0.71）；
字号：3em；
}
.标题.菜单a{
利润率：10px；
字体大小：1.2米；
}
.header__标志{
字号：700；
填充：0 25px；
浮动：左；
}
/*菜单*/
.菜单{
浮动：对；
}
section.home-header.show{
背景：url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1Hv_aIqhvzszFyuTWFJlxJzqsQI0Y-eQmCFto8j9mRTER3GMFlI5vQS83）中心；
}
第3节主标题{
背景：#000；
背景尺寸：封面；
宽度：100%；
身高：100%；
溢出：隐藏；
位置：相对位置；
z指数：1；
-moz过渡：2s背景色；
-o过渡：2s背景色；
-webkit过渡：2s背景色；
过渡：2s背景色；
}
.请求邀请{
背景：#fff；
z指数：100；
宽度：25%；
位置：绝对位置；
最高：50%；
填充：25px；
颜色：rgba（27,28,29,0.77）；
文字装饰：下划线；
}
.简短介绍{
颜色：#fff；
z指数：100；
字号：900；
文本对齐：居中；
边缘：10em-20em；
/*左：50%*/
}
.简短介绍h1{
字号：4em；
}
.简短介绍h3{
边缘顶部：5px；
}

看看这个网站： 在那里你可以看到如何为你创建“侧导航”，它将是一个顶部导航

这里是一个正在工作的JSFIDLE，它只需要更多的样式：

---

我认为这门课你错过的绝对位置-.ui.vertical.menuI看不到开放块。我只看到关闭图标，当我点击时，什么也没有发生。如果我注释position:fixed，则会显示open和close，当我单击open时，导航项将显示为jsfiddle。实际上，您只需复制并粘贴小提琴，或者查看w3schools网站

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

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