CSS 반응 형 Navbar 예제
반응 형 내비게이션 바는 순수한 CSS를 통해 구현되며, 대답은 숨겨진 확인란과 미디어 쿼리를 사용하여 모바일 측면에서 메뉴의 디스플레이 동작을 제어하는 것입니다. 1. 데스크탑 측면은 Flex 레이아웃을 통해 구현되는 수평 내비게이션 메뉴로 표시됩니다. 2. 모바일 쪽이 768px 미만인 경우 메뉴를 숨기고 햄버거 아이콘을 표시하고 레이블을 통해 숨겨진 확인란을 트리거하십시오. 3. 확인 된 상태 및 ~ 선택기를 사용하여 .nav-menu의 디스플레이 및 숨겨지는 것을 제어하십시오. 4. 햄버거 아이콘을 클릭 한 후 애니메이션 효과는 CSS 변환을 통해 달성됩니다. 5. 메뉴는 절대 포지셔닝을 사용하여 올바른 레벨로 표시되도록합니다. 전체 솔루션에는 JavaScript가 필요하지 않으며 CSS에 의존하는 대화식 로직은 완전하고 가볍습니다. 정적 웹 사이트에 적합하며 마지막으로 완전한 문장 구조로 끝납니다.
반응 형 Navbar를 만드는 것은 현대 웹 디자인에서 일반적인 요구 사항입니다. 아래는 모바일 측면의 햄버거 메뉴로 자동 붕괴되는 순수한 HTML 및 CSS 구현 (JavaScript 필요 없음)을 사용하는 CSS 응답 내비게이션 바의 간단하지만 실용적인 예입니다.
✅ 기본 기능
- 데스크탑 : 수평 내비게이션 메뉴
- 모바일 : 햄버거 아이콘으로 접고 클릭하여 수직 메뉴를 확장하십시오.
- CSS 미디어 쿼리를 사용한 응답 성
- 순수한 CSS 구현 (사용
:checked및 숨겨진 확인란)
? HTML 구조
<! doctype html>
<html lang = "zh">
<헤드>
<meta charset = "utf-8" />
<meta name = "viewport"content = "width = device-width, 초기 스케일 = 1.0"/>
<title> 반응 형 Navbar </title>
<link rel = "Stylesheet"href = "Style.css" />
</head>
<body>
<nav class = "navbar">
<!-햄버거 버튼 (숨겨진 확인란)->
<input type = "checkbox"id = "nav-toggle"class = "nav-toggle">
<label for = "nav-toggle"class = "Hamburger">
<span> </span>
<span> </span>
<span> </span>
</레이블>
<!-로고->
<div class = "nav-logo">
<a href = "#"> 로고 </a>
</div>
<!-내비게이션 링크->
<ul class = "nav-menu">
<li> <a href = "#"> home </a> </li>
<li> <a href = "#"> 서비스 </a> </li>
<li> <a href = "#"> 정보 </a> </li>
<li> <a href = "#"> contact </a> </li>
</ul>
</nav>
<메인>
<H1> 반응 형 내비게이션 바 </h1>에 오신 것을 환영합니다
<p> 메뉴 응답 효과를보기 위해 브라우저 창을 좁 힙니다. </p>
</main>
</body>
</html>? CSS 스타일 (style.css)
/* 기본 재설정 및 레이아웃*/
* {
여백 : 0;
패딩 : 0;
박스 사이징 : 국경 박스;
}
몸 {
Font-Family : Arial, Sans-Serif;
라인 높이 : 1.6;
}
.navbar {
디스플레이 : Flex;
정당화 컨텐츠 : 공간 중간;
정렬 구조 : 센터;
배경색 : #333;
패딩 : 1rem;
위치 : 상대;
}
.nav-logo a {
색상 : 흰색;
글꼴 크기 : 1.5REM;
텍스트 결정 : 없음;
}
.nav-menu {
디스플레이 : Flex;
목록 스타일 : 없음;
여백 : 0;
패딩 : 0;
}
.nav-menu li a {
색상 : 흰색;
텍스트 결정 : 없음;
패딩 : 0.8REM 1REM;
디스플레이 : 블록;
}
.nav-menu li a : 호버 {
배경색 : #555;
}
/* 햄버거 메뉴 스타일*/
.Hamburger {
디스플레이 : 없음;
플렉스 방향 : 열;
커서 : 포인터;
}
.Hamburger Span {
너비 : 25px;
높이 : 3px;
배경색 : 흰색;
여백 : 3px 0;
전환 : 0.3S;
}
/ * 모바일 반응 형 (최대 너비 768px) */
@Media (max-width : 768px) {
.Hamburger {
디스플레이 : Flex;
}
.nav-menu {
디스플레이 : 없음;
플렉스 방향 : 열;
너비 : 100%;
위치 : 절대;
상단 : 100%;
왼쪽 : 0;
배경색 : #333;
Box-Shadow : 0 8px 16px RGBA (0,0,0,0.2);
}
.nav-menu li a {
패딩 : 1rem;
국경-바닥 : 1px 고체 #444;
}
/* 확인란이 확인되면 메뉴가 표시됩니다*/
.nav-toggle : 확인 ~ .nav-menu {
디스플레이 : Flex;
}
/* 선택 사항 : 햄버거 아이콘 애니메이션*/
.nav-toggle : 점검 ~ .Hamburger Span : nth-Child (2) {
불투명도 : 0;
}
.nav-toggle : 점검 ~ .Hamburger Span : nth-Child (1) {
변환 : 회전 (45deg) 번역 (5px, 5px);
}
.nav-toggle : 점검 ~ .Hamburger Span : nth-Child (3) {
변환 : 회전 (-45deg) 번역 (5px, -5px);
}
}? 핵심 사항을 설명하십시오
-
.nav-toggle메뉴 확장/붕괴를 제어하는 숨겨진checkbox입니다. -
label[for="nav-toggle"]햄버거 아이콘의 클릭 영역입니다. -
~선택기는 동일한 레벨의 후속 요소 (예 :.nav-menu)를 선택하는 데 사용됩니다. - 화면이 768px 미만인 경우 미디어 쿼리 토글 레이아웃.
- NO JS : CSS의
:checked상태를 사용하여 상호 작용을 활성화합니다.
✅ 장점
- 정적 웹 사이트에 적합한 간단하고 가볍습니다
- JavaScript, 빠른 로딩에 의존하지 않습니다
- 기본 애니메이션 및 대화식 피드백을 지원합니다
? 확장 제안
-
transition추가하여 메뉴를 더 자연스럽게 만듭니다 -
prefers-reduced-motion사용하여 사용자 선호도에 적응하십시오 - javaScript를 사용하여 대규모 프로젝트에서보다 복잡한 논리를 제어하십시오.
기본적 으로이 모든 것은 복잡하지는 않지만 세부 사항을 무시하기는 쉽습니다 (예 : position: absolute 및 z-index ). 이 구조를 자신의 프로젝트에 통합하여 반응 형 내비게이션을 신속하게 구현할 수 있습니다.
위 내용은 CSS 반응 형 Navbar 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Laravel Lazy Loading vs 열렬한 적재
Jul 28, 2025 am 04:23 AM
게으른로드는 연관성에 액세스 할 때만 쿼리 만 쉽게 N 1 문제로 이어질 수 있으며, 이는 관련 데이터가 필요한지 여부를 결정하지 않는 시나리오에 적합합니다. 2. 비상로드는 ()와 함께 사용하여 관련 데이터를 미리로드하여 N 1 쿼리를 피하기 위해 배치 처리 시나리오에 적합합니다. 3. 응급 로딩을 사용하여 성능을 최적화하고 Laraveldebugbar와 같은 도구를 통해 N 1 문제를 감지 할 수 있으며 모델의 속성이있는 $는 불필요한 성능 오버 헤드를 피하는 데 신중하게 사용됩니다.
기계 학습 모델과 PHP를 통합합니다
Jul 28, 2025 am 04:37 AM
usearestapitobridgephpandmlmodelsbyrunningthemodelinpythonviaflaskorfastapiandcallingitffuspusingcurlorguzz.2.runpythonscriptsdirectlyfromphpusingexec () orshell_exec () orshell_exec () orshell_exec ()이지만, 트래픽 컨트리 컬트 가지만 hassecurity and somancelitat
Laravel Raw SQL 쿼리 예제
Jul 29, 2025 am 02:59 AM
Laravel은 기본 SQL 쿼리의 사용을 지원하지만 안전을 보장하기 위해 매개 변수 바인딩이 선호되어야합니다. 1. DB :: SELECT ()를 사용하여 SQL 주입을 방지하기 위해 매개 변수 바인딩으로 선택 쿼리를 실행합니다. 2. DB :: Update ()를 사용하여 업데이트 작업을 수행하고 영향을받는 행 수를 반환합니다. 3. db :: insert ()를 사용하여 데이터를 삽입하십시오. 4. db :: delete ()를 사용하여 데이터를 삭제합니다. 5. db :: statement ()를 사용하여 생성, Alter 등과 같은 결과 세트없이 SQL 문을 실행하십시오. 6. QueryBuilder의 WhereRaw, Selectraw 및 기타 방법을 사용하여 기본 표현식을 결합하여 보안을 향상시키는 것이 좋습니다.
Java의 Painless Bean 매핑을위한 맵 구조 사용
Jul 28, 2025 am 03:20 AM
Maptruct는 Javabeans 간의 매핑을 단순화하는 데 사용되는 컴파일 타임 코드 생성기입니다. 1. 긴 설정/맵핑 코드를 수동으로 쓰지 않도록 인터페이스를 정의하여 구현 클래스를 자동으로 생성합니다. 2. 유형-안전, 런타임 오버 헤드 없음, 동일한 이름 필드, 사용자 정의 표현식, 중첩 객체 및 수집 매핑의 자동 매핑을 지원합니다. 3. 스프링과 통합 될 수 있으며 @Mapper (componentModel = "Spring")를 사용하여 Mapper를 Springbean에 주입합니다. 4. 간단한 구성, 맵 구조 종속성 및 주석 프로세서 포트 삽입물을 소개합니다.
프로젝트 원자로 및 스프링 웹 플럭스를 사용한 Java의 반응 형 프로그래밍
Jul 29, 2025 am 12:04 AM
응답 형 프로그래밍은 Projectreactor 및 Springwebflux를 통해 자바에서 높은 동시성, 낮은 대기 시간 비 블로킹 서비스를 구현합니다. 1. Projectreactor는 두 가지 핵심 유형을 제공합니다. 모노 및 플럭스, 비동기 데이터 흐름의 선언적 처리를 지원하고 운영자 체인을 통한 변환, 필터 및 기타 작업을 지원합니다. 2. Springwebflux는 원자로를 기반으로하며 주석과 기능의 두 가지 프로그래밍 모델을 지원합니다. Netty와 같은 비 블로킹 서버에서 실행되며 많은 동시 연결을 효율적으로 처리 할 수 있습니다. 3. WebFlux Reactor를 사용하면 I/O 집약적 시나리오에서 동시성 기능 및 리소스 활용도를 향상시키고 SSE 및 WebSO를 자연스럽게 지원할 수 있습니다.
메모장을 찾아서 REGEX 캡처 그룹으로 교체하십시오
Jul 28, 2025 am 02:17 AM
메모장에서 정규식 캡처 그룹을 사용하여 텍스트를 효과적으로 재구성하십시오. 먼저 교체 대화 상자 (Ctrl h)를 열고 "검색 모드"를 "정규 표현식"으로 선택해야합니다. 1. 사용 ()을 캡처 그룹을 정의하려면 (\ w)와 같은 단어를 캡처합니다. 2. \ 1 및 \ 2를 사용하여 교체 상자에서 해당 그룹을 참조하십시오. 3. 예 : "Johndoe"라는 이름을 "doe, john", find (\ w) \ s (\ w)로 교환하고 \ 2, \ 1로 교체하십시오. 4. 날짜 형식 변환 2023-12-25 ~ 25/12/2023, find (\ d {4})-(\ d {2})-(\ d {2})-\ 3/\ 2/\ 1으로 바꾸십시오. 5. 로그 재정렬은 시간, 레벨, ID 및 기타 정보를 추출 할 수 있습니다.
Java 응용 프로그램에서 메모리 사용을 최적화합니다
Jul 28, 2025 am 02:40 AM
useEfficientDattructureSlikearRayListOverlistOverListandPrimItiveCollectionStoreStoreDuceOverHead;
CSS 테이블 레이 아웃 고정 예
Jul 29, 2025 am 04:28 AM
테이블 레이 아웃 : 고정 된 내용은 레이아웃에 영향을 미치는 내용을 피하기 위해 첫 번째 행의 셀 폭에 의해 테이블 열 폭을 결정하도록합니다. 1. 테이블 레이 아웃 설정 : 테이블 너비를 고정하고 지정합니다. 2. 첫 번째 행 Th/td에 대한 특정 열 너비 비율을 설정합니다. 3. 흰색 공간 사용 : Nowrap, Overflow : 숨겨진 텍스트 오버 플로우 : 텍스트 오버 플로우를 제어하기위한 타원; 4. 안정적인 레이아웃 및 고성능 렌더링이 필요한 배경 관리, 데이터 보고서 및 기타 시나리오에 적용되므로 레이아웃 지터를 효과적으로 방지하고 렌더링 효율성을 향상시킬 수 있습니다.
