jQuery Mobile: barras de navegación en los encabezados

Descripción

Puede agregar la barra de navegación a la parte superior de la página agregando el contenedor de la barra de navegación dentro del bloque de encabezado.

Ejemplo

El siguiente ejemplo demuestra el uso de las barras de navegación en los encabezados en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Navbars in headers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "header" style = "overflow:hidden;">
         <h2>This is Header</h2>
         <a href = "#" data-icon = "gear" class = "ui-btn-right">Options</a>
         <div data-role = "navbar">
            <ul>
               <li><a href = "#" class = "ui-btn-active">Home</a></li>
               <li><a href = "#">About Us</a></li>
               <li><a href = "#">Contact Us</a></li>
            </ul>
         </div>
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como navbar_headers.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/navbar_headers.html y se mostrará el siguiente resultado.

↰ Previous page