2015-11-03 2 views
0

Я пытаюсь использовать раскрывающееся меню materializecss, но из четырех выпадающих меню пунктов, я вижу только два элемента в выпадающем меню. Вот мой HTML кодmaterializecss navigation dropdown

<nav class="white blue-text"> 
    <div class="navbar-wrapper container"> 
    <!-- <a class="brand-logo center waves-effect waves-light" href="javascript:void(0)">Abdul-Samii</a> --> 
    <a href="#" data-activates="mobile-menu" class="button-collapse indigo-text"><i class="material-icons">menu</i></a> 
    <a href="#" class="brand-logo left"> 
     <img src="images/logo.png" class="top-logo"> 
    </a> 

    <ul class="hide-on-med-and-down right"> 
     <li class="waves-effect waves-light"><a href="index.html">Home</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="about.html">About Us</a> 
     </li> 
     <li class="waves-effect waves-light"><a class="dropdown-button" href="#!" data-activates="dropdown1" href="javascript:void(0)">Gallery</a> 
     </li> 
     <ul id='dropdown1' class='dropdown-content'> 
     <li><a href="#!">Videos</a> 
     </li> 
     <li><a href="#!">Publication</a> 
     </li> 
     <li><a href="#!">Interviews</a> 
     </li> 
     <li><a href="#!">Pictures</a> 
     </li> 
     </ul> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">News</a> 
     </li> 
     <li class="waves-effect waves-light active"><a href="events.html">Events</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="partners.html">Partners</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a> 
     </li> 
    </ul> 
    <ul class="side-nav" id="mobile-menu"> 
     <li class="waves-effect waves-light"><a href="index.html">Home</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="about.html">About Us</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">Gallery</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">News</a> 
     </li> 
     <li class="waves-effect waves-light active"><a href="events.html">Events</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="partners.html">Partners</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

и единственное, что я сделал с моей нав в моем КСС это:

nav ul a { 
    font-size: 1.1rem; 
    color: #2196F3; 
} 
nav, 
nav .nav-wrapper i, 
nav a.button-collapse, 
nav a.button-collapse i { 
    height: 105px; 
    line-height: 105px; 
} 

проверка навигационной панели по этой ссылке: http://www.jalasem.com и нажмите на галерее, чтобы понять, что я говорю

+0

Создайте демо-версию своей проблемы со всеми связанными ресурсами. Это поможет вам получить ответ очень скоро. –

ответ

0

Угадайте, что я получил, что вам нужно .. Было очень мало, что ma de your code break .. Я только что удалил class = "wave-effect waves-light" от <li> тег выпадающего списка.

Ниже приведен рабочий код и все его CDN-файлы, поэтому просто скопируйте и вставьте мой код в любой файл, сохраните его с расширением .html и запустите напрямую.

Header часть

<!DOCTYPE HTML><html> 
<head><title> 
    </title> 

    <!-- Font-Awesome CDN --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link> 

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


</head> 

Следующая есть Тело с нав

<body> 

    <nav class="white blue-text"> 
     <div class="navbar-wrapper container"> 
     <!-- <a class="brand-logo center waves-effect waves-light" href="javascript:void(0)">Abdul-Samii</a> --> 
     <a href="#" data-activates="mobile-menu" class="button-collapse indigo-text"><i class="material-icons">menu</i></a> 
     <a href="#" class="brand-logo left"> 
      <img src="images/logo.png" class="top-logo"> 
     </a> 

     <ul class="hide-on-med-and-down right"> 
      <li class="waves-effect waves-light"><a href="index.html">Home</a> 
      </li> 
      <li class="waves-effect waves-light"><a href="about.html">About Us</a> 
      </li> 
      <li> 
      <a class="dropdown-button" href="#!" data-activates="dropdown1" href="javascript:void(0)">Gallery</a> 
      </li> 
      <ul id='dropdown1' class='dropdown-content'> 
      <li> 
       <a href="#!">Videos</a> 
      </li> 
      <li> 
       <a href="#!">Publication</a> 
      </li> 
      <li> 
       <a href="#!">Interviews</a> 
      </li> 
      <li> 
       <a href="#!">Pictures</a> 
      </li> 
     </ul> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">News</a> 
     </li> 
     <li class="waves-effect waves-light active"><a href="events.html">Events</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="partners.html">Partners</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a> 
     </li> 
    </ul> 
    <ul class="side-nav" id="mobile-menu"> 
     <li class="waves-effect waves-light"><a href="index.html">Home</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="about.html">About Us</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">Gallery</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">News</a> 
     </li> 
     <li class="waves-effect waves-light active"><a href="events.html">Events</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="partners.html">Partners</a> 
     </li> 
     <li class="waves-effect waves-light"><a href="javascript:void(0)">Contact Us</a> 
     </li> 
    </ul> 

Наконец сценарий и стиль с конца тела тега и колонтитула

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script> 
</body></html> 

стиль для нав такие же, как у использоваться я не добавил в коде, но вы добавляете его, а затем запустить код

Надежда U Got мои анс. удачи ..

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