如何在点击汉堡时显示导航

时间：2018-09-30 18:38:14

标签： javascript html5 css3 flexbox

我最近开始为我的计算机科学课程制作一个小型网站，但遇到了问题。一切进展顺利。我想使用flexbox和media查询，但是我也想添加一个汉堡菜单。我试图用JavaScript制作它，但是它不能正常工作，实际上，它不工作。有人可以帮助我，并指示我那里有什么问题吗？另外，您可以告诉我是否可以仅使用CSS进行操作，这是否是一个好的解决方案？感谢所有回复。

Codepen 

function myFunction() {
  var x = document.getElementsByClassName("ham");
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
* {
  margin: 0;
  padding: 0;
}

body {
  background: white;
  font-family: 'Quicksand', sans-serif;
}

.nav {
  display: flex;
  background: red;
  box-shadow: 1px 1px 100px black;
  flex-wrap: wrap;
  align-content: flex-end;
}

.nav li:first-child {
  margin-right: auto;
}

.nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  margin: 10px;
  padding: 20px;
  transition: 1.3s;
}

.art {
  padding-top: 30px;
  font-size: 25px;
}

.img {
  width: 100%;
  border: black solid 1px;
}

.nav li a:hover {
  transition: 1.3s;
  color: yellow;
}

.logo {
  background: #000;
  display: block;
  color: #fff;
  text-decoration: none;
}

nav ul {
  list-style-type: none;
}

.first-section article {
  margin-top: 100px;
  margin-bottom: 100px;
}

.first-section h2 {
  padding: 20px;
  margin: 25px;
}

.first-section {
  max-width: 1000px;
  margin: 0 auto;
}

.first-section article p {
  text-align: justify;
}

.media {
  width: 100%;
  margin: 100px 0 0 0;
}

.read-more:hover {
  color: darkblue;
}

.read-more {
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  border: 0px;
  background: white;
  display: block;
}

.read-more a {
  text-decoration: none;
}

.media .parent {
  display: flex;
  flex-wrap: wrap;
}

.media .child {
  flex: 1;
  width: 100%;
  margin: 0 auto;
  height: 200px;
  text-align: center;
  vertical-align: middle;
}


/*HAMBURGER*/

div.al {
  width: 40px;
  position: absolute;
  right: 1em;
  top: 1em;
}

.hamburger {
  display: none;
  width: 40px;
  height: 35px;
  border: 0;
  border-top: 5px solid #ffffff;
  background: transparent;
  position: relative;
  transition: 0.3s transform linear;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 5px solid #ffffff;
  transform: translateY(10px);
}

.hamburger::after {
  transform: translateY(25px);
  transition: 0.3s transform linear;
}

.hamburger:focus {
  transform: rotate(45deg) translateY(5px);
  border: none;
}

.hamburger:focus::after {
  transform: rotate(-90deg) translateX(-10px);
}

footer {
  width: 100%;
  text-align: center;
  bottom: 0;
  background: grey;
}

.fb {
  background: url(facebook.png) no-repeat top;
  height: 100%;
}

.tw {
  background: url(twitter.png) no-repeat top;
  height: 100%;
}

.gplus {
  background: url(google-plus.png) no-repeat top;
  height: 100%;
}

@media only screen and (max-width: 600px) {
  .nav {
    text-align: center;
    flex-direction: column;
  }
  .hamburger {
    display: block;
  }
  .parent {
    text-align: center;
    flex-direction: column;
  }
  .first-section {
    margin: 15px;
  }
  .art {
    font-size: 15px;
  }
  .ham {
    display: block;
  }
  .hamburger {
    display: block;
  }
  button.hamburger:focus li.ham {
    display: block;
  }
}

@media only screen and (max-width: 1050px) {
  .first-section {
    margin: 15px;
  }
}
<link href="https://fonts.googleapis.com/css?family=Quicksand:200,300,400" rel="stylesheet">
<div id="wrapper">
  <nav>
    <div class="al" onclick="myFunction()"><button class="hamburger"></button></div>
    <ul class="nav">
      <li>
        <a href="#" class="logo">
          <h1>logo</h1>
        </a>
        <li>
          <li class="ham"><a href="#">HOME</a></li>
          <li class="ham"><a href="#">O NAS</a></li>
          <li class="ham"><a href="#">OFERTA</a></li>
          <li class="ham"><a href="#">KONTAKT</a></li>
    </ul>
  </nav>
</div>
<section class="first-section">
  <article>
    <h2>„Zadbaj, by nie zabijał” – polski fanpage namawia, by nie wypuszczać kotów</h2>
    <img src="pr%C4%99gowany-kot-w-oknie-864x575.jpg" alt="" class="img">
    <br><br>
    <button class="read-more"><a href="art.html">Czytaj dalej...</a></button>
  </article>
  <article>
    <h2>Artykuł</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet lacinia lacus, quis euismod velit rhoncus sed. Donec quis magna dictum, volutpat felis eu, mattis augue. Nullam magna justo, gravida eu consequat sed, interdum ac nisl. Nulla eu
      venenatis urna. Curabitur consequat auctor tellus, id aliquet lectus ultricies id. Nam sit amet tortor vulputate, posuere elit vel, pretium eros. Proin risus tellus, blandit ut pharetra a, pretium in ipsum. Donec nunc magna, euismod quis vulputate
      sed, tristique eget nisi. Nam dui elit, tempus sed tempor in, tristique vel dolor. Nullam eu massa id enim vulputate imperdiet. Cras congue ipsum in lectus cursus accumsan. Cras eget dui euismod, imperdiet arcu molestie, eleifend libero. Aenean
      malesuada metus id consectetur efficitur. Praesent magna nulla, congue eget blandit quis, mattis porta eros. Cras et diam pulvinar, porttitor purus vitae, vestibulum sem. Fusce id eleifend nisl. <br><br> Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci. Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis
      magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris
      eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas auctor tellus lorem, id efficitur libero congue bibendum. <br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci.
      Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus
      dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas
      auctor tellus lorem, id efficitur libero congue bibendum. <br><br>
    </p>
    <button class="read-more"><a href="#">Czytaj dalej...</a></button>
  </article>
  <article>
    <h2>Artykuł</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet lacinia lacus, quis euismod velit rhoncus sed. Donec quis magna dictum, volutpat felis eu, mattis augue. Nullam magna justo, gravida eu consequat sed, interdum ac nisl. Nulla eu
      venenatis urna. Curabitur consequat auctor tellus, id aliquet lectus ultricies id. Nam sit amet tortor vulputate, posuere elit vel, pretium eros. Proin risus tellus, blandit ut pharetra a, pretium in ipsum. Donec nunc magna, euismod quis vulputate
      sed, tristique eget nisi. Nam dui elit, tempus sed tempor in, tristique vel dolor. Nullam eu massa id enim vulputate imperdiet. Cras congue ipsum in lectus cursus accumsan. Cras eget dui euismod, imperdiet arcu molestie, eleifend libero. Aenean
      malesuada metus id consectetur efficitur. Praesent magna nulla, congue eget blandit quis, mattis porta eros. Cras et diam pulvinar, porttitor purus vitae, vestibulum sem. Fusce id eleifend nisl. <br><br> Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci. Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis
      magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris
      eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas auctor tellus lorem, id efficitur libero congue bibendum. <br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci.
      Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus
      dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas
      auctor tellus lorem, id efficitur libero congue bibendum. <br><br>
    </p>
    <button class="read-more"><a href="#">Czytaj dalej...</a></button>
  </article>
  <article>
    <h2>Artykuł</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet lacinia lacus, quis euismod velit rhoncus sed. Donec quis magna dictum, volutpat felis eu, mattis augue. Nullam magna justo, gravida eu consequat sed, interdum ac nisl. Nulla eu
      venenatis urna. Curabitur consequat auctor tellus, id aliquet lectus ultricies id. Nam sit amet tortor vulputate, posuere elit vel, pretium eros. Proin risus tellus, blandit ut pharetra a, pretium in ipsum. Donec nunc magna, euismod quis vulputate
      sed, tristique eget nisi. Nam dui elit, tempus sed tempor in, tristique vel dolor. Nullam eu massa id enim vulputate imperdiet. Cras congue ipsum in lectus cursus accumsan. Cras eget dui euismod, imperdiet arcu molestie, eleifend libero. Aenean
      malesuada metus id consectetur efficitur. Praesent magna nulla, congue eget blandit quis, mattis porta eros. Cras et diam pulvinar, porttitor purus vitae, vestibulum sem. Fusce id eleifend nisl. <br><br> Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci. Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis
      magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris
      eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas auctor tellus lorem, id efficitur libero congue bibendum. <br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci.
      Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus
      dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas
      auctor tellus lorem, id efficitur libero congue bibendum. <br><br>
    </p>
    <button class="read-more"><a href="#">Czytaj dalej...</a></button>
  </article>
</section>
<footer>
  <h2>Kuba Chimiak</h2>
  <p>2018</p>
  <section class="media">
    <div class="parent">
      <div class="child">
        <div class="fb"></div>
      </div>
      <div class="child">
        <div class="tw"></div>
      </div>
      <div class="child">
        <div class="gplus"></div>
      </div>
    </div>
  </section>
</footer>

1 个答案:

答案 0 :(得分：2)

你近在咫尺... 我做了一些更改，例如添加了Google材质字体，然后在右上角找到了汉堡包。您应该将其放置在更好的位置

https://codepen.io/anon/pen/gBpbmJ

当您单击它时，其后是一个显示“耶稣·汉堡包”的函数。在现实生活中，您可能希望做一些菜单滑入和滑出操作。 

//this function should be replaced with some actual menu show/hide logic. 
function myFunction(){
  alert("jesus f hamburger");
}

我还建议您使用一个框架为您修复此类问题。也许引导程序会起作用？

相关问题
最新问题