Barras de Navegacion

Navbar Basica

Para crear una navbar cremos la etiqueta < nav > con clase nav-wrapper
En una nav-bar se puede poner enlaces, listas, etc
El enlace con la clase brand-logo es el logo de nuestra pagina
La lista ponemos la clase right para que se muestre a la derecha de la navbar
Para ocultar los enlaces en pantallas pequeñas hay que ocupar la clase hide-on-med-and-down
Para mostrar el icono menu y aparezca el menu cuando lo pulsemos, tenemos que colocar el icono dentro de un enlace
con una etiqueta data-target con un valor que sera el id de un div y una clase sidenav-trigger que sirve para que desaparezca en pantallas grandes
Y para crear la seccion del menu necesitamos otra <ul> con la clase sidenav y el id que pusimos en data-target. Con los mismos enlaces que la nav

<nav class="nav-wrapper"> <div class="container"> <a href="#" class="brand-logo">Gaesgasoft</a> <a href="#" data-target="menu-responsive" class="sidenav-trigger"> <i class="material-icons">menu</i> </a> <ul class="right hide-on-med-and-down"> <li><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li><a href="#">Enlace 3</a></li> </ul> </div> <ul class="sidenav" id="menu-responsive"> <li><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li><a href="#">Enlace 3</a></li> </ul> </nav>

Links alineados

Para usar los alineamientos tenemos que hacer algunos cambios respecto a la navbar anterior
Creamos una etiqueta <nav> y dentro un div con clase nav-drapper
Ahi creamos los enlaces y el logo con el alineamiento que queramos

• Izquierda 1
• Izquierda 2
• Izquierda 3

• Derecha 1
• Derecha 2
• Derecha 3

<nav class="purple"> <div class="nav-drapper"> <a href="#" data-target="menu-izkierda" class=" sidenav-trigger left"> <i class="material-icons">menu</i> </a> <ul class="left hide-on-med-and-down"> <li><a href="#alineados"></a>Izquierda 1</a></li> <li><a href="#alineados">Izquierda 2</a></li> <li><a href="#alineados">Izquierda 3</a></li> </ul> <a href="#" class="brand-logo center">Gaesgasoft</a> <a href="#" data-target="menu-derecha" class=" sidenav-trigger right"> <i class="material-icons">menu</i> </a> <ul class="right hide-on-med-and-down"> <li><a href="#alineados">Derecha 1</a></li> <li><a href="#alineados">Derecha 2</a></li> <li><a href="#alineados">Derecha 3</a></li> </ul> </div> </nav> <ul class="sidenav" id="menu-izkierda"> <li><a href="#alineados">Izquierda 1</a></li> <li><a href="#alineados">Izquierda 2</a></li> <li><a href="#alineados">Izquierda 3</a></li> </ul> <ul class="sidenav" id="menu-derecha"> <li><a href="#alineados">Derecha 1</a></li> <li><a href="#alineados">Derecha 2</a></li> <li><a href="#alineados">Derecha 3</a></li> </ul>

Navbar Fixed

Para que la navbar se quede siempre en pantalla hay que envolver todo con un div clase navbar-fixed

<div class="navbar-fixed"> <nav class="red"> <div class="nav-wrapper"> <a href="#!" class="brandlogo">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> </ul> </div> </nav> </div>

Navbar Dropdown

Para crear un menu dropdown, dentro del elemento li de la lista creamos un ancla con la clase dropdown-trigger y el atributo data-target con un id
Tambien tenemos que incluir el icono de flecha hacia abajo
Para crear los elementos del dropdown, creamos una lista con el id del data-target y la clase dropdown-content

• Sass
• Components
• Dropdown arrow_drop_down
  • Irtem 1
  • Irtem 2
  • Irtem 3

<nav class="green"> <div class="nav-wrapper"> <a href="#!" class="brandlogo">Logo</a> <a href="#" data-target="menu-respons" 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 href="#" class="dropdown-trigger" data-target="id_drop">Dropdown <i class="material-icons right">arrow_drop_down</i> </a> <ul id="id_drop" class="dropdown-content"> <li><a href="#">Irtem 1</a></li> <li><a href="#">Irtem 2</a></li> <li class="divider"></li> <li><a href="#">Irtem 3</a></li> </ul> </li> </ul> </div> </nav> <ul class="sidenav" id="menu-respons"> <li><a href="sass.html">Sass</a></li> <li><a href="badges.html">Components</a></li> <li> <a href="#" class="dropdown-trigger" data-target="id_drop2">Dropdown <i class="material-icons right">arrow_drop_down</i> </a> <ul id="id_drop2" class="dropdown-content"> <li><a href="#">Irtem 1</a></li> <li><a href="#">Irtem 2</a></li> <li class="divider"></li> <li><a href="#">Irtem 3</a></li> </ul> </li> </ul>