Milligram: Barra de navegação como parte do miligrama?

A ideia é ótima, mas minha intenção é manter o Miligrama o mais leve possível, suportando o mínimo de recursos necessário para inicializar um projeto. BTW, o que você está propondo seria um componente muito específico. Estou encerrando sua solicitação e agradeço seus esforços para melhorar este projeto.

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

Olá @alexjj @abouthiroppy

Na verdade, minha intenção é manter o Miligrama o mais leve possível, suportando o mínimo de recursos necessário para inicializar um projeto.

Você me ajudou a ter uma ótima ideia! Vou criar um repositório com componentes produzidos com Milligram. Isso deve ajudar muitas pessoas, um lugar onde elas possam encontrar mais facilmente algo que pode ajudá-lo na vida cotidiana.

http://codepen.io/milligram/

Não parece ser muito conhecido ou usado, mas também gostaria de uma variedade de barras de navegação

Mesmo aqui, a barra de navegação e os menus são os recursos mínimos necessários para um projeto, não é?

Ei, estou procurando uma estrutura que possa substituir o bootstrap para mim e o miligrama é um candidato sério.

Eu realmente gostaria de mais alguns exemplos, já que não estou familiarizado com a estrutura ainda, mas o link de código que você colocou não funciona. Você tem outro link?

Obrigado!

Você está me dando grandes ideias. 😍

Algum resultado nas ideias do navbar?

Miligrama é muito bom, mas eu definitivamente gostaria de ver mais opções de navegação, especialmente para usar com as compilações do Sage 9 (Wordpress), que geralmente precisam de um andador de navegação, a menos que alguém possa me corrigir sobre isso ?, Obrigado

O link de @cjpatoilo parece morto. O novo link é https://codepen.io/milligramcss/

(Além disso, eu definitivamente gostaria de adicionar uma barra de navegação ao miligrama. Discordo de outros que dizem que é algo restrito para as pessoas quererem, 90% dos sites têm uma barra de navegação.)

barra de navegação seria ótimo

Gostaria de acrescentar que o fato de o site github.io ter um navbar me levou a acreditar que o próprio pacote tinha um navbar. é muito falso.

Discordo. O documento de páginas não afirma que uma barra de navegação é um componente central em qualquer lugar. O fato de a página ter uma barra de navegação não significa que ela faça parte do framework. Não é falso, você simplesmente fez uma suposição errada.

Sim, pensei que o pacote tinha uma barra de navegação até que comecei a ler e descobri que não. Honestamente, me surpreendeu - minha expectativa ao examinar os pacotes de interface do usuário é que eles geralmente usam apenas as ferramentas que fornecem. Eu olhei através do css do site - simplesmente estilizar a tag nav e adicionar algum estilo para links de navegação não parece que iria adicionar muita sobrecarga?

^^ Dito isso ... alguém implementou uma barra de navegação bastante simples com logotipo e itens de menu que se transformam em um menu do tipo hambúrguer no celular como exemplo?
EDIT: adicionando aqui que JS não é preferido ... ESPECIALMENTE jquery. não. CSS apenas fortemente preferido. o cheat permitido seria uma pequena quantidade de JS vanilla, mas não teria nenhum JS.

^^ Dito isso ... alguém implementou uma barra de navegação bastante simples com logotipo e itens de menu que se transformam em um menu do tipo hambúrguer no celular como exemplo?

Estou testando isso agora usando o exemplo incluído em miligrama, usando https://github.com/shuedna/Milligram-baseSite-withMenu como referência. Eu também sou muito inexperiente com isso, então posso não ter sucesso.

Mas eu concordo com o acima; um nav responsivo é bastante fundamental.

solicitação anterior atualizada ... CSS apenas, sem JS, especialmente sem jQuery.

NavBar miligrama somente CSS

Fonte
Exemplo
Licença MIT

Depende da biblioteca base.

Bom trabalho @ popey456963. A única coisa é que não se divide em um menu estilo hambúrguer.
Eu perdi o requisito de nenhum JS / jquery ou vanilla JS. De qualquer forma, não tive muito sucesso no meu lado ... ainda.

Eu parei minha busca por um nav somente em CSS que desmorona em um menu de hambúrguer por agora devido ao tempo; Simplesmente substituí o texto por ícones incríveis de fontes que são mais compactos e exibem bem quando reduzidos. Além disso, para o elemento 'item de navegação', diminuí a margem esquerda para 1,5 rem.

Assim que concluir este projeto, tentarei novamente ... se outra pessoa ainda não o tiver concluído.

Além disso, oculte a barra de navegação ao rolar para cima:
Para a classe de navegação, adicione: transição: top 0.3s;
Adicionar id = "navbar"
JS na 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;
}

Não é necessário Jquery ou outros departamentos

Acho que normalmente você deseja ocultar a barra de navegação ao rolar para baixo, e não rolar para cima?

O código é para rolar para baixo. Desculpe, eu falei mal

Acompanhando a navegação responsiva somente css ... este é simples e funciona muito bem:
https://codepen.io/chuckreynolds/pen/ROaeXv

Acompanhando a navegação responsiva somente css ... este é simples e funciona muito bem:
codepen.io/chuckreynolds/pen/ROaeXv

Obrigado pelo link. Mas como faço para juntar isso? O conteúdo do meu contêiner rola "atrás" do cabeçalho. Deve haver algum tipo de preenchimento.

Apenas um comentário.

Se houver itens pré-construídos na barra de navegação, a construção da IU será bem mais rápida.
Porém, vocês não acham que a barra de navegação é algo inútil? Eu prefiro fornecer navbar como o estilo Semantic-UI (usando o menu para fornecer navbar).

Acho que too much é bom. :)

Pessoal, obrigado por ajudar @. Por enquanto, encerrarei esta edição.
Se alguém precisar de ajuda fique à vontade para reabrir ou abrir um novo!