탐색 모음을 만드는 3가지 방법(CSS 그리드 레이아웃)
전체 텍스트 또는 Youtube(TL; DW)에서 내 코드를 보려면 다음과 같이 하십시오.
결실
값을 올리다
표기는 기본적으로
<header> 원소로main
// generates the navbar three times
// each with different version classes
// version-1, version-2 & version-3
- for (let i=0; i<3; i++)
header(class="version-" + (i+1))
.logo
i.fas.fa-feather-alt
nav
ul.nav
li
a(href="#")
i.far.fa-chart-bar
| Dashboard
li
a(href="#")
i.far.fa-edit
| Projects
li
a(href="#")
i.far.fa-envelope-open
| Posts
a.user(href="#")
i.far.fa-user
| Jane Doe
베이스, 배경 및 변수
먼저 배경 및 전경 색상과 여러 점에서 사용되는 변환 매개변수를 정의하는 몇 가지 기본 변수를 설정합니다.
:root {
--background-color: #2b2b2b;
--foreground-color: rgba(255, 255, 255, 0.7);
--transition: 250ms ease-out;
}
--color 변수가 각 버전마다 고유한 CSS 클래스의 범위에 정의된 이유입니다.header {
&.version-1 {
--color: #ba4aff;
}
&.version-2 {
--color: #008aff;
}
&.version-3 {
--color: #22d1d3;
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
main {
background:
linear-gradient(322deg,
#ba4aff, rgba(#ba4aff, 0) 70%),
linear-gradient(178deg,
#008aff, rgba(#008aff, 0) 70%),
linear-gradient(24deg,
#00ffc6, rgba(#00ffc6, 0) 35%);
}
수확대 격자 구성(외부 격자)
우리는 두 개의 끼워 넣은 격자 레이아웃을 사용할 것이다.
<header> 요소의 외부 요소는 내비게이션 표시줄의 전체적인 레이아웃을 제공하는 데만 사용되기 때문에 로고, 내비게이션 표시줄 및 사용자 메뉴의 위치를 설명하기 위해header {
display: grid;
gap: 0.5rem;
padding: 0.5rem;
width: 100%;
min-width: 750px;
border-radius: 0.5rem;
background: var(--background-color);
box-shadow: 2px 2px 8px 0px var(--background-color);
font-family: "Lato", sans-serif;
}
grid-template-areas의 값을 전환하거나 변경해야만 브라우저가 요소의 위치를 조정할 수 있고 표시의 순서는 중요하지 않기 때문입니다.header {
// logo (left), nav items (left), user menu (right)
&.version-1 {
grid-template-columns: min-content auto max-content;
grid-template-areas: "logo nav user";
> * {
place-self: start;
}
}
// logo (left), nav items (centered), user menu (right)
&.version-2 {
grid-template-columns: min-content auto max-content;
grid-template-areas: "logo nav user";
> * {
align-self: center;
}
.user {
justify-self: end;
}
.nav {
justify-content: center;
}
}
// user menu, nav items (centered), logo (right)
&.version-3 {
grid-template-columns: max-content min-content auto min-content;
grid-template-areas: "user nav . logo";
> * {
justify-self: end;
align-self: center;
}
}
}
grid-template-columns의 값을 주의하십시오.min-content은 주로 표지에 사용되는데, 왜냐하면 항상 가능한 한 공간을 적게 차지해야 하기 때문이다.max-content은 주로 사용자 메뉴에 사용됩니다. 두 단어가 있기 때문에 min-content단어는 줄 바꿈 문자를 생성합니다. 이런 상황에서 띠는 열이 최소화되기 때문입니다.max-content의 행위 방식은 내용의 공간을 최대화하지만 필요한 공간만 사용한다.우리의 예에서
auto은 그것이 남은 공간을 차지했다는 것을 의미한다. 이것이 바로 우리가 원하는 네비게이션 프로젝트이다.grid-template-areas에서 언급한 표지부를 네비게이션 표시줄의 각 부분에 분배하는 것이다. 이것이 바로 네비게이션 표시줄의 기본 구조를 설정하는 데 필요한 것이다.header {
.logo {
grid-area: logo;
}
.nav {
grid-area: nav;
}
.user {
grid-area: user;
}
}
네비게이션 격자 설정(내부 격자)
네비게이션 항목(
.nav)의 격자는 외부 격자 안의 끼워 넣은 격자 레이아웃으로 <header> 요소의 전체 레이아웃(마크, 네비게이션 항목, 사용자 메뉴)을 정의하는 데 사용된다.CSS 격자에 대한 자동 스트리밍 메커니즘을 사용합니다.이것은 정의열의 명확한 순서가 없지만 격자 용기(.nav)의 모든 직접 하위 요소는 자신의 열을 가지고 있다는 것을 의미한다.우리는 격자 레이아웃이 격자에 분배되지 않은 특정한 단원이나 단원 그룹의 요소를 어떻게 처리하는지 알려줄 수 있다.grid-auto-flow: column은 분배되지 않은 모든 요소에 새 열을 만드는 것을 알려 줍니다.row으로 설정하면 새 줄이 생성됩니다.grid-auto-columns은 격자 자동 생성의 열이 얼마나 큰지 알려준다. 이것은 우리의 예에서 매우 좋은 것이다. 왜냐하면 우리는 포장하지 않아도 내용에 적응할 수 있다는 것을 간단하게 알려줄 수 있기 때문이다.header {
.nav {
grid-area: nav;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 0.5rem;
place-self: center;
height: 100%;
list-style: none;
> li {
display: inline-block;
}
}
}
링크 및 아이콘 스타일
이제 좀 더 정교한 스타일링 디테일로 들어갈게요.제목 탐색 모음의 각 링크는 채워진 부분과 필렛이 있는 내용을 수직으로 가운데에 배치하는 유연한 상자입니다.
이 표지는 글씨체가 좋은 아이콘을 사용하기 때문에
<i> 표지마다 밝은 색을 부여하고 텍스트를 약간 작게 보여주면 텍스트를 압도하지 않는다.header {
a {
// align content vertically
display: flex;
align-items: center;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
text-decoration: none;
color: var(--foreground-color);
> i {
margin-right: 0.5em;
color: var(--color);
font-size: 0.7em;
transition: all var(--transition);
}
}
}
링크 스톱 효과
스톱 효과에 대해 우리는 예쁜
clip-path 효과를 사용할 것이다.링크마다 ::after의 위조 요소가 있는데 고광색을 배경색으로 하고 clip-path의 위조 요소가 있는데 이 위조 요소는 오른쪽 아래로 약간 자른다.링크가 중지되지 않은 경우 링크의 위치는 왼쪽(보이지 않음), 중지된 경우 오른쪽으로 이동하여 링크 영역을 덮어씁니다.z-index 설정은 원광등이 텍스트를 덮어쓰지 않도록 합니다.header {
a {
transition: all var(--transition);
position: relative;
overflow: hidden;
z-index: 1;
--slantness: 4rem;
&::after {
content: '';
position: absolute;
z-index: -1;
width: calc(100% + var(--slantness));
top: 0%;
bottom: 0%;
left: calc((100% + var(--slantness)) * -1);
clip-path: polygon(
0% 0%, 100% 0%,
calc(100% - var(--slantness)) 100%, 0% 100%
);
background: var(--color);
opacity: 0;
transition: all var(--transition);
}
&:hover {
color: white;
> i {
color: var(--background-color);
}
&::after {
opacity: 1;
left: 0%;
}
}
}
로고 및 사용자 메뉴
이 로고는 font awesome의 깃털 아이콘일 뿐이며, 멈출 때 색을 칠합니다.더 예쁜 모양을 주기 위해 왼쪽 상단과 오른쪽 하단은 강렬한 원각으로 깃털 모양에 맞고 정지 효과가 좋다.
header {
.logo {
grid-area: logo;
place-self: center;
margin-right: 1rem;
padding: 0.25rem;
border-radius: 0.25rem;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
color: var(--color);
font-size: 2rem;
transition: all var(--transition);
&:hover {
background: var(--color);
color: var(--background-color);
}
}
}
header {
.user {
box-shadow: inset 0px 0px 0px 1px var(--color);
}
}
Reference
이 문제에 관하여(탐색 모음을 만드는 3가지 방법(CSS 그리드 레이아웃)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/crayoncode/3-ways-to-create-a-navbar-css-grid-layout-4kal텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
