Tutorial de Cómo Crear una Barra Lateral en HTML Fácilmente

https://youtu.be/lB46vlLi0EY

En el momento en que contamos páginas con bastante artículo y un menú del costado con links a mucho más contenido, nos ofrecemos cuenta de que tras mover la pantalla para poder ver la información hasta el desenlace, el menú del costado por el momento no tiende a estar aparente puesto que tiende a estar fijo en la pantalla.

A través de la utilización de la biblioteca jQuery, tal como ciertas técnicas de CSS, tenemos la posibilidad de lograr que este menú sea móvil inteligente con la barra de movimiento de la pantalla a fin de que siempre y en todo momento esté aparente.

Índice

Barra del costado de administración
Hacer un menú de navegación
Estilos para el menú HTML horizontal
¡Hagamos el menú horizontal HTML Responsive!
Resultado final
Cuestiones usuales
1. ▶︎ Fallo de referencia no detectado Fallo: $ no está definido al procurar nuestro fichero empleando javascript
2. ▶︎ Para configure el ícono adecuadamente
¿Qué debo poner en mi barra del costado?

Barra del costado de administración

Hacer un menú de navegación

Para llevar a cabo esto, requerimos utilizar la etiqueta

. No es verdaderamente preciso, el resultado va a ser como

, puesto que requerimos un contenedor.

Pero tienes que rememorar que es casi preciso emplear las etiquetas html que contamos a nuestra predisposición si deseamos llevar a cabo una web real.

Google plus tiene un valor positivo y es con la capacidad de comprender mejor todas y cada una aquellas páginas que usan apropiadamente las etiquetas que ya están. En consecuencia, es preferible utilizar la etiqueta html pertinente para hacer el menú de navegación:

La etiqueta

Si nos ajustamos a la definición del libro de la etiqueta

Es esencial utilizar la etiqueta

Pero a fin de que ande en todos y cada uno de los navegadores, la mejor solución es emplear listas.

Crea una lista HTML

Debo decirte que no es oro todo cuanto relumbra, y el último código que te mostré no se utiliza para todos y cada uno de los navegadores.

Entonces, la solución mucho más usada para lograr que nuestro menú sea aparente (y bueno) en todos y cada uno de los navegadores y gadgets es:

Esencialmente, los distintos elementos son los que se enlazan para hacer una lista de dirección de Internet que deseamos para orientar en nuestro menú.

Las etiquetas

y

Para hacer una lista, empleamos la etiqueta

Cada elemento de la lista se crea con la etiqueta

.

Añadir links a la lista

Para añadir links a la lista debemos usar el elemento , que se refiere a los links que producimos: a dónde deseamos que vayan y atributos relacionados.
- elemento1
- elemento1
- elemento1
- elemento1
- elemento1
La etiqueta

La La etiqueta tiene el atributo href, donde debemos poner la dirección de Internet que deseamos en el momento en que se clickea en el link.

Además de esto, se tienen la posibilidad de añadir otros atributos atrayentes:
- rel. Con el atributo rel=nofollow tenemos la posibilidad de modificar el link a fin de que no trasfiera PageRank a otra página.
- gol. El atributo objetivo=_blank nos deja abrir el link en una exclusiva pestañita. Esto en un inicio no es atrayente en un menú, pero puede ser útil para otros casos de empleo.
Estilos para el menú HTML horizontal

Hasta el paso previo, disponemos la utilidad de menú listo, pero de momento no es horizontal, en verdad es únicamente una lista vertical .

A fin de que el menú se vea como un menú horizontal habitual, requerimos ofrecerle un grupo de estilos. Lo más esencial a ver es lo que deseamos es lo siguiente:
1. Remover los puntos que representan el comienzo de cada elemento de la lista. Para realizar esto, en el elemento
2. Distribúyalo horizontalmente. Este paso se puede realizar de distintas formas. De las mejores opciones, y adaptable con independencia de la proporción de elementos en el menú, es emplear el atributo display:flex en el elemento
  - . Para eludir que los últimos elementos del menú se muevan a la próxima fila, debemos integrar el atributo de justificar el contenido: centrar en el elemento
  - Utilizar otros estilos: colores, fuentes, borde y relleno.
¡Hagamos el menú horizontal HTML Responsive!

Así como está, disponemos un menú a la perfección válido para escritorio o tablet.

En este momento, si deseamos amoldarlo a teléfonos móviles inteligentes, requerimos utilizar consultas de medios. Si jamás antes ha empleado cuestiones de los medios, no se preocupe. En un caso así, lo único que debemos llevar a cabo es concretar desde el tamaño de pantalla que deseamos que se muestre el icono del menú y llevarlo a cabo desplegable.

Además de esto, necesitaremos una fuente o imagen para otorgar nuestra descarga. Para este caso de ejemplo, voy a utilizar el menú icononavitagion de este cibersitio. En nuestra web detallan de qué forma debemos emplear la imagen en nuestro código, de esta manera que iremos a ello.

Primero: enseñar el icono en HTML

La primera cosa que debemos realizar es hacer un contenedor en el que iremos a integrar el icono. Para esto usaremos la etiqueta
y dentro agregaremos lo que nos solicita añadir a la página web donde descargamos el icono: .

Con esta última etiqueta, tenemos la posibilidad de enseñar el icono pero no va a pasar nada si hacemos click. Por consiguiente, debemos transformarlo en un link.

En un caso así, el link no nos va a llevar a ningún lado, solo activará el menú desplegable en la página de hoy, con lo que la dirección del link va a ser ‘#’. Así mismo vamos a tener algo de este modo en nuestro HTML:

Segundo: modificar CSS

En el momento en que disponemos la composición HTML lista, debemos ofrecerle forma con CSS. Primero debemos esconder el icono del menú para pantallas enormes, puesto que en este formato observaremos todo el menú. Entonces debemos modificar todo para: esconder el menú en vista móvil inteligente y ponerlo en retrato.

Primero: Esconder el icono de menú en la visión de escritorio

Para esto, usaremos la clase que especifiqué en el ejemplo previo: menú. Entonces, en nuestro CSS vamos a tener:

.menu

Segundo: Esconder el menú en la visión de móvil inteligente y enseñar el icono de menú

En el momento en que la pantalla cambia de vista de escritorio a vista de móvil tienen que acontecer 2 cosas al tiempo:
- El icono del menú a fin de que se muestre y se ubique en tu ubicación.
- El menú debería mudar de orientación (de paisaje a retrato) y esconderlo hasta el momento en que presionemos el botón de menú.
Para esto deberemos valernos de consultas de los medios. Con las consultas de medios tenemos la posibilidad de escoger una condición en el CSS para concretar cuándo deseamos que se activen los estilos.

En este caso específico deseamos que en el momento en que la pantalla sea del tamaño de un dispositivo móvil inteligente tengamos la posibilidad modificar los 2 puntos que comentaba hace un instante. Para realizar esto, empleamos el interrogante de medios:

@media screen and (max-width: 800px) and (min-width: 100px)

En un caso así, especifiqué que los estilos se aplican a las pantallas que tiene un máximo de 800 px de ancho y un mínimo de cien px de ancho. Generalmente, las medidas comunes en los distintos gadgets están en los próximos rangos:
- 320px – 480px ➢ Gadgets móviles inteligentes
- 481px – 768px ➢ tixagb_14)
- (,, TixAg_14) (,, TixAg_14) ( 1024px ➢ Laptops y pantallas pequeñas
- 1025px – 1200px ➢ Escritorios habituales, monitores
- 1201px y mucho más ➢ Televisores o pantallas plus largas que de usted ( bg_1) Para llevarlo a cabo mucho más personalizado para un empleo concreto, puedes detallar medidas concretas que funcionen bien para el dispositivo en el que se utilizará. Si no, puedes utilizar las medidas que te he dado como guía
  
  En el interrogante de medios debemos detallar los puntos nombrados previamente: que el ícono del menú sea aparente y que los elementos del menú estén ocultos y puestos verticalmente
  
  Para esto agregaremos los próximos estilos:
  
  Pantalla @media y (ancho máximo: 800 px) y (ancho mínimo: cien px)
  
  Deseamos que el elemento .menu sea aparente, conque implementamos el estilo display:block. Además de esto, deseamos que el menú de navegación (nav) tenga la predisposición frecuente de los menús móviles inteligentes: ocupa media pantalla y toda la altura, con una situación fija PERO en un inicio movida cien% hacia la izquierda.
  
  La razón por la cual lo escondemos moviéndolo hacia la izquierda es para hacer el efecto de movimiento en el momento en que presionamos el ícono del menú, puesto que lo moveremos hacia la derecha, hasta el momento en que se vea el menú terminado.
  
  Tercero: modificar JavaScript para conducir el accionar
  
  Por último, debemos conducir la lógica en el momento en que presionamos el ícono de menú en el móvil, el menú se desplaza y tenemos la posibilidad de verlo.
  
  Para realizar esto, necesitaremos redactar un pequeño código en JavaScript. Específicamente, usaremos las próximas líneas, que voy a explicar ahora:
  
  $(document).ready(main); contador de cambiantes = 0; function main();
  
  Primero, creamos la función main() y empleamos una variable de contador como asistente. La iniciativa es:
  - Si contador = 1 ➢ El botón de menú se presiona y debe mudar para enseñar el estado.
  - Si contador = 0 ➢ Se presiona el botón del menú y hay que mudar al estado oculto
  Para llevar un registro del valor del contador utilizamos la operación módulo ( %) que se utiliza para devolver el resto de una división, o el semejante de contar números en el módulo concretado. Específicamente, la operación x % 2 provoca que el valor final sea 1 si es impar y 0 si es par.
  
  Esencialmente empleamos la variable contador como un estado correcto por 0 para esconder el menú y 1 para llevarlo a cabo aparente.
  
  Para encender la función se detalla que debemos llevar a cabo clic en el elemento del menú ($(‘.menu’).clic(function() ….. )), eso es lo que le solicitamos al icono . Entonces, en el momento en que clickea, la primera cosa que pasa es que se establece el estado del contador (según las pautas precedentes) y después procede a contrastar el valor de ese contador utilizando las afirmaciones if it.
  
  Caso de que el valor del contador sea 1 (o sea, pulsamos el icono del menú y deseamos mostrarlo) debemos desplazar el menú a la situación 0 (rememorar que se encontraba en la situación -cien% ) y hazlo con apariencia de animación.
  
  Caso de que el valor del contador sea 0, quiere decir que deseamos esconder el menú, con lo que debemos animar el movimiento de la izquierda: -cien% de situación, como se encontraba al comienzo.
  
  Con esto, vamos a tener listo el accionar de nuestro menú responsivo horizontal con HTML, CSS y JavaScript.
  
  Resultado final
  
  En nuestro fichero HTML, usando el icononavitagion-menu de esta web, deberemos precisar el menú de la próxima forma:
  - elemento1
  - elemento1
  - elemento1
  - elemento1
  - elemento1
  Nuestro fichero CSS debe contener los próximos estilos:
  
  . menú Pantalla @media y (ancho máximo: 800 px) y (ancho mínimo: cien px)
  
  Y, al final, deberíamos tener un fichero JavaScript con las próximas líneas:
  
  $(document).ready(main); contador de cambiantes = 0; function main(); Si quiere ver mucho más manuales de programación web, aquí está la página del curso Django gratis
  
  Cuestiones usuales
  
  ▶︎ Fallo de referencia no detectado Fallo: $ no está definido al procurar nuestro fichero empleando javascript
  
  Entre las líneas
  
  y su fichero HTML, introduzca:
  
  ▶︎ Para configure el ícono adecuadamente
  
  precisa bajar el fichero icofont.zip de este página web y también insertarlo en el
  
  Además de esto, para utilizar el ícono, precisa emplear las ordenes web, en un caso así:

Pero debes cita anterior ten en cuenta que empleas l apropiadamente Las etiquetas html que tenemos a nuestra disposición son prácticamente indispensables si deseamos llevar a cabo una web real.

¿Qué debo poner en mi barra del costado?

Ten en cuenta que tu barra del costado puede guiarte a ofrecer visibilidad o llamar la atención sobre algún contenido, entonces, ¿qué puedo integrar en la barra del costado? Ya que muy simple, todo cuanto quieras llamar la atención.

Aquí hay ciertas ideas sobre elementos que podrían ser atrayentes para integrar:

Puede utilizar el diseño de cuadrícula CSS para hacer un factor de barra del costado: configure el elemento de cuadrícula izquierdo o derecho para prolongar hasta la parte de abajo de la cuadrícula (o lo bajo que desees llevarlo a cabo) y obtendrás algo como esto:

Aquí está el código HTML y CSS para el ejemplo previo:

Si quieres ver otros artículos similares a Tutorial de Cómo Crear una Barra Lateral en HTML Fácilmente puedes visitar la categoría HTML o revisar los siguientes artículos