HTML CSS Javascript Гамбургер Меню проблемы - PullRequest
Новая
       13

HTML CSS Javascript Гамбургер Меню проблемы

0 голосов
/ 01 декабря 2018

Может, кто-нибудь возражает, глядя на сайт?Адрес test.dvps.uk/index.html

У меня проблемы с меню гамбургера, оно находится в столбце 50%, и я хочу, чтобы оно выровнялось по правому краю.Я пытался выровнять контент, плавающие и разные позиции и отображения, но может показаться, что это правильно.Другая проблема, с которой я сталкиваюсь, заключается в том, что когда меню переключается, оно расширяется, но выталкивает содержимое вниз контейнера, но я хочу, чтобы оно тоже перемещало контейнер.

Я уверен, что мои проблемы с выравниванием меню вызвали эту проблему, поэтому, прежде чем продолжить, не могли бы вы помочь, пожалуйста?Спасибо :) 

$(document).ready(function() {
  $(".hamburger").click(function() {
    $(".nav").slideToggle("slow");
  });
});
*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  border: none;
}

html {
  box-sizing: border-box;
}

body {
  font-family: "Arial";
  font-size: 1.2em;
}

.container {
  margin: 0 auto;
  padding-top: 10px;
  max-width: 1000px;
}

.container-bottom-pad {
  margin: 0 auto;
  padding-top: 10px;
  max-width: 1000px;
  padding-bottom: 80px;
}

.outerContainer {
  background-color: #F1F1F1;
}

.row::before,
.row::after {
  display: table;
  content: " ";
  clear: both;
}

.row {
  padding: 10px 0;
}

.one,
.one-third,
.two-thirds,
.one-fourth {
  width: 100%;
}

#headerAndNav {
  background-color: rgba(135, 196, 66, 0.60);
  margin-bottom: 10px;
}

header img {
  z-index: -2;
  position: absolute;
  width: 20%;
  margin: 0 auto;
}

.header-logo {
  position: relative;
  height: 100px;
  width: auto;
}

.nav {
  display: none;
  padding: 0;
  overflow: hidden;
  /* Makes the sliding animation cleaner */
}

.nav-item {
  list-style-type: none;
  text-align: center;
  background: #87c442;
  display: block;
  margin: 12px 0;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0px 6px #2c3e50;
}

.nav-link {
  text-decoration: none;
  color: #333;
}

.nav-item:active {
  box-shadow: none;
  transform: translate(0px, 6px);
  transition: transform .20s;
}

.hamburger span {
  display: block;
  width: 35px;
  height: 4px;
  background: #625948;
  margin: 5px 0px;
  padding: 0;
}

.hamburger:hover span {
  transition: background ease-in-out .25s;
  background: #87c442;
}

.hamburger:hover {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="headerAndNav">
  <div class="row">
    <header>
      <div class="eleven-twelths column">
        <nav>
          <span class="flex-container">
                    <div class="align">
                        <div class="hamburger">
                            <span></span>
          <span></span>
          <span></span>
      </div>
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="login.html">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="signup.html">Signup</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="successes.html">Successes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="prices.html">Prices</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
  </div>
  </span>
  </nav>
</div>
<div class="one-twelth column">
  <img alt="logo" class="header-logo" src="images/site/opaque-logo.png">
</div>
<!-- end of one-twelth-->
</div>
<!-- end of row -->
</header>
</div>
<!-- end of container -->

Ответы [ 3 ]

0 голосов
/ 02 декабря 2018

После просмотра адреса вы упоминаете (test.dvps.uk/index.html) и следите за своими вопросами:

1) " ... меню гамбургеров, оно в50% столбца, и я хочу, чтобы он был выровнен по правому краю ..."

Проблемы, связанные с div с классом flex-container иследующий div с классом align (и обратите внимание, у вас есть два определения класса align : одно с плавающей правой и другой с плавающей левой!)

2) ... опускает содержимое контейнера ниже, но я хочу, чтобы он тоже перемещал контейнер ...

Вы можете попробовать с clear: right в контейнере после меню.

Также вы должны отметить некоторые свойства в вашем файле custom.css написаны с ошибками (т.е. бот вместо низ ).Проверьте это тоже.

Надеюсь, это поможет.

Saludos!

0 голосов
/ 04 декабря 2018

1) Выравнивание, как отмечалось другими, происходит из-за гибкого контейнера.Добавьте:

justify-content: flex-end для выравнивания по правому краю.

2) Переключаемое меню, перемещающее содержимое вниз, происходит из-за изменения DOM (воспринимайте его как элемент, который идет от ширины 0px /высота до 100px ширина / высота).Самое простое решение - вывести элемент из потока DOM.Одним из способов является использование position.Итак, пример:

position: absolute; right: 0; z-index: 1 до ul.nav

Теперь ваш гамбургер должен быть выровнен по правому краю, и содержимое гамбургера не должно мешать / отталкивать другой контент.

0 голосов
/ 02 декабря 2018

Что ж, если вы хотите использовать метод грубой силы, просто сделайте это в файле CSS: 

.hamburger { position:fixed; top: 25px; right: 30px; }

Это позволит извлечь div из гамбургера из потока документов и всегда придерживаться заданной позиции..

Я вижу пару других проблем, возникающих на горизонте, но продолжаю.

И вытащил весь div из HTML.

...