Chess y Menu - (Parte I) - Parte Web HTML5
Vamos a comenzar otra serie de "Android y Chess" con la idea de acercarnos a la App que estamos intentando armar.
En esta serie, vamos a intentar hacer, o tomar un Menu. Y para esta primer post, aunque se llama "Android y Chess" no vamos a trabajar con Android, sino con la web. En el post siguiente, la parte II, realizaremos un menú similar, pero con Android.
El objetivo es utilizar alguna de las librerías de Menú que hay en Internet:
Mostremos dos ejemplos:
En esta serie, vamos a intentar hacer, o tomar un Menu. Y para esta primer post, aunque se llama "Android y Chess" no vamos a trabajar con Android, sino con la web. En el post siguiente, la parte II, realizaremos un menú similar, pero con Android.
El objetivo es utilizar alguna de las librerías de Menú que hay en Internet:
Mostremos dos ejemplos:
Lo que se observa, es que aunque hace menú similares, cambian un poco la técnica.
Algunos lo harán con mas uso de javascript, y otros utilizando la potencia del CSS3, y otras librerías propondrán utilizar ángular o jquery.
El objetivo de este post, no es encontrar "la mejor", sino mas bien integrar algunas a nuestra maqueta de ejercicios de ajedrez:
Comencemos:
Librería 01: tympanus.net
El sitio tympanus.net está muy bueno:
Del cual, tomaremos el siguiente menu
Donde se pueden ver las demos:
Una cosa importante, es que leímos los términos y condiciones de esta librería y se puede utilizar libremente, siempre y cuando respetemos los términos del "Open Source" y no nos atribuyamos como propio el trabajo ajeno.
Obviamente esta no es nuestra intención, así que seguimos adelante:
Me gusta la variante: "Show/Hide Left Push Menu" que desplaza hacia la derecha:
Y veamos cuantos pasos son necesarios para migrarla:
Agregamos:
Al Head:
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
Modifiamos el Body:
<body class="cbp-spmenu-push">
Y agreagmos el Nav
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<h3>Menu</h3>
<a href="index_mate_1.html">Mate en #1 </a>
<a href="index_mate_2.html">Mate en #2 </a>
<a href="index_mate_3.html">Mate en #3 </a>
<a href="index_mate_4.html">Mate en #4 </a>
</nav>
Con un Boton:
<button id="showLeftPush">Show/Hide Left Push Menu</button>
Lo cual mejora bastante la demo.
Con esto damos por finalizado el ingreso de la librería
http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v5/
Obviamente esta no es nuestra intención, así que seguimos adelante:
Directorio de Trabajo
/Users/pabloin/Desktop/NoCuestaNada/Mob/PNCN_Chess/post_chessjs/v5
Descargamos el archivo y lo descomprimimos:
Observemos que la estructura del HTML era la misma de nuestro proyecto de pagina web. Entonces se van a poder fusionar cómodamente, gracias a haber respetado cada proyecto diferente al mismo estandar.
chess.v4.mw000561.ferozo.com
Me gusta la variante: "Show/Hide Left Push Menu" que desplaza hacia la derecha:
Nuestra página, hoy se ve de la siguiente manera:
Agregamos:
Al Head:
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
Modifiamos el Body:
<body class="cbp-spmenu-push">
Y agreagmos el Nav
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<h3>Menu</h3>
<a href="index_mate_1.html">Mate en #1 </a>
<a href="index_mate_2.html">Mate en #2 </a>
<a href="index_mate_3.html">Mate en #3 </a>
<a href="index_mate_4.html">Mate en #4 </a>
</nav>
Con un Boton:
<button id="showLeftPush">Show/Hide Left Push Menu</button>
Con esto damos por finalizado el ingreso de la librería
chess.v5.mw000561.ferozo.com
Notas
En realidad el menu que me gustaría sería el mas parecido al de los celulares: Un icono celeste (tres barras) que indique que hay un menu, y cada opción con su ícono.
Como el de Facebook:
Comenzaremos con este
Links:
Otra librería interesante para un menu lateral es:
posted by kjnb @ April 20, 2016
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home