HTML - Отзывчивая панель навигации: сценарий не работает - PullRequest
Новая
       17

HTML - Отзывчивая панель навигации: сценарий не работает

0 голосов
/ 21 января 2019

Я следую этому уроку РЕДАКТИРОВАТЬ: изменена ссылка на определенное время видео https://www.youtube.com/watch?v=XZsuI5wyRzs&feature=youtu.be&t=560 о том, как создать отзывчивую полосу нагибации до того, как я углублюсь в основной контент.

По какой-то причине здесь, в этой части временной шкалы ( Я сохранил ссылку на текущее время, чтобы вы могли видеть, о чем я говорю, не просматривая видео ) Я точно выполнил шаги, номой значок гамбургера не активируется при нажатии на него, чтобы открыть раскрывающееся меню.Кроме этого, все остальное выглядит довольно хорошо.Что не так с моим кодом?Пожалуйста, посмотрите на это ниже.

Спасибо 

/*CSS Page*/

/*-----HTML Body-----*/

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/*----End HTML Body-----*/

/*-----Start of Navigation Bar-----*/

nav {
  width: 100%;
  background: #8000ff;
}

ul {
  width: 50%;
  margin: 0 auto;
  padding: 0;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 20px;
}

/*For mouse hover*/

ul li:hover {
  background: #4dff4d;
}

/*Smartphone/Tablet: Menu Bar*/

.toggle {
  width: 100%;
  padding: 10px 20px;
  background: #cc66ff;
  text-align: right;
  box-sizing: border-box;
  color: #000000;
  font-size: 30px;
  display: none;
}

/*-----End of Navigation Bar-----*/

/* Media Queries for Smaller Screen Size Begins */

@media (max-width: 786px) {
    .toggle {
      display: block;
    }

/* Navigation Drop down */

    ul {
      width: 100%;
      display: none;
    }

/* End Navigation Drop Down */

    ul li {
      display: block;
      text-align: center;
    }
    .active {
      display: block;
    }
}


/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>

<!--HTML Page-->

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>test</title>
  </head>

  <link rel="stylesheet" href="css/style.css">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <body>


    <nav>
      <div class="toggle">
        <i class="fa fa-bars menu" aria-hidden="true"></i>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
      $(document).ready() {
        $('menu').click(function() {
          $('ul').toggleClass('active')
        })
      })
    </script>

  </body>
</html>

1 Ответ

0 голосов
/ 21 января 2019

2 выпусков ...

  1. Отсутствует функция обратного вызова для события готовности ...

    $(document).ready()

Нужно быть таким ... 

$(document).ready(function () {

Вам не хватает «.»перед селектором класса 'menu' ...

$('menu')

Должно быть так ...

$('.menu')

Рабочий пример ниже ... 

/*CSS Page*/

/*-----HTML Body-----*/

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/*----End HTML Body-----*/

/*-----Start of Navigation Bar-----*/

nav {
  width: 100%;
  background: #8000ff;
}

ul {
  width: 50%;
  margin: 0 auto;
  padding: 0;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 20px;
}

/*For mouse hover*/

ul li:hover {
  background: #4dff4d;
}

/*Smartphone/Tablet: Menu Bar*/

.toggle {
  width: 100%;
  padding: 10px 20px;
  background: #cc66ff;
  text-align: right;
  box-sizing: border-box;
  color: #000000;
  font-size: 30px;
  display: none;
}

/*-----End of Navigation Bar-----*/

/* Media Queries for Smaller Screen Size Begins */

@media (max-width: 786px) {
    .toggle {
      display: block;
    }

/* Navigation Drop down */

    ul {
      width: 100%;
     /* display: none; */
      display: block;
      height:0px;
      transition: height 0.5s linear;
      overflow: hidden;
    }

/* End Navigation Drop Down */

    ul li {
      display: block;
      text-align: center;
    }
    .active {
      /* display: block; */  
      height: 300px;
    }
}

/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>

<!--HTML Page-->

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>test</title>
  </head>

 <!-- <link rel="stylesheet" href="css/style.css"> -->
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <body>


    <nav>
      <div class="toggle">
        <i class="fa fa-bars menu" aria-hidden="true"></i>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('.menu').click(function() {
          $('ul').toggleClass('active')
        })
      })
    </script>

  </body>
</html>
...