uniwebsidad

Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Problemas con navbar y dropdown en Materialize

26 de marzo de 2018

Hola que tal.

Estoy confeccionando un sitio con Materialize, y me da problemas en dropdown, los que van en la barra navbar no funcionan, habiendo copiado los ejemplos que salen en la documentación.

Sin embargo en sidenav si funciona lo mas bien (Dejo el código mas abajo)

Y lo otro que la imagen del usuario, sale fuera de la imagen de fondo.png en el backgraund de sidenav, y no dentro o encima como debiera ser.

Si alguien me puede ayudar por favor, eternamente agradecido. Un Cordial Saludo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
 
    <body>
        <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>
        <ul id="dropdown2" class="dropdown-content">
            <li><a href="#!">Opcion 1</a></li>
            <li><a href="#!">Opcion 2</a></li>
            <li class="divider"></li>
            <li><a href="#!">Opcion 3</a></li>
        </ul>
        <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 id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="sass.html">Sass</a></li>
                    <!-- Dropdown Trigger -->
                    <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Sub Menu<i class="material-icons right">arrow_drop_down</i></a></li>
                    <li><a href="badges.html">Components</a></li>
                    <li><a href="collapsible.html">JavaScript</a></li>
                    <!-- Dropdown Trigger -->
                    <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">Opciones<i class="material-icons right">arrow_drop_down</i></a></li>
                </ul>
            </div>
        </nav>
 
        <ul class="sidenav" id="mobile-demo">
            <li>
                <div class="userView">
                    <div class="background">
                        <img src="img/fondo.png" class="responsive-img">
                    </div>
                    <a href="#!user"><img class="circle z-depth-5" src="img/foto.jpeg" z-></a>
                    <a href="#!name"><span class="white-text nombre">Nombre : Claudio González</span></a>
                    <a href="#!email"><span class="white-text email">Email : [email protected]</span></a>
                </div>
            </li> 
            <li><a href="sass.html">Sass</a></li>
            <!-- Dropdown Trigger -->
            <li><a class="dropdown-trigger show-on-large" href="#!" data-target="dropdown1">Sub Menu<i class="material-icons right">arrow_drop_down</i></a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">JavaScript</a></li>
            <!-- Dropdown Trigger -->
            <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">Opciones<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
 
        <script>
            $('.dropdown-content').dropdown({
                inDuratio: 300,
                outDuratio: 225,
                constrainWidth: true,
                coverTrigger: false,
                hover: true,
            })
        </script>
        <!--JavaScript Jquery-->
        <script src="js/jquery-3.1.1.min.js"></script>
        <!--JavaScript at end of body for optimized loading-->
        <script src="js/materialize.min.js"></script>
 
        <script>
            var collapsibleElem = document.querySelector('.collapsible');
 
            $(function () {
                $(".dropdown-trigger").dropdown();
                $('.sidenav').sidenav();
            })
        </script>
    </body>
</html>
css html materialize