Ejemplo para crear una barra de menu Angular
Estás buscando un ejemplo sencillo sobre cómo crear una barra de menu Angular pero no lo consigues. No busques más, aquí encontrarás una guía sencilla sobre cómo crear una barra de menu utilizando AngularJS.
Antes que nada revisa a continuación cómo se ve el ejemplo terminado:
Barra de menu Angular
1. Crear html y css.
Para empezar vamos a crear nuestro html. Para ello vamos a guardar el siguiente código en un archivo llamado index.html.
<link rel="stylesheet" href="styles.css">
<div id="main">
<nav>
<a href="#" class="home">Home</a>
<a href="#" class="projects">Proyectos</a>
<a href="#" class="services">Servicios</a>
<a href="#" class="contact">Contacto</a>
</nav>
</div>
Archivo index.html
Ahora vamos a crear un segundo archivo llamado styles.css donde colocaremos el css de nuestro ejemplo.
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:white;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
/*-------------------------
The menu
--------------------------*/
nav{
display:inline-block;
margin:60px auto 45px;
background-color:#aaa;
box-shadow:0 1px 1px #ccc;
border-radius:2px;
}
nav a{
display:inline-block;
padding: 18px 30px;
color:#fff !important;
font-weight:bold;
font-size:12px;
text-decoration:none !important;
line-height:1;
text-transform: uppercase;
background-color:transparent;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
nav a:first-child{
border-radius:2px 0 0 2px;
}
nav a:last-child{
border-radius:0 2px 2px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}
Archivo styles.css
Hasta ahora no hemos hecho nada especial. En el siguiente paso vamos a ver cómo incluir la magia de Angular en nuestro ejemplo.
2. Agregar Angular
Ahora vamos a agregar a nuestra barra de menu Angular, la librería angular.js. Para ello basta insertar la siguiente linea en nuestro archivo index.html.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
3. Inicializar Angular
Para inicializar Angular en nuestro ejemplo, basta con agregar la directiva ng-app dentro del div principal de nuestra barra de menu Angular de la siguiente forma:
<div id="main" ng-app>
4. Activar click del menú
Para activar el click en cada link del menú, vamos a añadir un class a nuestro menú nav indicando el link seleccionado por el usuario. En nuestro css hemos agregado un estilo que corresponde a cada link de nuestro menú de ejemplo.
Para lograr esto debemos crear una variable en Angular que almacene la opción seleccionada por el usuario. En este caso llamaremos a esta variable active. Esta variable la vamos a agregar directamente en la etiqueta nav como un class.
<nav class="{{active}}">
NOTA: En Angular si deseamos imprimir el valor de una variable en nuestro html debemos utilizar las llaves dobles {{ }}
Por último debemos asignar el valor de la variable active al hacer click en alguno de los links. Para ello debemos agregar la directiva ng-click en cada link del menu de la siguiente forma:
<nav class="{{active}}" ng-click="$event.preventDefault()">
<a href="#" class="home" ng-click="active='home'">Home</a>
<a href="#" class="projects" ng-click="active='projects'">Proyectos</a>
<a href="#" class="services" ng-click="active='services'">Servicios</a>
<a href="#" class="contact" ng-click="active='contact'">Contacto</a>
</nav>
Lo que estamos haciendo es diciéndole a Angular que le asigne a la variable active el nombre de cada link. Cuando el usuario haga click en alguno de estos links, Angular automáticamente asignará el valor de la variable active y cambiará automáticamente el class de nuestro nav al nuevo valor.
Como observación adicional podrás notar que he agregado también la directiva ng-click a nuestro nav ng-click=»$event.preventDefault()». Esto lo hacemos para prevenir el click de cada link. En caso que no lo necesiten pueden removerlo.
Esto es todo : )
Adicional
Si ejecutan el código hasta este momento, notarán que al cargar la barra de menu Angular, la misma no tiene ninguna opción seleccionada. Si desean que aparezca automáticamente alguna de las opciones marcadas podemos hacerlo con la directiva ng-init.
Solo debemos agregar el siguiente código en nuestro nav para lograrlo:
<nav class="{{active}}" ng-click="$event.preventDefault()" ng-init="active='home'">
Ahora nuestro menú marcará automáticamente como activo el link home al cargar la página.
Si te parece interesante este ejemplo o si tienes alguna pregunta no dudes en escribir en los comentarios.
Enlaces de interés
Insertar un archivo JSON en una base de datos utilizando PHP