Блог

Я хочу создать веб-страницу с materialize css. Поэтому у меня есть панель навигации в верхней части моей страницы. Я хочу включить выпадающее меню выбора языка. Код, который я использовал:

HTML:

 <!-- top navbar -->
<header>
  <nav>
    <div class="nav-wrapper blue darken-3">
      <a href="index.html"><img src="img/logo.png" id="appicon" style="vertical-align: middle; margin-bottom: 15px; margin-left: 10px;" width="50" alt="logo"></a>
      <span class="center-align hide-on-small-only" style="font-size: 25px; margin-left: 10px;">
        Title
      </span>
      <a href="index.html" data-target="sidebar" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="index.html" style="font-size: 18px">Home</a></li>
        <li><a href="statistics.html" style="font-size: 18px">Stats</a></li>
        <li class="active"><a href="tutorials.html" style="font-size: 18px">Tutorials</a></li>
        <li><a href="contact.html" style="font-size: 18px">Contact</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdownLanguage"><i class="material-icons right">translate</i></a></li>
      </ul>
    </div>
  </nav>
</header>

<!-- Dropdown Structure -->
<ul id="dropdownLanguage" class="dropdown-content">
  <li class="active"><a href="#!">Germanamp;emsp;<i class="material-icons right">check</i></a></li>
  <li><a href="tutorials_en.html">English</a></li>
</ul>
 

jQuery:

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

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

    $(document).ready(function(){

      /* Activate dropdown menu */
      $(".dropdown-trigger").dropdown({
        constrainWidth: false,
        // coverTrigger: false
        belowOrigin: true
      });

    });

  }); // end of document ready
})(jQuery);
 

css:

 body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}
 

Проблема, с которой я сталкиваюсь, заключается в том, что выпадающее языковое меню не открывается под триггером. Я попробовал параметры jQuery ‘belowOrigin’, а также ‘coverTrigger’. Независимо от того, какой из двух я использовал, выпадающий список не откроется ниже источника триггера. (Проверено в Firefox и Chrome.)

Есть ли у кого-нибудь идея, что я могу попробовать или в чем проблема?

Теперь я понял это. Выпадающей структуре нужен символ, чтобы «найти» позицию триггера. Значка, который я использовал, было недостаточно. Вставка любого текста помогла. Поскольку я не хотел иметь никакого текста, я выбрал крошечный пробел ( amp;hairsp; ).

Строка, о которой идет речь, теперь выглядит так:

 <li><a class="dropdown-trigger" href="#!" data-target="dropdownLanguage1">amp;hairsp;<i class="material-icons right">translate</i></a></li>
 

Может быть, это кому-то поможет.

Лучшие