Почему мое выпадающее меню не работает на панели навигации? - PullRequest
Новая
       6

Почему мое выпадающее меню не работает на панели навигации?

0 голосов
/ 10 февраля 2019

Я пытаюсь разработать отзывчивое меню навигации, и у меня возникли некоторые проблемы с меню гамбургеров.Когда я изменяю размер своего браузера и нажимаю на значок гамбургера, он ничего не делает.У меня есть jquery в моем html, но я не могу закрыть меню, когда браузер изменен по какой-то причине.Любая помощь будет оценена.

вот мой код: 

$('.nav-toggle').click(function() {
  if ($('.top-nav-links').css('margin-top') == '-225px') {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

$(window).resize(function() {
  if ($(window).width() > 730) {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});

$(document).ready(function() {
  if ($(window).width() > 730) {
    $('.top-nav-links').css('margin-top', '0');
  } else {
    $('.top-nav-links').css('margin-top', '-255px');
  }
});
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #f8f8f8;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/* TOP NAVIGATION CSS */

.top-nav {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 0 30px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.logo:link {
  color: red;
  text-decoration: none;
  font-size: 26pt;
  margin: 10.5px 0;
  display: inline-block;
  float: left;
  font-weight: bold;
}

.logo:visited {
  color: red;
  text-decoration: none;
}

.top-nav-links {
  display: inline-block;
  margin: 0;
  float: right;
}

.top-nav-links li {
  display: inline-block;
  margin: 0 10px;
  padding: 15px 0;
}

.top-nav-links li:first-of-type {
  margin-left: 0;
}

.top-nav-links li:last-of-type {
  margin-right: 0;
}

.top-nav-links li a:link {
  color: red;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.top-nav-links li a:visited {
  color: red;
  text-decoration: none;
  font-size: 18px;
}

.top-nav-links li a:hover {
  color: red;
}

.nav-toggle {
  float: right;
  font-size: 30px;
  margin: 8.2px 0;
  color: red;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  display: none;
}

.nav-toggle:hover {
  color: red;
}

@media all and (max-width: 730px) {
  .top-nav-links {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: -255px;
    display: none;
  }
  .top-nav-links li {
    display: block;
    margin: 0;
    text-align: center;
  }
  .nav-toggle {
    display: inline-block;
  }
}
<html>

<head>
  <title>TopNav</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet" type="text/css">
  <!-- SCRIPTS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="functions.js">
  </script>
</head>

<body>
  <!-- TOP NAVIGATION -->
  <div class="top-nav clearfix">
    <a href="index.html" class="logo">TopNav</a>
    <div class="nav-toggle">
      <i class="icon ion-md-menu"></i>
    </div>
    <ul class="top-nav-links">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Shop</a>
      </li>
      <li>
        <a href="#">About Us</a>
      </li>
      <li>
        <a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 10 февраля 2019

В вашей функции nav-toggle click есть некоторые проблемы.

  1. При условии, что вы проверяете значение margin-top против -225px везде, где оно -255px Я думаю, что это опечатка.
  2. На экране max-width: 730px вы добавляете display: none к top-nav-links классу.Вам также необходимо включить эту функцию в функции nav-toggle click.

Ваша конечная функция nav-toggle click может выглядеть следующим образом: 

    $('.nav-toggle').click(function () {
        if ($('.top-nav-links').css('margin-top') == '-255px') {
            $('.top-nav-links').css('margin-top', '0').css('display', 'inline-block');
        } else {
            $('.top-nav-links').css('margin-top', '-255px').css('display', 'none');
        }
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...