The Digital Mike

menu de navegacion

Barra de navegación en html5 y angularjs

The Digital Mike

|

|

, , , , , ,

Al tratar de simplificar un sitio web para hacerlo más compatible con dispositivos móviles, descubrí que hacerlo de manera muy simple, a veces se vuelve muy complicado de lograr. Pero la emoción de codificar algo interesante puede sumergirme realmente en lo que estoy haciendo. De aquí es cuando elabore una barra de navegación en html5 y angularjs.

Consulte una muestra en vivo en CodePen aquí: Simple Navigation Bar

A veces, la gente piensa que las tareas simples de los usuarios en cualquier aplicación son realmente fáciles de hacer, eso está mal, desarrollar la simplicidad para el usuario final puede ser realmente difícil. Veamos esto con este ejemplo.

El sitio de este ejemplo comenzará de forma aleatoria. Dado que es un ejemplo, eso me da la posibilidad de dirigirme al sitio en la dirección que desee. Entonces, al buscar en la web encontré que a veces el sitio funciona muy bien en cualquier tamaño de pantalla, pero cuando lo abres en un dispositivo móvil, pierde el concepto.

Visto eso, empiezo a construir un sitio genérico solo para dispositivos móviles, es necesario que sea simple, funcional, atractivo y muy fácil de usar. Entonces, comencemos con un archivo html5 simple y luego saltaremos para crear la barra de navegación en html5 y angularjs para todo el sitio.

Esto comienza con el código HTML, más la biblioteca AngularJS, más la biblioteca Font Awesome y Bootstrap para minimizar el tiempo de desarrollo de la primera parte del sitio. La aplicación utilizada para construir el sitio depende de sus preferencias. Puede usar Glitch (IDE en línea para la web) o Notepad ++, o como yo, Visual Studio Code o su editor de texto preferido.

Este es el archivo de inicio HTML5:

<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mobile Document</title>
   
   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
   
   <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
   
   <link rel="stylesheet" href="css/style.css">
   
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>


   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Ok, la estructura del proyecto es simple: creas una carpeta que tendrá dentro de tu index.html, tu carpeta bootstrap si la guardas desde la web (o puedes usar la CDN en su lugar), la carpeta font-awesome más el CSS regular, js, carpetas de imágenes. Luego, haga referencia a todos los estilos y archivos javascript, como puede ver en el código anterior. La estructura del archivo se verá así a continuación.

  • Main_folder
    • Bootstrap
    • Fontawesome
    • CSS
      • style.css
    • Js
    • Images
    • Index.html

Ahora, esta es la página más simple con un sistema angular funcional, intente agregar «{{4 + 12}}» después de la etiqueta «» y actualice su navegador y la matemática mágica sucederá. Ahora que tenemos todo en su lugar y funcionando bien, comencemos a construir la barra de navegación. Como es una pantalla pequeña, usaremos sistemas de iconografía, y también usaremos el estilo interior para un resultado de vista previa final rápido. Más adelante, todo el estilo lo moverá al archivo de estilo. Empecemos con un estilo básico.

Abra «style.css» y agregue solo esto:

html, body{
   width: 100%;
}
body{
   padding: 0;
   margin: 0;
   background-color: lightgrey;
}

Este código ajusta el ancho de su página a tamaño completo y restablece todo el relleno y los márgenes, también hace que el fondo de su cuerpo sea un poco gris. Ahora abramos index.html y agreguemos el código de navegación básico. La navegación tendrá un botón de menú, un título, un botón de búsqueda, un botón de inicio de sesión / registro de usuario si lo desea, y un auto de corte con fines de emulación por ahora. Usaremos Font Awesome para los íconos. Este es el código:

<div>
   <nav>
       <button>
          <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
       </button>
           
       <a href="#">
          <h3>Logo Brand Img</h3>
       </a>
           
       <div>
          <a href=""><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
          <a href="#" ><i class="fa fa-user-o fa-2x" aria-hidden="true"></i></a>
          <a href="#"><i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i></a>
       </div>
    </nav>
</div>

Ahora agregue un poco de estilo y arranque al código y al final, verá la diferencia.

<div style="width:100%;">
      <nav style="width:100%;" class="navbar navbar-light bg-light fixed-top">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#mainmenu" aria-expanded="false" aria-label="Main Menu">
          <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
        </button>
        
        <a href="#" style="text-decoration:none;">
          <h3>Logo Brand Img</h3>
        </a>
        
        <div>
          <a href="#" style="margin: 0 .4em;"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
          <a href="#" style="margin: 0 .4em;"><i class="fa fa-user-o fa-2x" aria-hidden="true"></i></a>
          <a href="#" style="margin: 0 .4em;"><i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i></a>
        </div>
      </nav>
</div>

Aquí la diferencia:

diferencia de la pagina con y sin estilo

Cualquier cosa que desee agregar a esta página, déjela en los comentarios a continuación.