单击菜单时覆盖（并删除边框）

Question

my name is Daniel and im working on my portfolio website. 我叫Daniel，我正在我的投资组合网站上工作。 I want an overlay when i click on my hamburger menu so that everything becomes darker and the focus lays on the menu. 当我单击汉堡菜单时，我想要一个覆盖层，以使所有内容都变暗，并且焦点位于菜单上。 And i want it to go away when you click on the menu again, or click on one of the menu items or click on the overlay self. 我希望它在您再次单击菜单时消失，或者单击菜单项之一或单击叠加自身。 (only for my mobile version) （仅适用于我的移动版）

Also i have weird border-line when i open my hamburger menu on mobile and i don't know how to remove it 当我在手机上打开汉堡菜单时，我也感到奇怪的边界线，我不知道如何删除它

Link to my website so far: http://20162.hosts.ma-cloud.nl/portfoliowebsite/ 到目前为止链接到我的网站： http : //20162.hosts.ma-cloud.nl/portfoliowebsite/

(the latest version isn't online yet) （最新版本尚未在线）

HTML: HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <meta name="author" content="Daniel Gotz">
  <title>Daniel Gotz | Porfolio </title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">
  <link href="css/scrolling-nav.css" rel="stylesheet">
  <link href="dist/hamburgers.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
 </head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

  <!-- Navigation -->   
  <section id="intro" class="intro-section">
        <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header page-scroll">
          <button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
    <span class=" hamburger-inner"></span> </span>
          </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav right">
            <li class="hidden">
              <a class="page-scroll" href="#page-top"></a>
            </li>
            <li> <a class="page-scroll" href="#intro">Intro</a> </li>
            <li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
            <li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
            <li> <a class="page-scroll" href="#contact">Contact</a> </li>
          </ul>
      </div>
    </nav>

    <div class="overlay" id="overlay"></div>


       <div class="title">
      <h1> Every mountain top is within reach if you just keep climbing</h1> </div>

      <div class="berg">
    <img src="berg.svg">


      </div>


  </section>
  <section id="mijnwerk" class="about-section"> </section>
  <section id="overdaniel" class="services-section"> </section>
  <section id="contact" class="contact-section"> </section>
  <!-- jQuery -->
  <script src="js/jquery.js"></script>
  <!-- Bootstrap Core JavaScript -->
  <script src="js/bootstrap.min.js"></script>
  <!-- Scrolling Nav JavaScript -->
  <script src="js/jquery.easing.min.js"></script>
  <script src="js/scrolling-nav.js"></script>
  <script src="js/hamburgers.js"></script>
</body>

</html>

CSS: CSS：

.overflow {
  overflow-x: hidden;
  position: relative;
}

.home {
  height: 100vh;
  width: 100vw;
  background-color: #2ecc71;
}

.mijnwerk {
  height: 100vh;
  width: 100vw;
  background-color: #27ae60;
}


.navbar-default {
  background: none;
  border-color: transparent;
    z-index: 3;  
}

.right {
  float: right;
  text-align: right;



}

.navbar-default .navbar-nav>li>a {
  font-family: 'Roboto', sans-serif;
  color: #ecf0f1;
  font-size: 14px;



}

.nav>li>a {
  padding: 15px 25px;
    border-style: none;



}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: #ecf0f1;
      border-style: none;

}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background: none


}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-style: none;



}



h1 {

  font-family:  'Exo 2' , sans-serif;
  font-weight: 900;
  font-size: 37px;
  line-height: 60px;


}

.title {
  font-family: 'Exo 2', sans-serif;
  text-align: center;
  width: 350px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.berg {
    position: absolute;
    width: 100%;
    bottom: 0;
    margin: 0  0 -2px 0;

}

.overlay {
    position: fixed;
    top: 0;
    z-index: 2;
    display: none;
    overflow: auto;
    width: 100%;
    height: 100%;
    background: #333;
}

body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {

    }

    .top-nav-collapse {
        padding: 0;
    }
}

.intro-section {
    height: 100%;
    background: #2ecc71;
    color: white;
  text-align: center;


}

.about-section {
    height: 100%;
    background: #27ae60;
}

.services-section {
    height: 100%;
    background: #3498db;
}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

JS: JS：

// Look for .hamburger
  var hamburger = document.querySelector(".hamburger");
  // On click
  hamburger.addEventListener("click", function() {

    // Toggle class "is-active"
    hamburger.classList.toggle("is-active");
    // Do something else, like open/close menu
  });

I hope someone can help me out with these problems! 我希望有人可以帮助我解决这些问题！ :) :)

Answer 1

With this config you just pass background to the menu, and the close button will not be included and remove the border. 使用此配置，您只需将背景传递到菜单，关闭按钮将不包括在内并删除边框。

 .navbar-collapse navbar-ex1-collapse collapse in {
        background: rgba(27, 27, 62, 0.5);
    }

 .navbar-default {
    background: none;
    border: none;
    z-index: 3;
    }

单击菜单时覆盖（并删除边框）

问题描述

1 个解决方案

解决方案1
0 2017-07-31 19:39:54

单击菜单时覆盖（并删除边框）

问题描述

1 个解决方案

解决方案1 0 2017-07-31 19:39:54

解决方案1
0 2017-07-31 19:39:54