다단계 탐색 연결을 달성하기 위한 순수 CSS(그림 및 텍스트 예제 포함)
- 藏色散人앞으로
- 2022-08-05 13:59:403296검색
서문
네비게이션 바는 이전에도 해본 적이 있지만... 모두 매우 간단한 1차 레벨 네비게이션 바이거나 JQ로 구현된 2차 레벨 네비게이션 바였습니다. 그러나 페이지에 표시되는 내용은 여전히 CSS로 구현되어야 하며 JavaScript는 작업에 더 많은 책임을 져야 합니다. [추천: css 비디오 튜토리얼]
Basics
첫 번째는 다음과 같은 보조 탐색 모음입니다.
이전에는 이해한 적이 없습니다... 사실 이런 것은 매우 간단합니다.. .
주요 사항은 다음과 같습니다.
1. 전체 탐색의 구조는 어떻게 되어야 합니까?
2 JS를 사용하지 않고 마우스가 1단계 탐색으로 이동할 때 보조 탐색을 표시하는 방법.
3. 보조 탐색 모음 위치 지정.
분석:
1. 더 주류적인 접근 방식은 ul 태그를 사용하는 것입니다. 각 ul 태그는 탐색 수준이고 내부의 li는 하위 프로젝트이며 li에는 태그와 ul 태그가 포함되어 있습니다. a 태그는 클릭하여 이동하는 데 사용되며 ul은 다음 수준의 탐색 모음입니다. ...
2. 마우스를 첫 번째 수준 탐색 모음으로 이동하면 두 번째 수준 탐색 모음이 표시됩니다. 첫 번째 반응은 hover 의사 클래스입니다. 이전 이해에 따르면 hover는 자체 변경 사항을 제어하는 데 사용됩니다. 하위 요소의 스타일을 어떻게 제어할 수 있나요? 사실 이것만으로도 충분합니다.
#nav li:hover ul{
display: block;
}1단계 탐색의 li가 마우스로 가려지면 하위 요소의 ul이 표시됩니다.
......
아직도 이렇게 될 수 있다는 사실이 밝혀졌지만, 이전의 내 이해는 틀렸습니다. 원래는 li：hover가 단지 상태인 줄 알았는데 사실은 요소이기도 합니다.
이 코드는 li:hover 전체를 요소로 취급하는데, 이 요소는 "마우스가 li 요소의 li 요소를 덮을 때"라고 정의된 특수 요소이므로 마우스가 li 요소를 덮을 때도 요소입니다. , 이 요소 이때 마우스가 가리키는 요소는 li:hover 입니다. 이때 li:hover 아래의 ul 요소가 표시되도록 제어하여 목적을 달성합니다.
나는 정말 재치가 있어요.
3. 그러면 두 번째 수준 ul을 첫 번째 수준 li 바로 아래에 표시하려면 어떻게 해야 할까요?
1) 두 번째 수준 ul은 첫 번째 수준 li에 싸여 있습니다. 실제로 바로 아래가 아닌 상대 위치 지정을 사용하면 됩니다. 이때 문서 흐름에서 벗어나 어디에나 배치할 수 있습니다. 당신이 원하는.
2) 어떤 이유로든 강박증이 있어서 문서 흐름에서 벗어나고 싶지 않다면 어떻게 되나요?
사실 그냥 "압착"하면 li에 태그와 ul 태그가 있습니다. a 태그가 충분히 크고 모든 위치를 차지하면 자연스럽게 ul이 아래에 압착됩니다.
업 코드 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>吃货的导航栏</title>
</head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#nav{
width: 600px;
height: 40px;
background: gray;
margin: 0 auto;
}
#nav li{
line-height: 40px;
float: left;
list-style: none;
height: 40px;
position: relative;
}
#nav a{
padding: 0 20px;
color: black;
display: block;
text-decoration: none;
height: 40px;
}
#nav a:hover{
background: #058;
color:white;
}
#nav li ul{
display: none;
position: absolute;
top: 40px;
left:0px;
}
#nav li ul li{
float: none;
margin: 2px;
width:100px;
text-align: center;
}
#nav li ul li a{
background: #ccc;
}
#nav li ul li a:hover{
background: deeppink;
}
#nav li:hover ul{
display: block;
}
</style>
<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">肉类</a>
<ul>
<li><a href="#">牛肉</a></li>
<li><a href="#">猪肉</a></li>
<li><a href="#">鸡肉</a></li>
</ul>
</li>
<li><a href="#">水果</a>
<ul>
<li><a href="#">西瓜</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">苹果</a></li>
</ul>
</li>
<li><a href="#">零食</a></li>
<li><a href="#">蔬菜</a>
<ul>
<li><a href="#">白菜</a></li>
</ul>
</li>
</ul>
</body>
</html>가장 기본적인 보조 네비게이션 바이지만, 이 기반을 바탕으로 다단계 네비게이션 바와 다양한 효과를 만들 수 있는 기반이 마련됩니다.
다단계 네비게이션 바
위의 원리를 바탕으로 3레벨 네비게이션 바를 예로 들면서 보기 좋게 만드는 방법을 쉽게 배울 수 있습니다.
ul이 포함된 li의 구조이기도 하며 상대 위치 지정과 약간의 전환 효과를 사용하고 테두리로 만든 작은 삼각형을 사용하여 다른 테두리의 색상을 투명하게 변경하는 것이 원칙입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>吃货的动画导航栏</title>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.top-nav{
width: 960px;
margin: 0 auto;
list-style: none;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 10px #777;
}
.top-nav:before,.top-nav:after{
content: "";
display: table;
}
.top-nav:after{
clear: both;
}
.top-nav>li{
float: left;
border-right: 1px solid saddlebrown;
position: relative;
line-height: 40px;
}
.top-nav li{
position: relative;
}
.top-nav>li a{
font: "微软雅黑" 12px;
text-decoration: none;
color: goldenrod;
padding: 12px 30px;
}
.top-nav>li a:hover{
color:#fafafa;
}
.top-nav li ul{
position: absolute;
border-radius: 6px;
z-index: 1;
top: 40px;
left: 0px;
list-style: none;
background-image: linear-gradient(#444, #111);
box-shadow: 0 -1 0 rgba(255,255,255,0.3);
visibility: hidden; /*这里只能用hidden 不能display*/
opacity: 0;
margin: 20px 0 0 0;
transition: all .2s ease-in-out;
}
.top-nav ul ul{
margin-left: 20px;
margin-top: 20px;
}
.top-nav ul li:hover>ul{
margin-left: 0px;
}
.top-nav li:hover>ul{
opacity: 1;
visibility: visible;
margin: 0;
}
.top-nav ul a{
padding: 15px;
width: 70px;
display: block;
}
.top-nav ul a:hover{
background-image: linear-gradient(#04acec, #0186ba);
}
.top-nav ul li:first-child>a{
border-radius: 6px 6px 0 0;
}/*第一个跟最后一个a标签设置圆角*/
.top-nav ul li:last-child>a{
border-radius: 0 0 6px 6px;
}
.top-nav ul li{
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}/*两个阴影叠加产生间隔*/
.top-nav ul li:first-child>a:before{
content: "";/*这句不可少，少了没效果*/
display: block;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
position: absolute;
top: -6px;
left: 40px;
}
.top-nav ul li:first-child>a:hover:before{
border-bottom: 6px solid #04acec;
}
.top-nav ul ul{
top: 0px;
left: 100px;
}
.top-nav ul ul li:first-child>a:before{
border-top: 6px solid transparent;
border-right: 6px solid #444;
border-bottom: 6px solid transparent;
position: absolute;
top: 20px;
left: -12px;
}
.top-nav ul ul li:first-child>a:hover:before{
border-bottom: 6px solid transparent;
border-right: 6px solid #04acec;
}
</style>
<body>
<ul class="top-nav">
<li><a href="#">什么都吃</a></li>
<li><a href="#">肉类</a>
<ul>
<li><a href="#">铁板牛肉</a>
<ul>
<li><a href="#">黑椒味</a></li>
<li><a href="#">孜然味</a></li>
<li><a href="#">酸辣味</a></li>
</ul>
</li>
<li><a href="#">泡椒凤爪</a>
<ul>
<li><a href="#">大盘装</a></li>
<li><a href="#">中盘装</a></li>
<li><a href="#">小盘装</a></li>
</ul>
</li>
<li><a href="#">坩埚田鸡</a></li>
</ul>
</li>
<li><a href="#">中餐</a>
<ul>
<li><a href="#">家常菜</a>
<ul>
<li><a href="#">红烧肉</a></li>
<li><a href="#">拔丝地瓜</a></li>
<li><a href="#">青椒炒肉</a></li>
</ul>
</li>
<li><a href="#">汤</a>
<ul>
<li><a href="#">花蛤汤</a></li>
<li><a href="#">大骨肉汤</a></li>
<li><a href="#">鱼汤</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">水果</a></li>
<li><a href="#">甜点</a></li>
</ul>
</body>
</html>레벨이 많기 때문에... 선택기를 사용할 때 주의하세요. . >를 추가해야 하는 경우와 공백을 사용해야 하는 경우는 언제입니까? . 그렇지 않으면 변화하는 데 오랜 시간이 걸릴 것입니다. 내가 어떻게 아는지 묻지 마십시오.
위 내용은 다단계 탐색 연결을 달성하기 위한 순수 CSS(그림 및 텍스트 예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!