Milligram: Barre de navigation dans le cadre du milligramme ?

Créé le 1 févr. 2016  ·  26Commentaires  ·  Source: milligram/milligram

J'adore le look de ce cadre, excellent travail!

En l'essayant, j'ai réalisé que la barre de navigation qui fait partie de la page d'accueil ne fait pas réellement partie du milligramme. En fait, certaines choses de la page d'accueil ne font pas partie du milligramme. Il m'a été facile de l'ajouter à mon projet, mais est-il prévu de l'intégrer dans le cadre du milligramme ?

Hacktoberfest new feature

Commentaire le plus utile

CSS uniquement Milligram NavBar

La source
Exemple
Licence MIT

Dépend de la bibliothèque de base.

Tous les 26 commentaires

L'idée est géniale mais mon intention est de garder le Milligram aussi léger que possible, en prenant en charge le minimum de fonctionnalités nécessaires pour initialiser un projet. BTW, ce que vous proposez serait un élément très spécifique. Je ferme votre demande et apprécie leurs efforts pour améliorer ce projet.

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

Salut @alexjj @abouthiroppy

En fait, mon intention est de garder Milligram aussi léger que possible, en prenant en charge le minimum de fonctionnalités nécessaires pour initialiser un projet.

Vous m'avez aidé à avoir une bonne idée! Je vais créer un référentiel avec des composants produits avec Milligram. Cela devrait aider beaucoup de gens, un endroit où ils peuvent plus facilement trouver quelque chose qui peut les aider dans la vie de tous les jours.

http://codepen.io/milligram/

Ne semble pas être bien connu ou utilisé, mais j'aimerais aussi une gamme de barres de navigation

Idem ici, la barre de navigation et les menus sont les fonctionnalités minimales nécessaires à un projet, n'est-ce pas ?

Heya, je cherche un framework qui peut remplacer le bootstrap pour moi et milligram est un sérieux concurrent.

Je pourrais vraiment faire d'autres exemples car je ne connais pas encore le framework mais le lien codepen que vous avez posé ne fonctionne pas. As-tu un autre lien ?

Merci!

Vous me donnez de bonnes idées. ??

Un résultat sur les idées de la barre de navigation ?

Milligram est plutôt bon, mais j'aimerais vraiment voir plus d'options de navigation, en particulier pour une utilisation avec les versions Sage 9 (Wordpress), qui nécessitent généralement un marcheur de navigation à moins que quelqu'un puisse me corriger à ce sujet ?, Merci

Le lien de @cjpatoilo semble mort. Le nouveau lien est https://codepen.io/milligramcss/

(De plus, je serais certainement pour l'ajout d'une barre de navigation à Milligram. Je ne suis pas d'accord avec d'autres qui disent que c'est une chose étroite que les gens veulent, 90% des sites Web ont une barre de navigation.)

la barre de navigation serait super

Je voudrais ajouter que le fait que le site github.io ait une barre de navigation m'a amené à croire que le package lui-même avait une barre de navigation. c'est assez malhonnête.

Je ne suis pas d'accord. Le document des pages n'indique pas qu'une barre de navigation est un composant essentiel où que ce soit. Le fait que la page ait une barre de navigation ne signifie pas qu'elle fait partie du framework. Ce n'est pas fallacieux, vous avez simplement fait une fausse hypothèse.

Oui, je pensais que le paquet avait une barre de navigation jusqu'à ce que je commence à lire et découvre que ce n'est pas le cas. Cela m'a honnêtement surpris - mon attente en regardant les packages d'interface utilisateur est qu'ils n'utilisent généralement que les outils qu'ils fournissent. J'ai parcouru le CSS du site - simplement styliser la balise nav et ajouter un peu de style pour les liens de navigation ne semble pas ajouter trop de frais généraux?

^^ tout cela étant dit... quelqu'un a-t-il mis en place une barre de navigation assez simple avec un logo et des éléments de menu qui se décompose de manière réactive en un menu de type hamburger sur mobile, par exemple ?
EDIT : ajoutant ici que JS n'est pas préféré... SURTOUT jquery. Nan. CSS seulement fortement préféré. la triche autorisée serait une petite quantité de vanille JS mais plutôt pas de JS du tout.

^^ tout cela étant dit... quelqu'un a-t-il mis en place une barre de navigation assez simple avec un logo et des éléments de menu qui se décompose de manière réactive en un menu de type hamburger sur mobile, par exemple ?

Je m'y essaie maintenant en utilisant l'exemple inclus dans le milligramme, en utilisant https://github.com/shuedna/Milligram-baseSite-withMenu comme référence. Moi aussi, je suis très inexpérimenté dans ce domaine, donc je ne réussirai peut-être pas.

Mais je suis d'accord avec ci-dessus; une navigation réactive est assez fondamentale.

mise à jour de la demande précédente... CSS uniquement, pas de JS, surtout pas de jQuery.

CSS uniquement Milligram NavBar

La source
Exemple
Licence MIT

Dépend de la bibliothèque de base.

Bon travail @popey456963. La seule chose est que cela ne se résume pas à un menu de style hamburger.
J'ai raté l'exigence de pas de JS/jquery, ou de vanille JS. De toute façon, je n'ai pas eu beaucoup de succès de mon côté.. encore.

J'ai interrompu ma recherche d'une navigation css uniquement qui se réduit à un menu de hamburgers pour l'instant en raison du temps; J'ai simplement remplacé le texte par des icônes de police géniales qui sont plus compactes et s'affichent bien lorsqu'elles sont réduites. De plus, pour l'élément 'navigation-item', j'ai diminué la marge gauche à 1,5 rem.

Une fois ce projet terminé, je réessayerai... si quelqu'un d'autre ne l'a pas déjà terminé.

Masquez également la barre de navigation lors du défilement vers le haut :
Pour la classe de navigation, ajoutez : transition : top 0.3s ;
Ajouter id="barre de navigation"
JS en bas :

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;
}

Pas de Jquery ou d'autres deps requis

Je pense que normalement vous voulez masquer la barre de navigation lors du défilement vers le bas, pas vers le haut ?

Le code est pour faire défiler vers le bas. Désolé, je me suis mal exprimé

Suivi de la navigation responsive css uniquement... celle-ci est simple et fonctionne très bien :
https://codepen.io/chuckreynolds/pen/ROaeXv

Suivi de la navigation responsive css uniquement... celle-ci est simple et fonctionne très bien :
codepen.io/chuckreynolds/pen/ROaeXv

Merci pour le lien. Mais comment puis-je mettre cela ensemble? Le contenu de mon conteneur défile « derrière » l'en-tête. Il devrait y avoir une sorte de rembourrage.

Juste un commentaire.

S'il existe des éléments de barre de navigation prédéfinis, la création de l'interface utilisateur sera assez rapide.
Cependant, ne pensez-vous pas que la barre de navigation est quelque chose d'inutile ? Je préfère fournir une barre de navigation comme le style Semantic-UI (en utilisant le menu pour fournir une barre de navigation).

Je ne pense pas que too much est bon. :)

Les gars, merci d'avoir aidé @. Pour l'instant, je vais clore ce sujet.
Si quelqu'un a besoin d'aide, n'hésitez pas à rouvrir ou à en ouvrir un nouveau !

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

roryprimrose picture roryprimrose  ·  7Commentaires

equinusocio picture equinusocio  ·  14Commentaires

swalberg picture swalberg  ·  6Commentaires

neronmoon picture neronmoon  ·  4Commentaires

westtrade picture westtrade  ·  10Commentaires