как показать навигацию по клику в гамбургере - PullRequest
Новая
       8

как показать навигацию по клику в гамбургере

0 голосов
/ 30 сентября 2018

Я недавно начал делать небольшой сайт для своих уроков информатики, и у меня возникла проблема.Все шло хорошо к точке.Я хотел использовать flexbox и медиа-запросы, но я также хотел добавить меню гамбургера.Я пытался сделать это в 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 голосов
/ 30 сентября 2018

Вы были близки ... Я сделал некоторые изменения, такие как добавление шрифта материала Google, и поднял гамбургер в верхнем правом углу.Вы, вероятно, должны поместить его куда-нибудь лучше

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

Когда вы щелкаете по нему, за ним следует функция, которая говорит «jesus h hamburger».В реальной жизни вы, вероятно, предпочли бы сделать что-то вроде слайд-меню.

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

Я бы также порекомендовал использовать фреймворк, который исправит подобные вещи.Может быть, загрузчик будет работать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...