Milligram: ¿Barra de navegación como parte de miligramos?

La idea es genial, pero mi intención es mantener el miligramo lo más ligero posible, admitiendo la función mínima necesaria para inicializar un proyecto. Por cierto, lo que propones sería un componente muy específico. Cierro su solicitud y agradezco sus esfuerzos para mejorar este proyecto.

https://github.com/milligram/milligram/pull/46

Hola @alexjj @abouthiroppy

De hecho, mi intención es mantener Milligram lo más ligero posible, admitiendo la función mínima necesaria para inicializar un proyecto.

¡Me ayudaste a tener una gran idea! Crearé un repositorio con componentes producidos con Milligram. Esto debería ayudar a muchas personas, un lugar donde puedan encontrar más fácilmente algo que pueda ayudarles en la vida cotidiana.

http://codepen.io/milligram/

No parece ser muy conocido o utilizado, pero también me gustaría una variedad de barras de navegación.

Lo mismo aquí, la barra de navegación y los menús son la característica mínima necesaria para un proyecto, ¿no es así?

Oye, estoy buscando un marco que pueda reemplazar el bootstrap para mí y miligramo es un competidor serio.

Realmente podría hacer con algunos ejemplos más, ya que aún no estoy familiarizado con el marco, pero el enlace de codepen que planteó no funciona. ¿Tienes otro enlace?

¡Gracias!

Me estás dando grandes ideas. 😍

¿Algún resultado sobre las ideas de la barra de navegación?

Milligramo es bastante bueno, pero definitivamente me gustaría ver más opciones de navegación, especialmente para usar con compilaciones de Sage 9 (Wordpress), que generalmente necesitan un andador de navegación a menos que alguien pueda corregirme en eso, gracias.

El enlace de @cjpatoilo parece muerto. El nuevo enlace es https://codepen.io/milligramcss/

(Además, definitivamente estaría a favor de agregar una barra de navegación a Milligram. No estoy de acuerdo con otros que dicen que es algo limitado para la gente, el 90% de los sitios web tienen una barra de navegación).

barra de navegación sería genial

Me gustaría agregar que el hecho de que el sitio github.io tenga una barra de navegación me llevó a creer que el paquete en sí tenía una barra de navegación. es bastante falso.

Estoy en desacuerdo. El documento de las páginas no indica que una barra de navegación sea un componente central en cualquier lugar. El hecho de que la página tenga una barra de navegación no significa que sea parte del marco. No es falso, simplemente hizo una suposición incorrecta.

Sí, pensé que el paquete tenía una barra de navegación hasta que comencé a leer y descubrí que no. Honestamente, me sorprendió: mi expectativa al mirar los paquetes de interfaz de usuario es que generalmente solo usan las herramientas que brindan. Revisé el CSS del sitio: simplemente diseñar la etiqueta nav y agregar algunos estilos para los enlaces de navegación, ¿no parece que agregaría demasiada sobrecarga?

^^ todo lo dicho ... ¿alguien ha implementado una barra de navegación bastante simple con logotipo y elementos de menú que se descomponga de manera receptiva en un menú tipo hamburguesa en el dispositivo móvil como ejemplo?
EDITAR: agregando aquí que JS no es el preferido ... ESPECIALMENTE jquery. no. CSS solo es muy preferido. El truco permitido sería una pequeña cantidad de vainilla JS pero no tendría ningún JS en absoluto.

^^ todo lo dicho ... ¿alguien ha implementado una barra de navegación bastante simple con logotipo y elementos de menú que se descomponga de manera receptiva en un menú tipo hamburguesa en el dispositivo móvil como ejemplo?

Estoy probando eso ahora usando el ejemplo incluido en miligramos, usando https://github.com/shuedna/Milligram-baseSite-withMenu como referencia. Yo también soy muy inexperto con esto, por lo que es posible que no tenga éxito.

Pero estoy de acuerdo con lo anterior; una navegación receptiva es bastante fundamental.

solicitud anterior actualizada ... solo CSS, sin JS, especialmente sin jQuery.

CSS solo miligramos NavBar

Fuente
Ejemplo
Licencia MIT

Depende de la biblioteca base.

Buen trabajo @ popey456963. Lo único es que no se divide en un menú estilo hamburguesa.
No cumplí con el requisito de no JS / jquery o Vanilla JS. De cualquier manera, no he tenido mucho éxito por mi parte ... todavía.

Detuve mi búsqueda de un navegador de solo CSS que se colapsa en un menú de hamburguesas por ahora debido al tiempo; Simplemente reemplacé el texto con íconos de fuentes impresionantes que son más compactos y se muestran bien cuando se reducen. Además, para el elemento 'elemento de navegación', disminuí el margen izquierdo a 1.5rem.

Una vez que complete este proyecto, lo intentaré de nuevo ... si alguien más aún no lo completó.

Además, oculta la barra de navegación al desplazarte hacia arriba:
Para la clase de navegación agregue: transición: top 0.3s;
Agregar id = "navbar"
JS en la parte inferior:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

No se requiere Jquery u otros departamentos

Creo que normalmente desea ocultar la barra de navegación al desplazarse hacia abajo, no hacia arriba.

El código es para desplazarse hacia abajo. Lo siento, hablé mal

Siguiendo con la navegación receptiva solo css ... este es simple y funciona muy bien:
https://codepen.io/chuckreynolds/pen/ROaeXv

Siguiendo con la navegación receptiva solo css ... este es simple y funciona muy bien:
codepen.io/chuckreynolds/pen/ROaeXv

Gracias por el enlace. Pero, ¿cómo pongo eso junto? El contenido de mi contenedor se desplaza 'detrás' del encabezado. Debería haber algún tipo de relleno.

Solo un comentario.

Si hay elementos de la barra de navegación preconstruidos, la construcción de la interfaz de usuario será bastante más rápida.
Sin embargo, ¿no creen que la barra de navegación es algo inútil? Prefiero proporcionar una barra de navegación como el estilo Semantic-UI (usando el menú para proporcionar la barra de navegación).

Creo que no too much es bueno. :)

Chicos, gracias por ayudar @. Por ahora, cerraré este tema.
Si alguien necesita ayuda, ¡no dude en reabrir o abrir uno nuevo!