Milligram: 밀리그램의 일부로 탐색 모음?

아이디어는 훌륭하지만 프로젝트를 초기화하는 데 필요한 최소한의 기능을 지원하면서 Milligram을 가능한 한 가볍게 유지하려는 의도입니다. BTW, 당신이 제안하는 것은 매우 구체적인 구성 요소입니다. 귀하의 요청을 종료하고 이 프로젝트를 개선하기 위한 그들의 노력에 감사드립니다.

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

안녕하세요 @alexjj @abouthiroppy

사실 내 의도는 Milligram을 가능한 한 가볍게 유지하여 프로젝트를 초기화하는 데 필요한 최소한의 기능을 지원하는 것입니다.

좋은 아이디어를 낼 수 있도록 도와주셨어요! Milligram으로 제작한 컴포넌트로 레파지토리를 생성하겠습니다. 이것은 많은 사람들이 일상 생활에서 도움이 될 수 있는 것을 더 쉽게 찾을 수 있는 곳에서 도움이 될 것입니다.

http://codepen.io/밀리그램/

잘 알려지지 않았거나 사용되지 않은 것 같지만 다양한 탐색 모음도 원합니다.

여기도 마찬가지로 navbar와 메뉴는 프로젝트에 필요한 최소한의 기능이죠?

이야, 부트스트랩을 대체할 수 있는 프레임워크를 찾고 있는데 밀리그램은 심각한 경쟁자입니다.

아직 프레임워크에 익숙하지 않기 때문에 몇 가지 더 많은 예제를 수행할 수 있지만 제시한 codepen 링크가 작동하지 않습니다. 다른 링크가 있습니까?

감사 해요!

당신은 나에게 좋은 아이디어를주고 있습니다. 😍

navbar 아이디어에 대한 결과가 있습니까?

Milligram은 꽤 좋지만 특히 Sage 9(Wordpress) 빌드와 함께 사용하는 경우 더 많은 Nav 옵션을 보고 싶습니다. 누군가 나를 수정할 수 없는 한 일반적으로 탐색 워커가 필요합니까?, 감사합니다.

@cjpatoilo 의 링크가 죽은 것 같습니다. 새 링크는 https://codepen.io/milligramcss/입니다.

(게다가 나는 Milligram에 navbar를 추가하는 것에 찬성할 것입니다. 나는 다른 사람들이 원하는 것이 좁다는 말에 동의하지 않습니다. 웹사이트의 90%에 navbar가 있습니다.)

탐색 모음이 좋을 것입니다

github.io 사이트에 navbar가 있다는 사실이 패키지 자체에 navbar가 있다고 믿게 만들었다고 덧붙이고 싶습니다. 꽤 불합리합니다.

나는 동의하지 않는다. 페이지 문서에는 navbar가 어디에서나 핵심 구성 요소라고 명시되어 있지 않습니다. 페이지에 탐색 모음이 있다는 사실이 프레임워크의 일부라는 의미는 아닙니다. 그것은 사실이 아닙니다. 단순히 잘못된 가정을 한 것입니다.

예, 읽기 시작하기 전까지 패키지에 탐색 모음이 있다고 생각하고 탐색 모음이 없다는 것을 알았습니다. 솔직히 놀랐습니다. ui 패키지를 볼 때 내 기대는 일반적으로 그들이 제공하는 도구만 사용한다는 것입니다. 나는 사이트 CSS를 살펴보았다 - 단순히 nav 태그의 스타일을 지정하고 탐색 링크에 대한 스타일을 추가하는 것이 너무 많은 오버헤드를 추가하는 것 같지 않습니까?

^^ 그 모든 말이... 혹시 모바일에서 반응형으로 햄버거 메뉴로 분해되는 메뉴 항목을 예로 들자면 로고와 메뉴 항목이 있는 상당히 간단한 탐색 모음을 구현한 사람이 있습니까?
편집 : 여기에 JS가 선호되지 않는다는 것을 추가하십시오 ... 특히 jquery. 아니요. CSS가 많이 선호됩니다. 허용되는 치트는 소량의 바닐라 JS이지만 JS가 전혀 없습니다.

^^ 그 모든 말이... 혹시 모바일에서 반응형으로 햄버거 메뉴로 분해되는 메뉴 항목을 예로 들자면 로고와 메뉴 항목이 있는 상당히 간단한 탐색 모음을 구현한 사람이 있습니까?

https://github.com/shuedna/Milligram-baseSite-withMenu 를 참조로 사용하여 milligram에 포함된 예제를 사용하여 이제 손을 내밀고 있습니다. 저도 경험이 부족해서 성공하지 못할 수도 있습니다.

그러나 나는 위에 동의합니다. 반응형 탐색은 매우 기초적입니다.

업데이트된 이전 요청... CSS만, JS 없음, 특히 jQuery 없음.

CSS 전용 밀리그램 NavBar

원천
예시
MIT 라이선스

기본 라이브러리에 따라 다릅니다.

잘했어 @popey456963. 유일한 것은 햄버거 스타일 메뉴로 분해되지 않는다는 것입니다.
JS/jquery 또는 바닐라 JS가 없다는 요구 사항을 놓쳤습니다. 어느 쪽이든 나는 내 끝에서 많은 성공을 거두지 못했습니다. 아직.

시간 관계상 당분간 햄버거 메뉴로 축소되는 CSS 전용 탐색 검색을 중단했습니다. 나는 단순히 텍스트를 더 작고 축소했을 때 멋지게 표시되는 멋진 글꼴로 대체했습니다. 또한 'navigation-item' 요소의 경우 margin-left를 1.5rem으로 줄였습니다.

이 프로젝트를 완료하면 다른 사람이 이미 완료하지 않은 경우 다시 시도할 것입니다.

또한 위로 스크롤할 때 탐색 모음을 숨깁니다.
탐색 클래스 추가: transition: top 0.3s;
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 또는 기타 deps가 필요하지 않습니다.

일반적으로 위로 스크롤하지 않고 아래로 스크롤할 때 탐색 모음을 숨기고 싶습니까?

코드는 아래로 스크롤하기 위한 것입니다. 미안, 내가 말을 잘못했어

CSS 전용 반응형 탐색에 대한 후속 조치... 이것은 간단하고 훌륭하게 작동합니다.
https://codepen.io/chuckreynolds/pen/ROaeXv

CSS 전용 반응형 탐색에 대한 후속 조치... 이것은 간단하고 훌륭하게 작동합니다.
codepen.io/chuckreynolds/pen/ROaeXv

링크 주셔서 감사합니다. 그런데 그걸 어떻게 합치죠? 내 컨테이너의 내용이 헤더 '뒤에서' 스크롤됩니다. 일종의 패딩이 있어야 합니다.

그냥 댓글입니다.

미리 빌드된 navbar 항목이 있는 경우 UI 빌드가 훨씬 빨라집니다.
그런데 여러분, navbar가 쓸모가 없다고 생각하지 않습니까? 나는 Semantic-UI 스타일(메뉴를 사용하여 navbar 제공)과 같은 navbar를 제공하는 것을 선호합니다.

나는 too much 가 좋지 않다고 생각합니다. :)

여러분 @ 도와주셔서 감사합니다. 지금은 이 문제를 닫겠습니다.
누군가 도움이 필요하면 언제든지 다시 열거나 새로 열 수 있습니다!