Блог

Сегодня я закончил свою первую страницу моего портфолио, и я вижу, что выпадающее меню (в навигационной панели для ПК) неактивно. Смотрите портфолио. Я проверяю style.css init.js и я не понимаю, почему мой выпадающий список остается выключенным: (

Я пытался скопировать HTML-код документации materialize, но безрезультатно. Я не знаю, почему блокируется идентификатор!! у тебя есть идея?

мой HTML-код :

     <div class="navbar-fixed ">
    <!-- marre menu -->
    <nav class=" blue">
        <div class="nav-wrapper container">

            <ul id="dropdown" class="dropdown-content">
                <li><a href="">Livrets de compétences</a></li>
                <li class="divider"></li>
                <li><a href="">Tutoriels</a></li>
            </ul>

            <a href="http://cappsim.fr" class=" brand-logo">Simon.C</a>
            <ul class="right hide-on-med-and-down white-text">
                <li class="waves-effect"><a href="#parcours">Mon parcours</a></li>

                <li><a class="dropdown-button " href="#!" data-hover="true"  data-activates="dropdown" data-beloworigin="true">Compétences<i class="material-icons right ">arrow_drop_down</i></a></li>

            <li class="waves-effect"><a href="">Veille Juridique</a></li>
            <li class="waves-effect"><a href="">Stages</a></li>
            <li class="waves-effect"><a href="">Curriculum Vitae</a></li>
            </ul>

            <ul id="nav-mobile" class="side-nav">
                <li><a href="http://cappsim.fr">Accueil</a></li>
                <div class="divider"></div>

                <li><a class="dropdown-button " data-hover="true" data-activates="dropdown" data-beloworigin="true">Compétences<i class="material-icons right ">arrow_drop_down</i></a></li>

                <li><a href="http://cappsim.fr">Veille juridique</a></li>
                <li><a href="http://cappsim.fr">Stages</a></li>
                <li><a href="http://cappsim.fr">Curriculum Vitae</a></li>
            </ul>
            <a data-activates="nav-mobile" class="button-collapse "><i class="material-icons white-text"></i></a>

        </div>

    </nav>
</div>
  

Мой JS-код :

 (function ($) {
$(function () {

    $('.button-collapse').sideNav();
    $('.parallax').parallax();

    $('.dropdown-button').dropdown();

    $(document).ready(function () {
        $(".dropdown-button").dropdown();
    });




    function isElementInViewport(el) {
        var rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 amp;amp;
            rect.left >= 0 amp;amp;
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) amp;amp;
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    var items = document.querySelectorAll(".timeline li");

    // code for the isElementInViewport function


    function callbackFunc() {
        for (var i = 0; i < items.length; i  ) {
            if (isElementInViewport(items[i])) {
                items[i].classList.add("in-view");
            }
        }
    }

    window.addEventListener("load", callbackFunc);
    window.addEventListener("scroll", callbackFunc);

}); // end of document ready


})(jQuery); // end of jQuery name space
  

Я сделал этот пример. В вашем случае, я думаю, этот отсутствующий список кнопка отобразит при нажатии. Здесь вы можете увидеть более подробную информацию о выпадающем JS в materialize

 $('.dropdown-button').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false, // Displays dropdown below the button
  alignment: 'left' // Displays dropdown with edge aligned to the left of button
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>  

Я каким-то образом помог.

Я обновил свой код и поместил ваш образец HTML :

http://pastebin.com/DA5piF0W

JS :

 (function ($) {
$(function () {

    $('.button-collapse').sideNav();
    $('.parallax').parallax();

    $(document).ready(function () {
        $(".dropdown-button").dropdown();
    });

    $('.dropdown-button').dropdown({
        inDuration: 300,
        outDuration: 225,
        constrain_width: false, // Does not change width of dropdown to that of the activator
        hover: true, // Activate on hover
        gutter: 0, // Spacing from edge
        belowOrigin: true, // Displays dropdown below the button
    });
  

css не материализуется разрыв?

http://pastebin.com/Q2dQFjK0

затем мой выпадающий контент работает

когда строка <a class='dropdown-button btn' href='#' data-hover="true" data-activates='dropdown1'>Drop Me!</a>

не находится в

 <div class="navbar-fixed ">
        <nav class=" blue">
            <div class="nav-wrapper container">
  

две кнопки работают, но если я скопирую образец на свою панель навигации, у меня не будет никакого эффекта…

я замечаю, что меню «сэндвич» исчезает, когда я перехожу по ссылке проблемы с мобильным?