Как добавить lo go в простое меню гамбургеров CSS? - PullRequest
Новая
       18

Как добавить lo go в простое меню гамбургеров CSS?

0 голосов
/ 25 февраля 2020

На моем сайте есть отзывчивое меню гамбургеров, в котором используются простые HTML и CSS, так как я до сих пор не получил JS.

Я пытаюсь добавить lo go в меню, которое будет всплывать слева от меню, когда оно находится в режиме рабочего стола, и центрироваться, когда оно перейдет в выпадающее меню гамбургера.

Я прилагаю свой код ниже. Я не нашел решения, которое применимо к такому простому решению CSS / HTML. 

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  font-family: Arial, Helvetica, sans-serif;
}

.nav {
  border-bottom: 1px solid #EAEAEB;
  text-align: right;
  height: 70px;
  line-height: 70px;
}

.menu {
  margin: 0 30px 0 0;
}

.menu a {
  text-decoration: none;
  color: gray;
  margin: 0 10px;
  line-height: 70px;
}

span {
  color: #54D17A;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
}

#toggle {
  display: none;
}

@media only screen and (max-width: 500px) {
  label {
    display: block;
    cursor: pointer;
  }
  .menu {
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu a {
    display: block;
    border-bottom: 1px solid #EAEAEB;
    margin: 0;
  }
  #toggle:checked+.menu {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Responsive Menu</title>
</head>

<body>
  <div class="nav">
    <label for="toggle">&#9776</label>
    <input type="checkbox" id="toggle">
    <div class="menu">
      <a href="#">Porfolio</a>
      <a href="#">Services</a>
      <a href="#">About</a>
      <a href="#"><span>Get in Touch</span></a>
    </div>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 25 февраля 2020

Рад, что вы изучаете программирование, и я sh вам всего наилучшего. Теперь давайте решим.

Прежде всего, поймите, что в вашем коде css эта строка; 

@media only screen and (max-width: 500px) {
...
}

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

Теперь из вашего вопроса вы хотите показать lo go в определенный момент, когда это обычный меню (вид рабочего стола), и когда это экран мобильного устройства, вы хотите, чтобы он отображался в другом месте.

Я изменил ваш код css, добавив класс с именем .hide. Везде, где этот класс вызывается, в обычном меню он будет отображаться, но в мобильном меню он будет скрываться. Вы можете использовать ту же логику c, чтобы делать то, что вы хотите. извините, мой код не совсем то, что вы хотите, но идея есть.

код находится по ссылке ниже. дайте мне знать, если вам нужно разъяснение;

https://jsfiddle.net/9rv1xwq3/1/

...