Materializar barras de navegación CSS

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *