Estoy creando un sb admin 2 al igual que la página donde tiene 2 navegaciones que se parece a esto:

MaterializeCSS NavBar y SideNav

Y lo que he hecho hasta ahora es este:

MaterializeCSS NavBar y SideNav

Como se puede ver, el panel de navegación lateral se extiende en la parte superior de la barra. Mi código hasta el momento es esta:

<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://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>
<div class="navbar-fixed">
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">User Profile</a></li>
<li><a href="#!">Settings</a></li>
<li class="divider"></li>
<li><a href="#!">Logout</a></li>
</ul>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
<a href="#!" class="brand-logo">Point of Sale</a>
<ul class="right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
(function($){
$(function(){
$('.button-collapse').sideNav();
}); //end of document ready
})(jQuery); //end of jQuery name space
</script>
</body>
</html>

Lo que estoy tratando de lograr es este:

MaterializeCSS NavBar y SideNav

Es esto posible?

InformationsquelleAutor wobsoriano | 2016-10-07

5 Comentarios

  1. 9

    Como el Lado Nav documentaciones dice:

    Usted tiene que compensar su contenido por el ancho del menú lateral.
    para hacer esto

    <style type="text/css">
    .wrapper {
    padding-left: 300px;
    }
    </style>

    y ajustar el código en contenedor div

    <div class="wrapper">
    <div class="">
    <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">User Profile</a></li>
    <li><a href="#!">Settings</a></li>
    <li class="divider"></li>
    <li><a href="#!">Logout</a></li>
    </ul>
    <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container">
    <a href="#!" class="brand-logo">Point of Sale</a>
    <ul class="right hide-on-med-and-down">
    <!-- Dropdown Trigger -->
    <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
    </div>
    </nav>
    </div>
    </div>
    <ul id="slide-out" class="side-nav fixed">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    • Hola gracias. La mente busca en mi post actualizado?
    • sí, se puede hacer, pero usted tiene que escribir un css personalizado para que el diseño… 1. Mover fuera de barra de exploración de la envoltura de la etiqueta 2. aumento de z-index para la barra de navegación 3. y mover diapositivas de navegación de la parte superior como la barra de navegación de altura espero que esto les ayude..
  2. 3

    Debe intentar:

    <style type="text/css">
    .side-nav{
    top: 65px;
    width: 250px;
    }
    </style>

    y ajustar el código en el encabezado y aparte:

    <header>
    <div class="navbar-fixed">
    <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">User Profile</a></li>
    <li><a href="#!">Settings</a></li>
    <li class="divider"></li>
    <li><a href="#!">Logout</a></li>
    </ul>
    <div class="nav-wrapper">
    <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container">
    <a href="#!" class="brand-logo">Point of Sale</a>
    <ul class="right hide-on-med-and-down">
    <!-- Dropdown Trigger -->
    <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
    </div>
    </nav>
    </div>
    </div>
    </header>
    <aside>
    <ul id="slide-out" class="side-nav fixed">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    </aside>
  3. 1

    aquí está mi solución para evitar el exceso de vuelta con la parte superior barra de navegación, y para esconderse en el pequeño med pantallas

    agregar:

    <ul class="sidenav sidenav-fixed invesible-top" id="mobile-nav">
    

    también es opcional para hacer que se muestran en la parte superior de nuevo en las pantallas pequeñas:

    <li class="hide-on-large-only">
    

    estilo:

      @media only screen and (min-width : 992px) {
    .invesible-top {
    top: 65px;
    }
    }

    MaterializeCSS NavBar y SideNav

    MaterializeCSS NavBar y SideNav

  4. 0

    MaterializeCSS recomienda su propia modificación para esto:

    header, main, footer {
    padding-left: 300px;
    }
    @media only screen and (max-width : 992px) {
    header, main, footer {
    padding-left: 0;
    }
    }

    Referencia aquí.

  5. 0

    Alguna vez me he topado con algún problema cuando Nav se desborda más allá del ancho de su contenedor (en mi caso, la etiqueta de encabezado) así que puedo usar esto en vez de lo que MaterializeCSS recomienda:

    Nota: En sass, aunque.

    header, main, footer {
    margin-left: 300px;
    nav {
    left: 300px;
    right: 0;
    width: auto;
    }
    @media only screen and (max-width : 992px) {
    margin-left: 0;
    nav {
    left: 0;
    right: 0;
    width: auto;
    }
    }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here