CODEWITHSUNDEEP
materialize
Sagar
Sagar

Reputation: 47

Multiple link dropdown issue in materializecss

I am using materialize css 1.0.0-rc.2. I am having issues in dropdown. Same dropdown is linked to navbar and sidenav but only one of them working and next thing is it should come below the navbar or link when hovered or clicked.What should I do please help? Code can be found here

Upvotes: 0

Views: 776

Answers (1)

Germa Vinsmoke
Germa Vinsmoke

Reputation: 3759

I think it won't work for same dropdown structure in both Navbar and Sidebar. Making two dropdown structure can solve your problem.

<nav>
    <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger">
            <i class="material-icons">menu</i>
        </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>
            <li>
                <a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown
                    <i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
        </ul>
    </div>
</nav>

<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>
<ul id="dropdown2" class="dropdown-content">
    <li>
        <a href="#!">one</a>
    </li>
    <li>
        <a href="#!">two</a>
    </li>
    <li>
        <a href="#!">three</a>
    </li>
</ul>

<ul class="sidenav" id="mobile-demo">
    <li>
        <a href="sass.html">Sass</a>
    </li>
    <li>
        <a href="badges.html">Components</a>
    </li>
    <li>
        <a class="dropdown-trigger2" href="#" data-target="dropdown2">Dropdown
            <i class="material-icons right">arrow_drop_down</i>
        </a>
    </li>
</ul>
<script>
    $(document).ready(function () {
        $(".dropdown-trigger").dropdown({
            hover: true
        });
        $(".dropdown-trigger2").dropdown();
        $('.sidenav').sidenav();
    });
</script>

Upvotes: 1

Related Questions