Milligram: 导航条作为毫克的一部分？

创建于 2016-02-01 · 26评论 · 资料来源: milligram/milligram

喜欢这个框架的外观，干得好！

试用后，我意识到作为主页一部分的导航栏实际上并不是毫克的一部分。实际上，主页上的一些东西不是毫克的一部分。我很容易将它添加到我的项目中，但是否有计划将其作为毫克的一部分？

Hacktoberfest new feature

资料来源

alexjj

👍17 🎉2 👎2

最有用的评论

仅 CSS 毫克导航栏

来源
 例子
 麻省理工学院执照

取决于基础库。

popey456963 于 2019-01-29

👍7 ❤3 🚀2 🎉2 👎1

所有26条评论

这个想法很棒，但我的目的是让 Milligram 尽可能轻，支持初始化项目所需的最小功能。顺便说一句，您提议的将是一个非常具体的组件。我正在关闭您的请求，并感谢他们为改进此项目所做的努力。

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

hiroppy 于 2016-02-01

嗨@alexjj @abouthiroppy

事实上，我的目的是让 Milligram 尽可能轻，支持初始化项目所需的最小功能。

你帮我想到了一个好主意！我将使用 Milligram 生成的组件创建一个存储库。这应该可以帮助很多人，他们可以在一个地方更轻松地找到可以在日常生活中提供帮助的东西。

http://codepen.io/milligram/

cjpatoilo 于 2016-02-03

👍9

似乎并不为人所知或使用，但我也想要一系列导航栏

EmilMoe 于 2016-05-17

同样，导航栏和菜单是项目所需的最低限度的功能，不是吗？

Kcchouette 于 2016-10-01

嘿，我正在寻找一个可以代替引导程序的框架，而毫克是一个重要的竞争者。

我真的可以做更多的例子，因为我还不熟悉这个框架，但是你提出的 codepen 链接不起作用。你有另一个链接吗？

谢谢！

gwleuverink 于 2017-06-27

你给了我很好的想法。 😍

cjpatoilo 于 2017-06-28

😄1

导航栏想法的任何结果？

jrondorf 于 2017-09-24

Milligram 相当不错，但我绝对希望看到更多导航选项，尤其是与 Sage 9 (Wordpress) 版本一起使用时，通常需要一个导航步行器，除非有人可以纠正我？，谢谢

minimallinux 于 2018-01-21

@cjpatoilo的链接似乎已失效。新链接是https://codepen.io/milligramcss/

（另外，我肯定会为 Milligram 添加导航栏。我不同意其他人所说的人们想要的东西很窄，90% 的网站都有导航栏。）

popey456963 于 2018-02-18

👍4

导航栏会很棒

gyasikn 于 2018-04-06

我想补充一点，github.io 站点有一个导航栏这一事实让我相信包本身有一个导航栏。这很不诚实。

mhedrick 于 2018-07-27

我不同意。页面文档没有说明导航栏是任何地方的核心组件。页面具有导航栏的事实并不意味着它是框架的一部分。这不是虚伪，你只是做了一个错误的假设。

gwleuverink 于 2018-07-27

是的，我以为这个包有一个导航栏，直到我开始阅读并发现它没有。老实说，这让我感到惊讶 - 我对 ui 包的期望是它们通常只使用它们提供的工具。我浏览了网站 css - 简单地设置nav标签的样式并为导航链接添加一些样式似乎不会增加太多开销？

mhedrick 于 2018-08-03

👍2

^^ 说了这么多……有没有人实现了一个相当简单的导航栏，带有徽标和菜单项，例如在移动设备上响应地分解为汉堡式菜单？
编辑：在这里添加 JS 不是首选......特别是 jquery。不。 CSS 只是非常受欢迎。允许的作弊将是少量的香草 JS，但根本没有任何 JS。

chuckreynolds 于 2019-01-09

👍3 👀1 🎉1

^^ 说了这么多……有没有人实现了一个相当简单的导航栏，带有徽标和菜单项，例如在移动设备上响应地分解为汉堡式菜单？

我现在正在尝试使用毫克中包含的示例，使用https://github.com/shuedna/Milligram-baseSite-withMenu作为参考。我对此也非常缺乏经验，因此可能不会成功。

但我同意上述观点；响应式导航是非常基础的。

yebo29 于 2019-01-28

更新了之前的请求...只有 CSS，没有 JS，尤其是没有 jQuery。

chuckreynolds 于 2019-01-28

仅 CSS 毫克导航栏

来源
 例子
 麻省理工学院执照

取决于基础库。

popey456963 于 2019-01-29

👍7 ❤3 🚀2 🎉2 👎1

干得好@popey456963。唯一的问题是它没有分解为汉堡包式菜单。
我错过了没有 JS/jquery 或 vanilla JS 的要求。无论哪种方式，我最终都没有取得太大的成功......

yebo29 于 2019-01-30

👍2

由于时间原因，我暂时停止了对仅折叠为汉堡菜单的 css 导航的搜索；我只是用字体很棒的图标替换了文本，这些图标在缩小时更紧凑并且显示效果很好。另外，对于元素“navigation-item”，我将 margin-left 减少到 1.5rem。

一旦我完成了这个项目，我会再试一次……如果其他人还没有完成它。

yebo29 于 2019-01-31

另外，在向上滚动时隐藏导航栏：
对于导航类添加：transition: top 0.3s；
添加 id="导航栏"
底部的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 或其他 deps

yebo29 于 2019-02-01

我认为通常您想在向下滚动而不是向上滚动时隐藏导航栏？

popey456963 于 2019-03-25

该代码用于向下滚动。对不起，我说错了

yebo29 于 2019-03-26

👍1

跟进 css-only 响应式导航......这个很简单，效果很好：
https://codepen.io/chuckreynolds/pen/ROaeXv

chuckreynolds 于 2019-04-05

跟进 css-only 响应式导航......这个很简单，效果很好：
codepen.io/chuckreynolds/pen/ROaeXv

谢谢你的链接。但是我怎么把它放在一起呢？我的容器的内容在标题“后面”滚动。应该有某种填充。

hbast 于 2019-05-01

只是一个评论。

如果有预先构建的导航栏东西，构建 UI 会更快。
但是，你们不觉得导航栏没用吗？我更喜欢提供像 Semantic-UI 风格的导航栏（使用菜单提供导航栏）。

我认为不是too much是好的。 :)

Seia-Soto 于 2019-08-09

伙计们，谢谢你帮助@。现在，我将关闭这个问题。
如果有人需要帮助，请随时重新打开或打开一个新的！

cjpatoilo 于 2020-05-19

此页面是否有帮助？

0 / 5 - 0 等级

Milligram: 导航条作为毫克的一部分？

最有用的评论

所有26条评论

相关问题