Невозможно создать боковую навигационную панель с использованием материализации css?

Я пытаюсь создать боковую навигационную панель, используя MaterializeCSS. У меня есть следующий код. Но когда я пытаюсь запустить его в браузере, он ничего не показывает. Он показывает только пустую страницу.Невозможно создать боковую навигационную панель с использованием материализации css?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Side Navigation Bar</title> 

    <!-- Compiled and minified jQuery --> 
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> 
/script> 

    <!--Import Google Icon Font--> 
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet"> 

    <!-- Compiled and minified CSS --> 
    <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/ 
css/materialize.min.css"> 

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

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".button-collapse").sideNav(); 
      $('.collapsible').collapsible(); 
     }); 
    </script> 
</head> 
<body> 
    <nav> 
     <ul class="right hide-on-med-and-down"> 
      <li><a href="#!">First Sidebar Link</a></li> 
      <li><a href="#!">Second Sidebar Link</a></li> 
     </ul> 
     <ul id="slide-out" class="side-nav"> 
      <li><a href="#!">First Sidebar Link</a></li> 
      <li><a href="#!">Second Sidebar Link</a></li> 
     </ul> 
     <a href="#" data-activates="slide-out" class="button-collapse"><i 
    class="mdi-navigation-menu"></i></a> 
    </nav> 
</body> 
</html>

, пожалуйста, предложите мне, если есть ошибка.

источник

2016-04-05 Jaydeep Ranipa

Попробуйте следующее в качестве nav содержания

<nav> 
     <div class="nav-wrapper container"> 
      <a id="logo-container" href="#" class="brand-logo text-darken-1">Logo</a> 

      <div class="container"> 
       <a href="#" data-activates="slide-out" class="button-collapse top-nav full hide-on-large-only black-text"><i 
         class="mdi-navigation-menu"></i></a> 
      </div> 
     </div> 

     <ul id="slide-out" class="side-nav fixed center-align"> 
      <li><a href="#!">First Sidebar Link</a></li> 
      <li><a href="#!">Second Sidebar Link</a></li> 
      <li><a href="#!">First Sidebar Link</a></li> 
      <li><a href="#!">Second Sidebar Link</a></li> 
     </ul>   
</nav>

И добавить следующее в вашем CSS (Использовать заголовок, основной, колонтитула в вашем body в качестве стандарта HTML-5):

header, main, footer { 
    padding-left: 240px; 
}

источник

2016-04-05 09:09:10 hemu

Этот код работает. Он показывает панель боковой панели. Но он уже открыт. Я хочу увидеть значок навигации и щелкнуть по нему, чтобы открыть его. –

Значок навигации будет отображаться на экране мобильного размера. Попробуйте свести к минимуму ваш браузер. – hemu

Eсть «ошибка» в вашем коде - на 7-й строке ваш скрипт (тот, который импортирует jQuery) закрывается неправильно - у вас есть /script> вместо </script>

Кроме того, вы используете устаревший метод для размещения значков материалов в тегах i - у вас должно быть <i class="material-icons">menu</i> вместо <i ="mdi-navigation-menu"></i>. Или, если вы предпочитаете «старый» способ, я думаю, вам придется найти эту библиотеку и загрузить в свой проект, как если бы я помню это право, этот метод больше не поддерживается официально.

Вот мое издание кода, который работает:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Side Navigation Bar</title> 

    <!-- Compiled and minified jQuery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

    <!--Import Google Icon Font--> 
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

    <!-- Compiled and minified CSS --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 

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

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".button-collapse").sideNav(); 
      $('.collapsible').collapsible(); 
     }); 
    </script> 
</head> 
<body> 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a> 
    <ul id="slide-out" class="side-nav"> 
     <li><a href="#!">First Sidebar Link</a></li> 
     <li><a href="#!">Second Sidebar Link</a></li> 
    </ul> 
</body> 
</html>

источник

2016-04-06 01:16:01 mizurnix

Спасибо. Я попробовал вашу версию кода. Он показывает навигационную панель вверху страницы. Но я не вижу значок навигации и не могу открыть боковую навигационную панель. –

Потому что это для мобильного меню. Измените размер вашего браузера для мобильного телефона, и вы увидите его – mizurnix

Могу ли я сделать этот значок видимым на большом экране? –

Невозможно создать боковую навигационную панель с использованием материализации css?

ответ

Смежные вопросы