Add dropdown in navigation #202

vacquah · 2014-12-08T03:53:14Z

Is there a way to design a navbar which includes an element with a dropdown?

acburst · 2014-12-08T07:00:14Z

Yes. Just add the dropdown code into the navbar. We may add an example in the docs in the near future

acburst · 2014-12-08T15:51:34Z

I have added this example to the docs in components -> navbar

vacquah · 2014-12-08T16:57:30Z

wonderful. thxx

lmaccherone · 2014-12-08T17:08:57Z

It's a bit wonky. Under Chrome, Firefox and Safari, if you click on the mdi-navigation-arrow-drop-down icon rather than the word, "Dropdown", it self-unselects before you can pick something.

vacquah · 2014-12-08T17:23:07Z

ah yes. is there a fix for this?

acburst · 2014-12-08T17:35:56Z

Hmm not sure. We'll look into it soon

vacquah · 2014-12-08T17:37:26Z

So are you going to reopen this? - to keep it on the radar?

victordeassis · 2014-12-10T14:08:49Z

Hey guys! First of all, congrats for the initiative, you are doing a beautiful job! I have a problem with the navbar, I just copy and paste the Example code in the navbar section, but my navbar is totally broke. I will attach an image with the problem and the code. Thanks.

Dogfalo · 2014-12-10T14:40:43Z

Hey @victordeassis,
Do you mind copy and pasting the actual code here so we can easily test it? Thanks!

victordeassis · 2014-12-10T15:34:20Z

Hey! thanks for the feedback, here is the code:

  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
</head>

<body>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li><a href="#!">three</a></li>
  </ul>
  <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="brand-logo">Logo</a>
        <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
        <ul class="right side-nav">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="components.html">Components</a></li>
          <!-- Dropdown Trigger -->
          <li><a class="dropdown-button" href="" data-activates='dropdown1'>Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

-->

Dogfalo · 2014-12-10T15:38:55Z

Have you initialized the dropdown? Your code will work after you do.

Add:

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

victordeassis · 2014-12-10T15:42:53Z

Yes! but when I open the page, the dropdown is already "pressed", my dropdown list is on the left side of the screen, and my dropdown button is unaligned with the navbar components. Like the first picture that I've posted.

Dogfalo · 2014-12-10T15:51:48Z

Can you also post your dropdown initialization code? Currently I am not able to replicate this behavior.

victordeassis · 2014-12-10T15:53:46Z

Dogfalo, when you say "initialization" is the HTML itself?

This code is inside BODY brackets:

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="#!" class="brand-logo">Logo</a>
      <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
      <ul class="right side-nav">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="components.html">Components</a></li>
        <!-- Dropdown Trigger -->
        <li><a class="dropdown-button" href="" data-activates='dropdown1'>Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
      </ul>
    </div>
  </div>
</nav>

thebergamo · 2014-12-10T15:53:48Z

The initialization is not running on the load page and simule the event "click"?

thebergamo · 2014-12-10T15:55:15Z

@victordeassis you need adding this code on your body:

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

victordeassis · 2014-12-10T15:56:45Z

Niiice! Thanks a lot guys ;) it worked fine when I include the jQuery script. Where can I find these instrucions in the documentation website?

thebergamo · 2014-12-10T15:57:29Z

http://materializecss.com/javascript.html

at the bottom of the page have the initialization code =D

victordeassis · 2014-12-10T15:58:57Z

Oh! Sorry for my lack of attention. Thanks again Marcos and Dogfalo, problem solved ;)

ConsoleTVs · 2014-12-11T22:57:20Z

This shall be closed :) nice work!

vacquah · 2014-12-11T23:21:36Z

I think the original issue is still outstanding ... Before @victoreassis's issue. Pls see earlier comments.

iamraju · 2014-12-30T10:05:08Z

How can I enable the onchange or onclick events ? Currently there is no way to call any other functions with .dropdown(). I just want to call an AJAX once an item is selected.

Would really appreciate if one can reply here as soon as possible.

fteem · 2015-03-18T19:14:01Z

@iamraju did you solve your question?

DWboutin · 2015-07-17T00:34:40Z

The dropdown don't work for me. I use it with Meteor JS. This is my onRedered function:

Template.header.onRendered(function(){
    $(".button-collapse").sideNav();
    $(".dropdown-button").dropdown();
});

The .sideNav() works well, but the .dropdown didn't work at all.

This is my LI tag

<li>
  <a href="#!" class="dropdown-button" data-activates="account-dropdown">My account <i class="material-icons right">&#xE313;</i></a>
  <ul id="account-dropdown" 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>
</li>

Nothing changes when i click on my link. I tried anything, any changes to make it work. Please help.

iamraju · 2015-07-17T02:32:42Z

@fteem Nope, I had to switch to something else to solve it.

ranska · 2015-09-07T08:10:50Z

@DWboutin same for me i do everthing that is writing here but it didn't work for me.
it work on side bar but not on top menu
version:
gem materialize-sass (0.97.0)

nigelpasco · 2015-09-26T02:21:34Z

@DWboutin @ranska On meteor it seems ok. I have tested on a fresh simple meteor build with materialize@=0.97.0

@DWboutin I think you need to take the account-dropdown section out of the

. It should be separated from the button.

@ranska... any details? See below for a working meteor example.

<head>
  <title>test2</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- adds material icons -->
</head>

<body>

  {{> hello}}
</body>

<template name="hello">

  <!-- 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>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

</template>

if (Meteor.isClient) {

  Template.hello.onRendered(function(){
      $(".dropdown-button").dropdown();
  });

}

jalasem · 2015-11-04T05:07:06Z

I used the dropdown in my navigation bar, but two out of four is showing and here is my code in html for my navbar:

menu

              <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 active"><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.html">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"><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 active"><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"><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>

here is all my css modifications:

.slider{
margin-top: 0.1rem;
}
.top-logo {
width: 15rem;
margin-top: -4rem;
}
nav ul a {
font-size: 1.1rem;
color: #2196F3;
}
#donate{
height: 400px;
padding: 0 0rem;
margin-top: -1.65rem;
padding-top: 5rem;
}
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
min-height: 105px;
line-height: 105px;
}
.container {
width: 95%;
}
p,h1,h2,h3,h4,h5{
color: #2196F3;
}
h5{
margin: 0.5rem auto;
}
.card{
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.card p, .card ul li, ul li{
font-size: 1.1rem;
}
.slider .slides li .caption {
color: #fff;
position: absolute;
top: 15%;
left: 10%;
width: 70%;
opacity: 0;
}
.caption h1,.caption h2, .caption h3, .caption h4, .caption h5, .caption p{
color: white;
}
.input-field {
position: relative;
margin-top: 0rem;
}

and lastly my js:

    $(document).ready(function(){
  $('.slider').slider({full_width: true, height:350});
});
$('.dropdown-button').dropdown({
  inDuration: 300,
  outDuration: 225,
  hover: true,
  belowOrigin: true

);

I have uploaded a demo at http://www.jalasem.com
thank you

santhosh77h · 2015-11-12T09:23:41Z

while implementing dropdown for mobile app using phonegap. dropdown-content is not closing on selecting any one dropdown content.i have used the same codes from materializecss dropdown codes. and i have initilized dropdown in my javascript file as

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

acburst closed this as completed Dec 8, 2014

acburst reopened this Dec 8, 2014

acburst closed this as completed Dec 19, 2014

Smankusors pushed a commit to Smankusors/materialize that referenced this issue Jan 10, 2022

Merge pull request Dogfalo#202 from LoganTann/issue179-docsVersion

aa686d1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dropdown in navigation #202

Add dropdown in navigation #202

vacquah commented Dec 8, 2014

acburst commented Dec 8, 2014

acburst commented Dec 8, 2014

vacquah commented Dec 8, 2014

lmaccherone commented Dec 8, 2014

vacquah commented Dec 8, 2014

acburst commented Dec 8, 2014

vacquah commented Dec 8, 2014

victordeassis commented Dec 10, 2014

Dogfalo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

Dogfalo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

Dogfalo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

thebergamo commented Dec 10, 2014

thebergamo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

thebergamo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

ConsoleTVs commented Dec 11, 2014

vacquah commented Dec 11, 2014

iamraju commented Dec 30, 2014

fteem commented Mar 18, 2015

DWboutin commented Jul 17, 2015

iamraju commented Jul 17, 2015

ranska commented Sep 7, 2015

nigelpasco commented Sep 26, 2015

jalasem commented Nov 4, 2015

santhosh77h commented Nov 12, 2015

Add dropdown in navigation #202

Add dropdown in navigation #202

Comments

vacquah commented Dec 8, 2014

acburst commented Dec 8, 2014

acburst commented Dec 8, 2014

vacquah commented Dec 8, 2014

lmaccherone commented Dec 8, 2014

vacquah commented Dec 8, 2014

acburst commented Dec 8, 2014

vacquah commented Dec 8, 2014

victordeassis commented Dec 10, 2014

Dogfalo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

Dogfalo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

Dogfalo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

thebergamo commented Dec 10, 2014

thebergamo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

thebergamo commented Dec 10, 2014

victordeassis commented Dec 10, 2014

ConsoleTVs commented Dec 11, 2014

vacquah commented Dec 11, 2014

iamraju commented Dec 30, 2014

fteem commented Mar 18, 2015

DWboutin commented Jul 17, 2015

iamraju commented Jul 17, 2015

ranska commented Sep 7, 2015

nigelpasco commented Sep 26, 2015

jalasem commented Nov 4, 2015

santhosh77h commented Nov 12, 2015