javascript - 响应式导航栏(移动设备问题)

Question

我一直在努力让我的导航栏响应，我一直在使用 W3Schools 作为指南来尝试实现响应式导航栏但未能成功，我希望出现一个图标，该图标将在访问我的时显示移动设备上的作品集，但我无法完成此任务，下面我将链接我使用的 w3schools 页面、我的代码和它在我的网站上的外观示例。

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

Example of how it look on a phone

function myFunction() {
  var x = document.getElementById("mynav-area");
  if (x.className === "nav-area") {
    x.className += " responsive";
  } else {
    x.className = "nav-area";
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: impact;
  margin: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
  max-width: 100%;
  max-height: 100%;
}

.fix {
  clear: both;
  overflow: hidden;
}

header {
  overflow: hidden;
  height: 100vh;
}

.nav-area {
  z-index: 1;
  float: right;
  height: 70px;
  position: relative;
  text-align: center;
  width: 100%;
  top: 1%;
}

.menu-area {
  float: right;
  top: 15%;
  list-style: none;
  margin: 20px;
}

.menu-area li {
  display: inline-block;
  margin: 0px;
}

.menu-area li a {
  text-decoration: none;
  color: #fff;
  padding: 0px 20px;
  letter-spacing: 2px;
  font-family: sans-serif;
}

.menu-area li.active a {
  color: #FF00BD;
}

.menu-area li a:hover {
  color: #FF00BD;
}

.banner-text {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  font-family: sans-serif;
  transform: translate(-50%, -50%);
}

.banner-text h2 {
  color: #fff;
  font-size: 80px;
  margin: 0;
}

.banner-text h3 {
  color: #fff;
  font-size: 30px;
  margin: 0;
}

.banner-text-hi {
  position: absolute;
  color: #fff;
  font-size: 80px;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
}

.banner-text-hi h2 {
  color: #fff;
  font-size: 80px;
  margin: 0;
}

.banner-text-hi h3 {
  color: #FF00BD;
  font-size: 30px;
  margin: 0;
}

.banner-text-name {
  z-index: 1;
  float: left;
  position: absolute;
  color: #fff;
  width: 60%;
  text-align: center;
  top: 3.5%;
  right: 55%;
  font-family: sans-serif;
  text-decoration: none;
}

.banner-text-name h2 {
  color: #fff;
  font-size: 20px;
  margin: 0;
  font-family: sans-serif;
  text-decoration: none;
}

.banner-text h2 span {
  color: #FF00BD;
}

canvas {
  display: block;
  height: 100vh;
  width: 100vh;
}

.snow {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

.split {
  color: white;
  font-family: sans-serif;
  height: 100%;
  width: 33.33%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

.left {
  left: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.left h2 {
  color: aliceblue;
  font-family: sans-serif;
}

.right h2 {
  color: aliceblue;
  font-family: sans-serif;
}

.center {
  left: 33%;
  right: 33%;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.right {
  right: 0;
  background: #0F2027;
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
}

a {
  text-decoration: none;
}

.class1,
.class2,
.class3 {
  width: 33.33%;
  float: left;
  height: 100px;
  color: #fff;
  font-family: sans-serif;
}

p {
  padding-top: 25px;
  text-align: center;
}

@import "bourbon";
$col-primary: #00c7ec;
$corner-radius: 5px;
.button {
  z-index: 0;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 30px;
  display: inline-block;
  position: relative;
  text-align: center;
  color: $col-primary;
  border: 1px solid $col-primary;
  border-radius: $corner-radius;
  line-height: 3em;
  padding-left: 5em;
  padding-right: 5em;
  box-shadow: 0 0 0 0 transparent;
  @include transition(all 0.2s ease-in);
  &:hover {
    color: white;
    box-shadow: 0 0 30px 0 transparentize($col-primary, 0.5);
    background-color: $col-primary;
    @include transition(all 0.2s ease-out);
    &:before {
      @include animation(shine 0.5s 0s linear);
    }
  }
  &:active {
    box-shadow: 0 0 0 0 transparent;
    @include transition(box-shadow 0.2s ease-in);
  }
  &:before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: white;
    box-shadow: 0 0 15px 3px white;
    @include transform(skewX(-20deg));
  }
}

@include keyframes(shine) {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}

@import "compass/css3";
$width : 220px;
$height: 70px;
$border: 4px;
$violet: #6559ae;
$orange: #ff7159;
$deg : 120deg;
$size: 400%;
$dur : 3s;
@mixin clip-frame($width, $height, $border) {
  -webkit-clip-path: polygon(0% 100%, $border 100%, $border $border, $width - $border $border, $width - $border $height - $border, $border $height - $border, $border 100%, 100% 100%, 100% 0%, 0% 0%);
}

.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color: white;
  text-decoration: none;
  position: absolute;
  bottom: 15px;
  right: 2%;
}


/*    start code for the actual button:         */


/*   
        Spot is the span on the inside of the href that
        fills the parent and makes the hover and link work
        for the entire div
    */

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


/*
        This is the outer svg wrapper that the SVG itself will 
        fill. Multiple svg-wrapper classes can be put side by side.
    */

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}


/*
      This is where we define the fill, color, thickness,
      and stroke pattern of the SVG when there is no hover.
      The dasharray and offset together define the line position
      under the words. Here's also where the transition speed is set.
    */

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #FF00BD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}


/* 
        Pushing the text up into the SVG. Without this the
        text would be below the div's.
    */

#text {
  margin-top: -35px;
  text-align: center;
}

#text a {
  color: white;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}


/* 
        Changing the shape on hover. I change the color of the stroke,
    make it thinner, then set it to again wrap around the entire parent element.
    */

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #FF00BD;
}

@media screen and (max-width: 600px) {
  .nav-area a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .nav-area.responsive {
    position: relative;
  }
  .nav-area.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav-area.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.nav-area .icon {
  display: none;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Joe's Portfolio</title>
</head>


<body>
  <!-- Navigation Bar -->
  <header class="fix">
    <div class="nav-area">
      <ul class="menu-area">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="work.html">Coursework</a></li>
        <li><a href="future.html">Future Aspirations</a></li>
        <li><a href="about.html">About Me</a></li>
        <li><a href="cvpage.html.html">CV</a></li>
        <li><a href="contact.html">Contact</a></li>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
      </ul>
      <!-- Navigation Bar End -->


      [1]: /image/v8ErC.png

Answer 1

我已经用你的 css 和 html 更新了响应式菜单，检查一下，希望这对你有帮助。

function myFunction() {
    var x = document.getElementById("mynav-area");
    if (x.className === "menu-area") {
      x.className += " responsive";
    } else {
      x.className = "menu-area";
    }
  }

body {
        margin: 0;
        padding: 0;
        font-family: impact;
        margin: 0; 
        background: #0F2027; 
        background: linear-gradient(to bottom, #0F2027, #080e10);
        max-width: 100%;
        max-height: 100%;
    }

    .fix {
        clear: both;
        overflow: hidden;
    }

    header {
        overflow: hidden;
        height: 100vh;
    }

    .nav-area {
        z-index: 1;
        float: right;
        height: auto;
        position: relative;
        text-align: center;
        width: 100%;
    }

.menu-area {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

    .menu-area li {
        display: inline-block;
        margin: 0px;
    }

    .menu-area li a, .nav-area a {
        text-decoration: none;
        color: #fff;
        padding: 20px;
        letter-spacing: 2px;
        font-family: sans-serif;
        display: inline-block;
    }

    .menu-area li.active a{
        color: #FF00BD;
    }

    .menu-area li a:hover {
        color: #FF00BD;
    }

    .banner-text {
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        font-family: sans-serif;
        transform: translate(-50%, -50%);
    }

    .banner-text h2 {
        color: #fff;
        font-size: 80px;
        margin: 0;
    }

    .banner-text h3 {
        color: #fff;
        font-size: 30px;
        margin: 0;
    }   

    .banner-text-hi {
        position: absolute;
        color: #fff;
        font-size: 80px;
        width: 60%;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: sans-serif;
    }

    .banner-text-hi h2 {
        color: #fff;
        font-size: 80px;
        margin: 0;
    }

    .banner-text-hi h3 {
        color: #FF00BD;
        font-size: 30px;
        margin: 0;
    }

    .banner-text-name {
        z-index: 1;
        float: left;
        position: absolute;
        color: #fff;
        width: 60%;
        text-align: center;
        top: 3.5%;
        right: 55%;
        font-family: sans-serif;
        text-decoration: none;
    }

    .banner-text-name h2 {
        color: #fff;
        font-size: 20px;
        margin: 0;
        font-family: sans-serif;
        text-decoration: none;
    }

    .banner-text h2 span {
        color: #FF00BD;
    }

canvas { 
    display: block;
    height: 100vh;
    width: 100vh;
}
.snow { 
    pointer-events: none;
    position:fixed; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    max-width: 100%;
    max-height: 100%;
}

.split {
    color: white;
    font-family: sans-serif;
  height: 100%;
  width: 33.33%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

.left { 
  left: 0;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.left h2 {
    color: aliceblue;
    font-family: sans-serif;
}

.right h2 {
    color: aliceblue;
    font-family: sans-serif;
}
.center {
  left:33%;
  right:33%;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.right {
  right: 0;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
}

a {
    text-decoration: none;
}

.class1,
.class2,
.class3 {
  width: 33.33%;
  float: left;
  height: 100px;
  color: #fff;
  font-family: sans-serif;
}

p {
  padding-top: 25px;
  text-align: center;
}


@import "bourbon";

$col-primary: #00c7ec;
$corner-radius: 5px;

.button {
    z-index: 0;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 30px;

  display: inline-block;
  position: relative;
  text-align: center;
  color: $col-primary;
  border: 1px solid $col-primary;
  border-radius: $corner-radius;

  line-height: 3em;
  padding-left: 5em;
  padding-right: 5em;

  box-shadow: 0 0 0 0 transparent;

  @include transition(all 0.2s ease-in);

  &:hover {
    color: white;
    box-shadow: 0 0 30px 0 transparentize($col-primary, 0.5);
    background-color: $col-primary;

    @include transition(all 0.2s ease-out);

    &:before {
      @include animation(shine 0.5s 0s linear);
    }
  }

  &:active {
    box-shadow: 0 0 0 0 transparent;
    @include transition(box-shadow 0.2s ease-in);
  }

  &:before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;

    opacity: 0;
    background: white;
    box-shadow: 0 0 15px 3px white;
    @include transform(skewX(-20deg));
  }
}

@include keyframes(shine) {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}

@import "compass/css3";

$width:  220px;
$height: 70px;
$border: 4px;

$violet: #6559ae;
$orange: #ff7159;

$deg:  120deg;
$size: 400%;
$dur:  3s;

@mixin clip-frame($width, $height, $border) {
  -webkit-clip-path: polygon(0% 100%, $border 100%, $border $border, $width - $border $border, $width - $border $height - $border, $border $height - $border, $border 100%, 100% 100%, 100% 0%, 0% 0%);
}


.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color:white;
  text-decoration:none;
  position:absolute;
  bottom:15px;
  right:2%;
}
/*    start code for the actual button:         */


/*   
    Spot is the span on the inside of the href that
    fills the parent and makes the hover and link work
    for the entire div
*/

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/*
    This is the outer svg wrapper that the SVG itself will 
    fill. Multiple svg-wrapper classes can be put side by side.
*/

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}
/*
  This is where we define the fill, color, thickness,
  and stroke pattern of the SVG when there is no hover.
  The dasharray and offset together define the line position
  under the words. Here's also where the transition speed is set.
*/

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #FF00BD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}
/* 
    Pushing the text up into the SVG. Without this the
    text would be below the div's.
*/

#text {
  margin-top: -35px;
  text-align: center;
}

#text a {
  color: white;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* 
    Changing the shape on hover. I change the color of the stroke,
make it thinner, then set it to again wrap around the entire parent element.
*/

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #FF00BD;
}
.nav-area .icon {
        display: none;
      }
      @media screen and (max-width: 991px) {
        .nav-area ul li:not(:first-child) {
          display: none;
          background: #212020;
          }
          ul.menu-area.responsive li:first-child {
          background: #212020;
          }
        .nav-area a.icon {
          float: right;
          display: block;
          position: absolute;
          right: 0;
          top: 0;
        }
        .nav-area.responsive {position: relative;}

        ul.menu-area.responsive li {
          display: block;
          background: #3c3a3a;
        }
      }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Navigation Bar -->
<header class="fix">
  <div class="nav-area">
      <ul class="menu-area" id="mynav-area">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="work.html">Coursework</a></li>
          <li><a href="future.html">Future Aspirations</a></li>
          <li><a href="about.html">About Me</a></li>
          <li><a href="cvpage.html.html">CV</a></li>
          <li><a href="contact.html">Contact</a></li>
          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
          </a>
      </ul>
        </div>
      </header>

<!-- Navigation Bar End -->