순수 CSS를 사용하여 반응형 탐색 모음의 드롭다운 탭 메뉴 효과를 구현하는 단계
- WBOY원래의
- 2023-10-28 09:58:491722검색
순수한 CSS를 사용하여 반응형 탐색 모음의 드롭다운 탭 메뉴 효과를 구현하는 단계
내비게이션 모음은 웹 페이지의 일반적인 요소 중 하나이며, 드롭다운 탭 메뉴는 웹 페이지에서 자주 사용되는 효과입니다. 탐색 모음은 더 많은 탐색 옵션을 제공할 수 있습니다. 이 문서에서는 순수 CSS를 사용하여 반응형 탐색 모음 드롭다운 탭 메뉴 효과를 구현하는 방법을 소개합니다.
1단계: 기본 HTML 구조 구축
먼저 데모용 기본 HTML 구조를 구축하고 탐색 모음에 몇 가지 스타일을 추가해야 합니다. 다음은 간단한 HTML 구조입니다.
<!DOCTYPE html>
<html>
<head>
<title>响应式导航栏</title>
<style>
/* 导航栏样式 */
.navbar {
background-color: #333;
overflow: hidden;
}
/* 导航栏选项样式 */
.navbar a {
float: left;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 导航栏选项悬停样式 */
.navbar a:hover {
background-color: #ddd;
color: #333;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">图片</a>
<a href="#">视频</a>
<a href="#">论坛</a>
<a href="#">联系我们</a>
<a href="javascript:void(0);" class="icon" onclick="responsiveMenu()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
</html>2단계: CSS 스타일 추가
다음으로 반응형 탐색 모음 효과를 얻으려면 CSS 스타일을 추가해야 합니다. 미디어 쿼리를 사용하여 다양한 화면 크기에 대한 스타일을 정의할 수 있습니다. 다음은 예제의 CSS 스타일입니다.
/* 全局样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 导航栏选项隐藏样式 */
.navbar a:not(:first-child) {
display: none;
}
/* 响应式导航栏样式 */
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
/* 显示导航栏选项 */
.navbar a.icon {
float: right;
display: block;
}
/* 导航栏选项悬停样式 */
.navbar.responsive a.icon {
background-color: #ddd;
color: #333;
}
/* 导航栏选项悬停后的下拉菜单样式 */
.navbar.responsive .navbar-dropdown {
display: block;
}
/* 导航栏下拉菜单样式 */
.navbar-dropdown {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
/* 导航栏下拉菜单选项样式 */
.navbar-dropdown a {
color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 导航栏下拉菜单选项悬停样式 */
.navbar-dropdown a:hover {
background-color: #f1f1f1;
}
}3단계: JavaScript 코드 추가
반응형 탐색 모음의 효과를 구현하려면 JavaScript를 사용하여 메뉴 확장 및 축소도 제어해야 합니다. 다음은 간단한 JavaScript 코드 예입니다.
/* 响应式导航栏菜单展开与收起的函数 */
function responsiveMenu() {
var x = document.getElementById("myTopnav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}4단계: 드롭다운 메뉴 콘텐츠 추가
마지막으로 드롭다운 메뉴 콘텐츠를 탐색 모음에 추가해야 합니다. 콘텐츠의 이 부분은 스타일 제어를 위해 <div>标签中，并使用<code>.navbar-dropdown 클래스에 배치됩니다. 예는 다음과 같습니다.
<div class="navbar-dropdown"> <a href="#">音乐</a> <a href="#">游戏</a> <a href="#">电影</a> <a href="#">书籍</a> </div>
요약하면 위의 네 단계를 통해 간단하고 순수한 CSS 반응형 탐색 모음 드롭다운 탭 메뉴 효과를 얻을 수 있습니다. 미디어 쿼리와 JavaScript를 사용하면 다양한 화면 크기로 콘텐츠를 표시하고 숨길 수 있어 사용자에게 더 나은 경험을 제공할 수 있습니다.
위 내용은 순수 CSS를 사용하여 반응형 탐색 모음의 드롭다운 탭 메뉴 효과를 구현하는 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!