Milligram: ミリグラムの一部としてのナビゲーションバー？

アイデアは素晴らしいですが、私の意図は、プロジェクトを初期化するために必要な最小限の機能をサポートして、ミリグラムをできるだけ軽く保つことです。 ところで、あなたが提案しているのは非常に具体的なコンポーネントです。 リクエストを締めくくり、このプロジェクトを改善するための彼らの努力に感謝します。

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

こんにちは@ alexjj @ abouthiroppy

実際、私の意図は、ミリグラムを可能な限り軽量に保ち、プロジェクトの初期化に必要な最小限の機能をサポートすることです。

あなたは私が素晴らしいアイデアを持っているのを手伝ってくれました！ Milligramで作成されたコンポーネントでリポジトリを作成します。 これは多くの人々を助けるはずであり、彼らが日常生活でそれを助けることができる何かをより簡単に見つけることができる場所です。

http://codepen.io/milligram/

あまり知られていないか、使用されていないようですが、さまざまなナビゲーションバーも欲しいです

ここでも同じですが、ナビゲーションバーとメニューはプロジェクトに必要な最小限の機能ですよね。

やあ、私は私のためにブートストラップを置き換えることができるフレームワークを探しています、そしてミリグラムは真剣な競争相手です。

私はまだフレームワークに精通していないので、さらにいくつかの例で実際に行うことができますが、あなたが提起したcodepenリンクは機能しません。 別のリンクはありますか？

ありがとう！

あなたは私に素晴らしいアイデアを与えています。 😍

ナビゲーションバーのアイデアに関する結果はありますか？

ミリグラムはかなり良いですが、特に誰かが私を修正できない限り、通常はナビゲーションウォーカーが必要なSage 9（Wordpress）ビルドで使用するために、もっと多くのナビゲーションオプションを見たいと思いますか？、ありがとう

@cjpatoiloのリンクがhttps://codepen.io/milligramcss/です

（さらに、ミリグラムにナビゲーションバーを追加することは間違いありません。人々が望むのは狭いことであり、Webサイトの90％にナビゲーションバーがあると言う人には同意しません。）

ナビゲーションバーは素晴らしいでしょう

github.ioサイトにナビゲーションバーがあるという事実から、パッケージ自体にナビゲーションバーがあると信じさせられたことを付け加えたいと思います。 それはかなり不誠実です。

同意しません。 ページドキュメントには、ナビゲーションバーがコアコンポーネントであるとは記載されていません。 ページにナビゲーションバーがあるという事実は、それがフレームワークの一部であることを意味するものではありません。 それは不誠実ではありません、あなたは単に間違った仮定をしました。

はい、読み始めるまでパッケージにはナビゲーションバーがあると思っていましたが、ナビゲーションバーがないことがわかりました。 正直なところ、私は驚きました。UIパッケージを見るときの私の期待は、通常、提供されているツールのみを使用することです。 私はサイトのcssを調べました- navタグをスタイリングし、ナビゲーションリンクにスタイリングを追加するだけでは、オーバーヘッドが多すぎるようには見えませんか？

^^そうは言っても...例としてモバイルでハンバーガータイプのメニューに反応して分解するロゴとメニュー項目を備えた非常に単純なナビゲーションバーを実装した人はいますか？
編集： JSは好ましくないことをここに追加しています...特にjquery。 いいえ。 CSSのみが強く推奨されます。 許容されるチートは少量のバニラJSですが、JSはまったくありません。

^^そうは言っても...例としてモバイルでハンバーガータイプのメニューに反応して分解するロゴとメニュー項目を備えた非常に単純なナビゲーションバーを実装した人はいますか？

https://github.com/shuedna/Milligram-baseSite-withMenuを参照として使用して、ミリグラムに含まれている例を使用して、これを試してみています。 私もこれに非常に不慣れなので、成功しないかもしれません。

しかし、私は上記に同意します。 レスポンシブナビゲーションはかなり基本的なものです。

以前のリクエストを更新しました... CSSのみ、JS、特にjQueryはありません。

CSSのみのミリグラムナビゲーションバー

ソース
例
MITライセンス

ベースライブラリによって異なります。

よくできました@ popey456963。 唯一のことは、それがハンバーガースタイルのメニューに分解されないということです。
JS / jquery、またはバニラJSがないという要件を見逃しました。 いずれにせよ、私は自分の側ではあまり成功していません。

時間の関係で今のところハンバーガーメニューに折りたたまれているCSSのみのナビゲーションの検索を停止しました。 テキストをフォントに置き換えただけです。よりコンパクトで、縮小すると見栄えのする素晴らしいアイコンです。 また、要素 'navigation-item'については、margin-leftを1.5remに減らしました。

このプロジェクトを完了したら、もう一度やり直します...他の誰かがまだ完了していない場合。

また、上にスクロールするとナビゲーションバーが非表示になります。
ナビゲーションクラスの場合、次を追加します。遷移：上位0.3秒。
id = "navbar"を追加します
下部のJS：

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

Jqueryやその他の部門は必要ありません

通常は、上にスクロールするのではなく、下にスクロールするときにナビゲーションバーを非表示にしたいと思いますか？

コードは下にスクロールするためのものです。 すみません、私は間違って話しました

cssのみのレスポンシブナビゲーションのフォローアップ...これはシンプルでうまく機能します：
https://codepen.io/chuckreynolds/pen/ROaeXv

cssのみのレスポンシブナビゲーションのフォローアップ...これはシンプルでうまく機能します：
codepen.io/chuckreynolds/pen/ROaeXv

リンクをありがとう。 しかし、どうすればそれをまとめることができますか？ コンテナのコンテンツは、ヘッダーの「後ろ」にスクロールします。 ある種のパディングがあるはずです。

ただのコメント。

ビルド済みのナビゲーションバーがある場合、UIのビルドは非常に高速になります。
しかし、ナビゲーションバーは役に立たないと思いませんか？ 私はSemantic-UIスタイルのようなナビゲーションバーを提供することを好みます（メニューを使用してナビゲーションバーを提供します）。

too muchは良くないと思います。 :)

みんな、@を助けてくれてありがとう。 今のところ、この問題を閉じます。
誰かが助けを必要とするならば、自由に再開するか、新しいものを開いてください！