菜单打开后H1没有隐藏

时间：2018-07-18 08:12:10

标签： javascript jquery html css menu

有人可以解释一下为什么打开菜单（全角）时菜单不重叠h1的原因。我尝试了<span>，并且<span>还可以，当我想要h1, h2...无效时。

打开菜单后，我可以看到它。我还尝试了菜单上的z-index，但没有做任何事情，与h1一样，但是仍然没有。

以下是CSS + HTML（带有JS）的代码：

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

header {
  background-color: #1d1d1d;
  color: #EBEBD3;
  padding: 1em 0;
  position: fixed;
  width: 100%;
}

header::after {
  content: '';
  clear: both;
  display: block;
}

.logo {
  float: left;
  font-size: 1rem;
  margin: 0;
  position: relative;
  left: 5%;
  text-transform: uppercase;
  font-weight: 700;
}

.logo span {
  font-weight: 400;
}

.site-nav {
  position: absolute;
  background-color: #1d1d1d;
  top: 100%;
  right: 0;
  height: 0px;
  overflow: hidden;
  transition: .5s ease-in-out;
  opacity: 0;
  width: 100%;
}

.site-nav--open {
  height: auto;
  opacity: 100;
}

.site-nav ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.site-nav li {
  width: 100%;
  text-align: center;
  /*	border-bottom: 1px solid #575766;*/
}

.site-nav li:last-child {
  /*	border-bottom: none;	*/
}

.site-nav a {
  font-weight: 800;
  font-size: 40px;
  color: #9E9E9E;
  text-decoration: none;
  display: block;
  padding: 2em;
  text-transform: uppercase;
  z-index: 99999;
}

.site-nav a:hover,
.site-nav a:focus {
  color: white;
}

.menu-toggle {
  position: fixed;
  padding: 1em;
  position: absolute;
  right: .75em;
  top: .5em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background-color: #ebebbd;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: .5s ease-in-out;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(90deg);
}

.open .hamburger {
  transform: rotate(45deg);
}

#particles-js {
  height: 100vh;
}

#about {
  height: 100vh;
}

#portfolio {
  height: 100vh;
  background-color: blue;
}

#contact {
  height: 100vh;
  background-color: red;
}

h1.main {
  color: white;
  position: absolute;
  top: 50%;
  left: 5%;
  font-size: 5em !important;
}

h2 {
  color: white;
  position: absolute;
  top: 60%;
  left: 5%;
  font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
  <header>
    <div class="container">
      <h1 class="logo">Panco <span>design</span></h1>
      <nav class="site-nav">
        <ul>
          <li><a class="menu-link" href="#particles-js">Home</a></li>
          <li><a class="menu-link" href="#about">About</a></li>
          <li><a class="menu-link" href="#portfolio">Portfolio</a></li>
          <li><a class="menu-link" href="#contact">Contact</a></li>
        </ul>
      </nav>
      <div class="menu-toggle">
        <div class="hamburger"></div>
      </div>
    </div>
  </header>
  <div id="particles-js">
    <h1 class="main">Hi</h1>
  </div>
  <div id="about">
  </div>
  <div id="portfolio"></div>
  <div id="contact"></div>
  <script src="js/particles.js"></script>
  <script src="js/app.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $('.menu-toggle').click(function() {
      $('.site-nav').toggleClass('site-nav--open', 500);
      $(this).toggleClass('open');
    })
    $('.menu-link').click(function() {
      $('.site-nav').toggleClass('site-nav--open', 250);
      $('.menu-toggle').toggleClass('open');
    })

    $(function($) {
      $('a').on('click', function(e) {
        var $anchor = $(this).attr("href");
        var $hrefStart = $anchor.substr(0, 1);

        if ($hrefStart == "#") {
          $('html,body').animate({
            scrollTop: $($anchor).offset().top
          }, 1500, 'easeInOutExpo');

          e.preventDefault();
        } else {
          window.location.href = $anchor;
        }
      });
    })(jQuery);
  </script>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

您的共享代码一团糟。试图清理一下。

无论如何，问题在于您的menu在header内部。即使您提供menu z-index，即使标题中没有z-index，menu也不会显示在其他元素之上。

因此，将z-index:9999或类似的内容添加到header中。

见下文

$('.menu-toggle').click(function() {
      $('.site-nav').toggleClass('site-nav--open', 500);
      $(this).toggleClass('open');
    })
    $('.menu-link').click(function() {
      $('.site-nav').toggleClass('site-nav--open', 250);
      $('.menu-toggle').toggleClass('open');
    })
	
      
     $('a').on('click', function(e){
           var $anchor = $(this).attr("href");
           var $hrefStart = $anchor.substr(0, 1);

           if ( $hrefStart == "#" ) {
               $('html,body').animate({
                   scrollTop: $($anchor).offset().top
               }, 1500, 'easeInOutExpo');

               e.preventDefault(); 
           } else {
               window.location.href = $anchor;
           }
     });
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

header {
  background-color: #1d1d1d;
  color: #EBEBD3;
  padding: 1em 0;
  position: fixed;
  width: 100%;
  z-index: 999;
}

header::after {
  content: '';
  clear: both;
  display: block;
}

.logo {
  float: left;
  font-size: 1rem;
  margin: 0;
  position: relative;
  left: 5%;
  text-transform: uppercase;
  font-weight: 700;
}

.logo span {
  font-weight: 400;
}

.site-nav {
  position: absolute;
  background-color: #1d1d1d;
  top: 100%;
  right: 0;
  height: 0px;
  overflow: hidden;
  transition: .5s ease-in-out;
  opacity: 0;
  width: 100%;
}

.site-nav--open {
  height: auto;
  opacity: 100;
}

.site-nav ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.site-nav li {
  width: 100%;
  text-align: center;
  /*	border-bottom: 1px solid #575766;*/
}

.site-nav li:last-child {
  /*	border-bottom: none;	*/
}

.site-nav a {
  font-weight: 800;
  font-size: 40px;
  color: #9E9E9E;
  text-decoration: none;
  display: block;
  padding: 2em;
  text-transform: uppercase;
  z-index: 99999;
}

.site-nav a:hover,
.site-nav a:focus {
  color: white;
}

.menu-toggle {
  position: fixed;
  padding: 1em;
  position: absolute;
  right: .75em;
  top: .5em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background-color: #ebebbd;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: .5s ease-in-out;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(90deg);
}

.open .hamburger {
  transform: rotate(45deg);
}

#particles-js {
  height: 100vh;
}

#about {
  height: 100vh;
}

#portfolio {
  height: 100vh;
  background-color: blue;
}

#contact {
  height: 100vh;
  background-color: red;
}

h1.main {
  color: white;
  position: absolute;
  top: 50%;
  left: 5%;
  font-size: 5em !important;
}

h2 {
  color: white;
  position: absolute;
  top: 60%;
  left: 5%;
  font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="container">
    <h1 class="logo">Panco <span>design</span></h1>
    <nav class="site-nav">
      <ul>
        <li><a class="menu-link" href="#particles-js">Home</a></li>
        <li><a class="menu-link" href="#about">About</a></li>
        <li><a class="menu-link" href="#portfolio">Portfolio</a></li>
        <li><a class="menu-link" href="#contact">Contact</a></li>
      </ul>
    </nav>
    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
  </div>
</header>
<div id="particles-js">
  <h1 class="main">Hi</h1>
</div>
<div id="about">

</div>
<div id="portfolio"></div>
<div id="contact"></div>

答案 1 :(得分：1)

如果您仅将z-index: -1;添加到h1.main，则此问题将得到解决，您无需执行其他任何操作。可以将z-index: -1;设置为负值，以降低选择器的优先级。阅读CSS - z-index了解更多详情。

$('.menu-toggle').click(function() {
    $('.site-nav').toggleClass('site-nav--open', 500);
    $(this).toggleClass('open');
})
$('.menu-link').click(function() {
    $('.site-nav').toggleClass('site-nav--open', 250);
    $('.menu-toggle').toggleClass('open');
})    
$('a').on('click', function(e){
    var $anchor = $(this).attr("href");
    var $hrefStart = $anchor.substr(0, 1);

    if ( $hrefStart == "#" ) {
       $('html,body').animate({
           scrollTop: $($anchor).offset().top
       }, 1500, 'easeInOutExpo');

       e.preventDefault(); 
    } else {
       window.location.href = $anchor;
    }
});
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');

body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;	
  margin: 0 auto;
  padding: 0;
}

header {
  background-color: #1d1d1d;
  color: #EBEBD3;
  padding: 1em 0;
  position: fixed;
  width: 100%;
}

header::after {
  content: '';
  clear: both;
  display: block;	
}

.logo {
  float: left;
  font-size: 1rem;
  margin: 0;
  position: relative;
  left: 5%;	
  text-transform: uppercase;
  font-weight: 700;
}

.logo span {
  font-weight: 400;
}

.site-nav {
  position: absolute;
  background-color: #1d1d1d;
  top: 100%;
  right: 0;
  height: 0px;
  overflow: hidden;
  transition: .5s ease-in-out;
  opacity: 0;
  width: 100%;
}

.site-nav--open {
  height: auto;
  opacity: 100;
}

.site-nav ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.site-nav li {
  width: 100%;
  text-align: center;

/*	border-bottom: 1px solid #575766;*/
}

.site-nav li:last-child {
/*	border-bottom: none;	*/
}

.site-nav a {
  font-weight: 800;
  font-size: 40px;
  color: #9E9E9E;
  text-decoration: none;
  display: block;
  padding: 2em;
  text-transform: uppercase;
  z-index: 99999;
}

.site-nav a:hover,
.site-nav a:focus {
  color: white;
}

.menu-toggle {
  position: fixed;
  padding: 1em;
  position: absolute;
  right: .75em;
  top: .5em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background-color: #ebebbd;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: .5s ease-in-out;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after{
  transform: translateY(-3px) rotate(90deg);
}

.open .hamburger {
  transform: rotate(45deg);
}

#particles-js {
  height: 100vh;

}

#about {
  height: 100vh;
}

#portfolio {
  height: 100vh;
  background-color: blue;
}

#contact {
  height: 100vh;
  background-color: red;
}

h1.main {
  color: white;
  position: absolute;
  top: 50%;
  left: 5%;
  font-size: 5em !important;
  z-index: -1;
}

h2 {
  color: white;
  position: absolute;
  top: 60%;
  left: 5%;
  font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
    <div class="container">
        <h1 class="logo">Panco <span>design</span></h1>
        <nav class="site-nav">
            <ul>
                <li><a class="menu-link" href="#particles-js">Home</a></li>
                <li><a class="menu-link" href="#about">About</a></li>
                <li><a class="menu-link" href="#portfolio">Portfolio</a></li>
                <li><a class="menu-link" href="#contact">Contact</a></li>
            </ul>
        </nav>
        <div class="menu-toggle">
            <div class="hamburger"></div>
        </div>
    </div>
</header>
<div id="particles-js">
    <h1 class="main">Hi</h1>
</div>
<div id="about">

</div>
<div id="portfolio"></div>
<div id="contact"></div>

相关问题
最新问题