어떻게 CSS만 사용하여 호응성이 강한 햄버거 메뉴를 만듭니까?
Tip: Follow along with me in this tutorial
왜 우리는 반응이 민감한 메뉴가 필요합니까?
대다수 사용자는 휴대전화를 사용한다.
다음과 같은 몇 가지 사실을 증명할 수 있다.
자료 출처: https://bit.ly/3xUVMhp
최종 결과
이곳의 주요 목표는 모바일 햄버거 메뉴를 완성하는 데 도움을 주는 것입니다.
다음은 이 강좌에서 구축할 내용입니다.
너는 메뉴의 유리 변형 효과에 주의했니?우리도 이렇게 할 거야!
태그(설명 첨부)
탐색 및 메뉴의 HTML을 설정합니다.
<nav class="nav">
<a href="#" class="nav__logo">CompanyLogo</a>
<!-- focus on this div -->
<div class="nav__menucontainer">
<div class="nav__listcontainer" tabindex="0">
<ul class="nav__menu" id="navmenu">
<li class="nav__item">
<a href="#" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Projects</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Contact</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Blog</a>
</li>
</ul>
<a id="hamburger" href="#navmenu" title="menu" class="nav__hamburger">
<i class="fa fa-2x fa-hamburger"></i>
</a>
</div>
<a href="#!" title="close menu" class="nav__hamburgerclose"><i class="fa fa-2x fa-times-circle"></i></a>
</div>
</nav>
어떤 의미의 오류와 비교적 긴 유명에 대해서도 깊은 사과의 뜻을 표합니다.
우리가 무엇을 했는지, 왜 그랬는지 알아보자.
<nav> 요소에는 두 개의 하위 요소가 있습니다.<a> 라벨이 있습니다.<div class="nav__menucontainer">입니다.메뉴 컨테이너에는 두 명의 아이가 있습니다.
<div class="nav__listcontainer" tabindex="0"> 메뉴 목록과 햄버거 아이콘 포함<a id="hamburger" href="#navmenu" title="menu" class="nav__hamburger"> 전환 메뉴NOTE: Do not forget the tabindex="0" on
<div class="nav__listcontainer">
스타일시트(설명 포함)
이제 CSS 스타일을 살펴보겠습니다.
/* most part is for styling, and you can safely ignore it */
/* comments are placed wherever necessary */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
font-family: sans-serif;
}
a {
text-decoration: none;
}
/* --- You will know what this is --- */
#blobSvg {
max-width: 520px;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
background-color: rgba(51, 51, 51, 0.85);
color: #efefef;
z-index: 5;
padding: 1rem;
}
.nav__logo {
text-decoration: none;
color: inherit;
font-weight: 700;
font-size: 1.5rem;
}
.nav__menucontainer {
position: relative;
}
.nav__hamburger {
color: inherit;
min-width: 32px;
min-height: 32px;
transition: opacity 80ms linear;
/* hiding the hamburger icon on large screen sizes */
display: none;
opacity: 0;
}
.nav__hamburgerclose {
color: inherit;
position: absolute;
top: 0;
min-width: 32px;
min-height: 32px;
transition: opacity 150ms linear;
/* hiding the close icon and... */
display: none;
opacity: 0;
z-index: -1; /* pushing it behind the hamburger icon so that hamburger icon can be clicked */
}
.nav__menu {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
font-size: 0.95rem;
font-weight: 500;
}
.nav__item {
margin-right: 1rem;
}
.nav__link {
color: inherit;
text-decoration: none;
width: 100%;
}
.nav__link:hover,
.nav__link:focus-visible {
box-shadow: 0 4px 0 -1px #a2e718;
}
스타일시트(작은 화면용)
보기:
/* ----- smaller screen sizes ----- */
@media (max-width: 520px) {
.nav__hamburger {
/* making the hamburger icon visible on smaller screen sizes */
display: flex;
opacity: 1;
}
.nav__menu {
/* move menu offscreen */
opacity: 0;
position: fixed;
visibility: none;
top: -1000px;
/* just some styles */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #25310c;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.19);
border: 2px solid rgba(255, 255, 255, 0.2); /* part of glass morphism effect */
border-radius: 2rem 0 2rem 2rem;
background: rgba(255, 255, 255, 1);
}
/* uncomment the line below to activate on hover. */
/* .nav__listcontainer:hover .nav__menu, */
.nav__listcontainer:focus .nav__menu,
.nav__listcontainer:focus-within .nav__menu {
position: absolute;
visibility: visible;
opacity: 1;
top: 2rem;
right: 1.5rem;
}
/* if the browser supports backdrop-filter property,
then add it (for the glass morphism effect) */
@supports (backdrop-filter: blur(10px)) {
/* uncomment the line below to activate on hover. */
/* .nav__listcontainer:hover .nav__menu, */
.nav__listcontainer:focus .nav__menu,
.nav__listcontainer:focus-within .nav__menu {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
}
}
.nav__item {
margin-right: 0;
padding: 0.5rem 1.5rem;
}
.nav__link:hover,
.nav__link:focus {
opacity: 0.8;
color: #121212;
}
/* uncomment the line below to activate on hover. */
/* NOTE: Hover is not recommended, it will have side effects on this */
/* .nav__listcontainer:hover .nav__hamburger, */
.nav__listcontainer:focus .nav__hamburger,
.nav__listcontainer:focus-within .nav__hamburger {
opacity: 0;
z-index: -1;
}
/* uncomment the line below to activate on hover. */
/* NOTE: Hover is not recommended, it will have side effects on this */
/* .nav__listcontainer:hover + .nav__hamburgerclose, */
.nav__listcontainer:focus + .nav__hamburgerclose,
.nav__listcontainer:focus-within + .nav__hamburgerclose {
display: flex;
opacity: 1;
z-index: 1;
}
}
Tip: Copy-paste all these styles
그럼 여기 무슨 일이 일어났어요?
물론 그곳에서 많은 일이 일어났지만, 첫 번째 논평에서 말했듯이, 대부분을 안심하고 소홀히 할 수 있다.
내가 처음에 말했듯이 우리는 이동 부분에 주목할 것이다.
그럼 여기서부터 시작합시다.
@media (max-width: 520px) {display: none; opacity: 0;에 햄버거와 문을 닫는 아이콘을 숨겼다.그러나 작은 스크린에서 우리는 햄버거 아이콘을 보고 싶다.그래서 우리는 이렇게 했다. display: flex; opacity: 1;<ul>)을 화면에서 옮겨서 잘못 클릭하지 않도록 하겠습니다.이런 (<ul>스타일 없이 검사opacity: 0; position: fixed; visibility: none; top: -1000px;해 보세요.이제 주요 기능은 다음과 같습니다.
.nav__listcontainer:focus .nav__menu,
.nav__listcontainer:focus-within .nav__menu {: 이 선택기는listcontainer에 초점이 있거나 이 원소 중의 어떤 원소에 초점이 있으면 .nav__menu에 스타일 설정을 한다고 합니다.우리는 단지 표시하기 전에 화면 밖으로 옮겼을 뿐이다. .nav__menu.nav__listcontainer:focus .nav__hamburger,
.nav__listcontainer:focus-within .nav__hamburger { 선택기로 이동: 이 선택기는listcontainer에 초점이 있거나 이 요소의 모든 요소에 초점이 있으면 .nav__hamburger에 스타일 설정을 실행합니다.우리는 햄버거 아이콘을 여기에 숨겼다.z-index: 1;을 사용하여 를 클릭할 수 있도록 앞에 가져옵니다.@supports (backdrop-filter: blur(10px)) {: 이 (@supports (...)규칙은 브라우저가 괄호() 내의 속성을 지원하는지 확인합니다.지원되는 경우 스타일이 적용됩니다.여기에 흰색 배경을 부분적으로 추가했고 유리 변형 효과에 약간 모호한 효과를 추가했다..nav_item과.nav_item:hover, .nav:focus만 남았다.너는 그것들을 소홀히 할 수 있다. 왜냐하면 그것들은 단지 약간의 스타일만 추가했기 때문이다.#blobSvg.이 요소를 가져오려면 blobs.app로 이동하여 원하는 blob을 만들고 SVG 코드를 복사하여 붙여넣기.container에 다음과 같이 하십시오.<nav>
...
</nav>
<div class="container">
<!-- svg is placed to see the glass morphism effect -->
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: rgb(255, 95, 109);"></stop>
<stop offset="100%" style="stop-color: rgb(255, 195, 113);"></stop>
</linearGradient>
</defs>
<path id="blob" d="M365,286Q374,322,337.5,330.5Q301,339,275.5,410.5Q250,482,221.5,415Q193,348,154.5,337.5Q116,327,82,288.5Q48,
250,57,197Q66,144,98,93.5Q130,43,190,76Q250,109,304,86Q358,63,361,123.5Q364,184,360,217Q356,250,365,286Z" fill="url(#gradient)"></path>
</svg>
</div>
<div class="container"> 스타일을 끝(또는 맨 위의 위치)에 붙여 넣습니다..container {
display: flex;
flex-direction: column;
align-items: center; /* centering elements inside .container */
width: 100%;
max-width: 720px;
margin: 0 auto; /* centering container within its parent */
padding: 2em 1.5em;
background: #fff;
}
다음 과정에서 문제가 발생하면 다음 코드 펜을 보거나 링크드린이나 트위터 (@gautamtiwari003) 에서 저를 핑하십시오.
결론
HTML과 CSS는 과소평가되었지만 강력했다.그들은 심지어 자바스크립트와 관련이 없는 상황에서 많은 마력을 발휘할 수 있다(오해하지 마라, 나는 JS를 좋아한다)❤).
나는 네가 오늘 나와 함께 공부하고 뭔가를 세울 수 있기를 바란다.
Keep coding imperfectly. Keep coding experimentally.
읽어주셔서 감사합니다.
Reference
이 문제에 관하여(어떻게 CSS만 사용하여 호응성이 강한 햄버거 메뉴를 만듭니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gautamtiwari/how-to-make-a-responsive-hamburger-menu-using-css-only-3pg5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
