네비게이션 바는 이전에도 해본 적이 있지만... 모두 매우 간단한 1차 레벨 네비게이션 바이거나 JQ로 구현된 2차 레벨 네비게이션 바였습니다. 그러나 페이지에 표시되는 내용은 여전히 CSS로 구현되어야 하며 JavaScript는 작업에 더 많은 책임을 져야 합니다. [추천: css 비디오 튜토리얼]
첫 번째는 다음과 같은 보조 탐색 모음입니다.
이전에는 이해한 적이 없습니다... 사실 이런 것은 매우 간단합니다.. .
주요 사항은 다음과 같습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!