Una barra de navegación es un elemento de interfaz de usuario dentro de una página web que contiene enlaces a otras secciones del sitio web. Se muestra como una lista de enlaces horizontales en la parte superior de cada página. Se coloca antes del contenido principal de la página o debajo del encabezado. La barra de navegación está contenida en un HTML5 <nav> seguido de un contenedor «div», que contiene 2 partes principales de la barra de navegación . Un enlace de logo o marca , y el enlace de navegación . Los enlaces se pueden alinear a la izquierda o a la derecha según los requisitos de la aplicación.
Las siguientes son las diferentes formas de usar las barras de navegación.
1. Alineado a la derecha: para alinear a la derecha los enlaces de la barra de navegación, se agrega la clase derecha al elemento <ul>.
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!-- Let browser know website is optimized for mobile --> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <nav> <div class="nav-wrapper green"> <a href="#" class="brand-logo"> Materialize </a> <ul id="nav-mobile" class= "right hide-on-med-and-down"> <li> <a href= "https://www.geeksforgeeks.org/materialize-css-tables/?ref=rp"> Table </a> </li> <li> <a href= "https://www.geeksforgeeks.org/materialize-css-colors/?ref=rp"> Colors </a> </li> <li><a href= "https://www.geeksforgeeks.org/materialize-css-typography/?ref=rp"> Typography </a> </li> </ul> </div> </nav> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Alineado a la izquierda: para alinear a la izquierda los enlaces de la barra de navegación, se agrega la clase izquierda al elemento <ul>.
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!-- Let browser know website is optimized for mobile --> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <nav> <div class="nav-wrapper green"> <a href="#" class="brand-logo right">Materialize </a> <ul id="nav-mobile" class= "left hide-on-med-and-down"> <li> <a href= "https://www.geeksforgeeks.org/materialize-css-tables/?ref=rp"> Table </a> </li> <li> <a href= "https://www.geeksforgeeks.org/materialize-css-colors/?ref=rp"> Colors </a> </li> <li> <a href= "https://www.geeksforgeeks.org/materialize-css-typography/?ref=rp"> Typography </a> </li> </ul> </div> </nav> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Logotipo central: para alinear el logotipo en el centro, se agrega clase central a <a class=”brand-logo”>. Aunque el logo se centrará en pantallas medianas y bajas. Mientras usa esto, asegúrese de que los enlaces no se superpongan.
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!-- Let browser know website is optimized for mobile --> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <nav> <div class="nav-wrapper green"> <a href="#" class="brand-logo center">Materialize </a> <ul id="nav-mobile" class= "left hide-on-med-and-down"> <li> <a href= "https://www.geeksforgeeks.org/materialize-css-tables/?ref=rp"> Table </a> </li> <li><a href= "https://www.geeksforgeeks.org/materialize-css-colors/?ref=rp"> Colors </a> </li> <li><a href= "https://www.geeksforgeeks.org/materialize-css-typography/?ref=rp"> Typography </a> </li> </ul> </div> </nav> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Elementos activos: se utiliza para indicar la página activa actual, ya que esta clase activa se agrega a la etiqueta «li».
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!-- Let browser know website is optimized for mobile --> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <nav> <div class="nav-wrapper green"> <a href="#" class="brand-logo center">Materialize </a> <ul id="nav-mobile" class= "left hide-on-med-and-down"> <li> <a href= "https://www.geeksforgeeks.org/materialize-css-tables/?ref=rp"> Table </a> </li> <li class="active"> <a href= "https://www.geeksforgeeks.org/materialize-css-colors/?ref=rp"> Colors </a> </li> <li><a href= "https://www.geeksforgeeks.org/materialize-css-typography/?ref=rp"> Typography </a> </li> </ul> </div> </nav> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Barra de navegación con pestañas: se utiliza para extender el componente de la barra de navegación. Para usar esto, la clase extendida de navegación se agrega a la etiqueta «nav» externa. Esto permitirá que el componente de pestañas dentro del «nav-wrapper» y la «altura» sean variables.
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!-- Let browser know website is optimized for mobile --> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <nav class="nav-extended green"> <div class="nav-wrapper"> <div class="container"> <a href="#" class="brand-logo"> LOGO </a> <a href="#" data-activates="mobile-menu" class="button-collapse"> <i class="material-icons">menu</i> </a> <ul class="right hide-on-med-and-down"> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> <li><a href="#">item4</a></li> </ul> <ul class="side-nav" id="mobile-menu"> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> <li><a href="#">item4</a></li> </ul> <!-- tabs items --> <ul class="tabs tabs-transparent"> <li class="tab"><a href="#test1"> Test 1 </a></li> <li class="tab"><a class="active" href="#test2">Test 2</a></li> <li class="tab disabled"><a href= "#test3">Disabled Tab</a></li> <li class="tab"><a href="#test4"> Test 4 </a></li> </ul> </div> </div> </nav> <!-- tabs content --> <div id="test1" class="col s12">Test 1</div> <div id="test2" class="col s12">Test 2</div> <div id="test3" class="col s12">Test 3</div> <div id="test4" class="col s12">Test 4</div> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Menú desplegable: para agregar un menú desplegable de la barra de navegación, se agrega la estructura desplegable «ul» a la página. Luego, se agrega un elemento para activar el menú desplegable. El «id» de la estructura desplegable se proporciona al atributo «objetivo de datos» del menú desplegable.
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!-- Let browser know website is optimized for mobile --> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <nav> <div class="nav-wrapper green"> <div class="container"> <a href="#" class="brand-logo">LOGO</a> <!-- mobile menu trigger --> <a href="#" data-activates="mobile-menu" class="button-collapse"> <i class="material-icons">menu</i> </a> <!-- desktop menu content --> <ul class="right hide-on-med-and-down"> <li><a href="#">Option-1</a></li> <li><a href="#">Option-2</a></li> <!-- desktop menu dropdown trigger --> <li><a class="dropdown-button" href="#!" data-activates="dropdown1"> Dropdown <i class="material-icons right"> arrow_drop_down </i> </a></li> <li><a href="#">Option-3</a></li> <!-- desktop menu dropdown content --> <ul id='dropdown1' class= 'dropdown-content green-text'> <li><a href="#!">sub-dropdown1</a></li> <li><a href="#!">sub-dropdown2</a></li> <li><a href="#!">sub-dropdown3</a></li> <li><a href="#!">sub-dropdown4</a></li> </ul> </ul> <!-- mobile and tablet menu content --> <ul id="mobile-menu" class="side-nav"> <li> <div class="userView"> <div class="background"> <img src= "http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" alt=""> </div> </div> </li> <li><a href="#!">Option-1</a></li> <li><a href="#!">Option-2</a></li> <li class="no-padding"> <ul class="collapsible collapsible-accordion"> <li> <!-- Mobile and tablet menu dropdown trigger --> <a class="collapsible-header">Dropdown <i class="material-icons right"> arrow_drop_down </i> </a> <div class="collapsible-body"> <!-- Mobile and tablet dropdown content --> <ul> <li><a href="#!">sub-dropdown1</a></li> <li><a href="#!">sub-dropdown2</a></li> <li><a href="#!">sub-dropdown3</a></li> <li><a href="#!">sub-dropdown4</a></li> </ul> </div> </li> </ul> </li> <li><a href="#!">Option-3</a></li> </ul> </div> </div> </nav> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Barra de navegación fija: para que la barra de navegación sea fija, se agrega un envoltorio externo «div» con la clase fija de la barra de navegación . Esto compensará todo el resto del contenido mientras se arregla la barra de navegación .
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!-- 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 "> <nav> <div class="nav-wrapper green"> <a href="#" class="brand-logo">LOGO</a> <a href="#" data-activates= "mobile-menu" class="button-collapse"> <i class="material-icons">menu</i></a> <ul class="right hide-on-med-and-down"> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> <li><a href="#">item4</a></li> </ul> <ul class="side-nav" id="mobile-menu"> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> <li><a href="#">item4</a></li> </ul> </div> </nav> </div> <h1>GeeksforGeeks</h1> <h1>GeeksforGeeks</h1> <h1>GeeksforGeeks</h1> <h1>GeeksforGeeks</h1> <h1>GeeksforGeeks</h1> <h1>GeeksforGeeks</h1> <h1>GeeksforGeeks</h1> <h1>GeeksforGeeks</h1> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Enlaces de iconos: los iconos se pueden agregar a los enlaces dentro de la barra de navegación . Para «icono» como enlaces, no es necesario agregar una clase adicional, solo use la etiqueta i .
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!-- Let browser know website is optimized for mobile --> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <nav> <div class="nav-wrapper green"> <a href="#!" class="brand-logo"> <i class="material-icons"> account_box </i>Logo </a> <ul class="right hide-on-med-and-down"> <li><a href="sass.html"><i class= "material-icons">search</i></a> </li> <li><a href="badges.html"><i class= "material-icons">add_to_photos</i></a> </li> <li><a href="collapsible.html"> <i class="material-icons">refresh</i></a> </li> <li><a href="mobile.html"><i class= "material-icons">dehaze</i></a> </li> </ul> </div> </nav> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA