Блог

Главная - Вопросы по программированию - Визуальная ошибка функции Javascript

Визуальная ошибка функции Javascript

#javascript #css #function

Вопрос:

У меня есть небольшая ошибка, когда я создал всплывающее меню навигации для мобильных режим, и есть две кнопки, одна кричит мобильной навигации, а другой забирает, я поставил кнопку Закрыть, чтобы взять меню справа -400px , чтобы выйти из поля зрения посетителя, но есть полоса прокрутки в нижней части страницы, где она принимает вас на правой стороне страницы, где навигационная панель становится видимым снова, может кто-нибудь помочь мне скрыть эту панель навигации после того, как функция была вызвана. Спасибо.

 var navLinks = document.getElementById("navLinks");

function showMenu() {
  navLinks.style.right = "0";
}

function hideMenu() {
  navLinks.style.right = "-400px";
} 
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home | LuxxMob</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700amp;display=swap" rel="stylesheet" />
  <script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700amp;display=swap" rel="stylesheet" />
</head>

<body>
  <section class="header">
    <div class="menu-header">
      <nav>
        <a href="index.html"><img src="images/HD_FILE (2).png" /></a>
        <div class="nav-links" id="navLinks">
          <i class="fas fa-times" onclick="hideMenu()"></i>
          <ul>
            <li>
              <a href="index.html">Home</a>
            </li>
            <li>
              <a href="news.html">News</a>
            </li>
            <li>
              <a href="players.html">Players</a>
            </li>
            <li>
              <a href="partners.html">Partners</a>
            </li>
            <li>
              <a href="about-us.html">About Us</a>
            </li>
          </ul>
        </div>
        <i class="fas fa-bars" onclick="showMenu()"></i>
      </nav>
    </div>
    <div class="main-texts">
      <div class="text-box">
        <h1>Welcome To <em>LuxxMob</em></h1>
        <p>
          An upcoming eSports team, recruiting talented gamers and creative content creators.
        </p>
        <a href="#" class="hero-btn">About Us</a>
      </div>
    </div>
  </section>

  <!--NEXT SECTION MEET THE OWNER-->

  <section class="meet-me">
    <h1>Meet The Players</h1>

    <div class="player-info">
      <p>
        Meet the competitive players, content creators and the owner of LuxxMob. A rapidly growing team of highly skilled members, providing some of the best content and gameplay available on social media currently.
      </p>
    </div>
  </section>

</body>

Комментарии:

1. почему нет display = "none" ?

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

3. примечание: css слева, справа, сверху, снизу не влияют, если позиция статична (по умолчанию) — возможно, вы хотите сделать какую-то позицию абсолютной, относительной или фиксированной … что угодно, только не статичное

4. @TrueChow: Вы также должны добавить соответствующий CSS.

Ответ №1:

Используйте display = none и display = block для скрытия/отображения вашего div

 var navLinks = document.getElementById("navLinks");

function showMenu() {
  navLinks.style.display= "block";
}

function hideMenu() {
  navLinks.style.display= "none";
} 
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home | LuxxMob</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700amp;display=swap" rel="stylesheet" />
  <script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700amp;display=swap" rel="stylesheet" />
</head>

<body>
  <section class="header">
    <div class="menu-header">
      <nav>
        <a href="index.html"><img src="images/HD_FILE (2).png" /></a>
        <div class="nav-links" id="navLinks">
          <i class="fas fa-times" onclick="hideMenu()"></i>
          <ul>
            <li>
              <a href="index.html">Home</a>
            </li>
            <li>
              <a href="news.html">News</a>
            </li>
            <li>
              <a href="players.html">Players</a>
            </li>
            <li>
              <a href="partners.html">Partners</a>
            </li>
            <li>
              <a href="about-us.html">About Us</a>
            </li>
          </ul>
        </div>
        <i class="fas fa-bars" onclick="showMenu()"></i>
      </nav>
    </div>
    <div class="main-texts">
      <div class="text-box">
        <h1>Welcome To <em>LuxxMob</em></h1>
        <p>
          An upcoming eSports team, recruiting talented gamers and creative content creators.
        </p>
        <a href="#" class="hero-btn">About Us</a>
      </div>
    </div>
  </section>

  <!--NEXT SECTION MEET THE OWNER-->

  <section class="meet-me">
    <h1>Meet The Players</h1>

    <div class="player-info">
      <p>
        Meet the competitive players, content creators and the owner of LuxxMob. A rapidly growing team of highly skilled members, providing some of the best content and gameplay available on social media currently.
      </p>
    </div>
  </section>

</body>

Комментарии:

1. спасибо, что это сработало, но плавная анимация, появляющаяся справа, исчезла, вы знаете, как это исправить

2. вы хотите, чтобы меню занимало/лежало поверх содержимого или отодвигало содержимое в сторону/вниз

3. наложение содержимого

Ответ №2:

Вы должны установить overflow-x: hidden; на тело или родительский элемент навигации.

Ответ №3:

Либо используйте display свойства, чтобы скрыть/отобразить строку меню, либо, если вам действительно нужна анимация слайдов влево/вправо, вы можете использовать trasnform и свойства перехода, подобные этому:

 var navLinks = document.getElementById("navLinks");

function showMenu() {
  console.log('Show');
  navLinks.style.transition = "all 0.9s";
  navLinks.style.transform = "translateX(0)";
}

function hideMenu() {
  console.log('Hide');
  navLinks.style.transition = "all 0.9s";
  navLinks.style.transform = "translateX(-400px)";
} 
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Home | LuxxMob</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700amp;display=swap" rel="stylesheet" />
  <script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700amp;display=swap" rel="stylesheet" />
</head>

<body>
  <section class="header">
    <div class="menu-header">
      <nav>
        <a href="index.html"><img src="images/HD_FILE (2).png" /></a>
        <div class="nav-links" id="navLinks">
          <button class="fas fa-times" onclick="hideMenu()"></button>
          <ul>
            <li>
              <a href="index.html">Home</a>
            </li>
            <li>
              <a href="news.html">News</a>
            </li>
            <li>
              <a href="players.html">Players</a>
            </li>
            <li>
              <a href="partners.html">Partners</a>
            </li>
            <li>
              <a href="about-us.html">About Us</a>
            </li>
          </ul>
        </div>
        <i class="fas fa-bars" onclick="showMenu()"></i>
      </nav>
    </div>
    <div class="main-texts">
      <div class="text-box">
        <h1>Welcome To <em>LuxxMob</em></h1>
        <p>
          An upcoming eSports team, recruiting talented gamers and creative content creators.
        </p>
        <a href="#" class="hero-btn">About Us</a>
      </div>
    </div>
  </section>

  <!--NEXT SECTION MEET THE OWNER-->

  <section class="meet-me">
    <h1>Meet The Players</h1>

    <div class="player-info">
      <p>
        Meet the competitive players, content creators and the owner of LuxxMob. A rapidly growing team of highly skilled members, providing some of the best content and gameplay available on social media currently.
      </p>
    </div>
  </section>

</body>
Метки: