Боковая навигация не работает в css - PullRequest
Новая
       14

Боковая навигация не работает в css

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

Сиденав не работает.Я просмотрел этот сайт, но не смог найти решение, которое искал.

Это файл ejs 

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Portfolio Blog</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- Compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

   <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  </head>
  <body>
    <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">Tech Blog</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">About</a></li>
        <li><a href="#" data-activates="slide-out" class="button-collapse show-on-large right">
          <i class="material-icons">menu</i></a>
        </li>
      </ul>
<!-- SIDENAV -->
<ul id="slide-out" class="sidenav">
   <li><div class="user-view">
     <div class="background">
       <img src="images/office.jpg">
     </div>
     <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
     <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
   </div></li>
   <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
 </ul>

    </div>
  </nav>
    <h1>Index Page</h1>
  </body>
  <script type="text/javascript">
    $('.button-collapse').sidenav();
  </script>
</html>

Я попытался изменить jquery на более низкую версию.Если вместо этого я использовал sideNav (), то возникает ошибка:

TypeError: $ (...). SideNav не является функцией

Ответы [ 2 ]

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

Вы допустили некоторые ошибки, изменяя код по сравнению с оригинальным фрагментом, предоставленным разработчиками.Вот шаги, чтобы исправить это:

  1. Измените data-activates на data-target.MaterializeCss использует этот атрибут data, чтобы узнать , к которому относится sidenav кнопка.data-activates ничего не значит для материализации.
  2. Измените класс меню бургера с button-collapse на sidenav-trigger.Это класс, который разрешает кнопке открывать панель навигации, вы не можете использовать одну из своих симпатий
  3. Изменить целевой элемент для инициализации Sidenav с $('.button-collapse') на $('.sidenav'),Вы должны инициализировать navbar , а не кнопку.

ПРИМЕЧАНИЕ : Вы должны нажать FULL PAGE после запуска фрагмента кода, чтобы увидеть, как он работает ...

Это потому, что вы поместили свое меню гамбургера (которое должно быть всегда видимым из-за класса show-on-large) внутри *Элемент 1035 * (который скрыт на экранах среднего и маленького размера ... Разве это не для мобильных устройств ? Может быть, вам нужен помощник show-on-med-and-down?).

Я думаю, что вам следует внимательно прочитать документы, иначе вы запутаете свой код: /

Надеюсь, я ничего не забыл:) 

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Portfolio Blog</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</head>

<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">Tech Blog</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">About</a></li>
        <li><a href="#" data-target="slide-out" class="sidenav-trigger show-on-large right">
          <i class="material-icons">menu</i></a>
        </li>
      </ul>
      <!-- SIDENAV -->
      <ul id="slide-out" class="sidenav">
        <li>
          <div class="user-view">
            <div class="background">
              <img src="images/office.jpg">
            </div>
            <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
            <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
          </div>
        </li>
        <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
      </ul>
    </div>
  </nav>

  <h1>Index Page</h1>
  <script type="text/javascript">
    $(function() {
      $('.sidenav').sidenav();
    })
  </script>
</body>

</html>
0 голосов
/ 06 февраля 2019

Для достижения того, что вы ищете, я использовал jQuery 3.3.1.

Модифицировал триггерную кнопку sidenav следующим образом: 

<a href="#" data-target="slide-out" class="button-collapse sidenav-trigger show-on-large right">
   <i class="material-icons">menu</i>
</a>

Затем я инициализировал sidenav как говорит доктор: 

$('.sidenav').sidenav();

и теперь это работает.

...