English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
네비게이션 바는 널리 사용되며, 각 웹 사이트는 독특한 네비게이션 바를 만듭니다. 최근 특별히 다양한 유형의 네비게이션 바를 조사했습니다. 예를 들어, 강조 표시된 네비게이션 바, 중국어와 영어가相互 전환되는 네비게이션 바, 탄력 애니메이션을 가진 네비게이션 바, 마찰 운동 애니메이션을 가진 네비게이션 바(문자 아래에 선이 있는) 등이 있습니다. 각 네비게이션 바는 자신만의 특징을 가지고 있으며, 강조 표시된 네비게이션 바는 시각적으로 간단하지만 시각 효과가 좋으며, 애니메이션을 가진 네비게이션 바는 시각적으로도 좋은 효과를 가집니다.
다음은 하나씩 설명할 예정입니다4가장 많이 사용되는 네비게이션 바 중 하나는 강조 표시된 네비게이션 바입니다. 중국어와 영어가相互 전환되는 네비게이션 바, 탄력 애니메이션을 가진 네비게이션 바, 마찰 운동 애니메이션을 가진 네비게이션 바 등이 있습니다.
1강조 표시된 네비게이션 바
이런 네비게이션 바: 네비게이션 아이템을 클릭하면 그것을 강조 표시하고, 다른 것들은 기본 스타일을 유지합니다. 다른 메뉴 CSS 코드를 변경하지 않고, JavaScript를 사용하여 메뉴 배경을 제어합니다. 예를 들어, 메뉴 아이템이 클릭되면 독특한 배경 색상이나 배경 이미지를 부여받으면 사용자가 현재 보고 있는 웹 사이트 섹션을 명확하게 가르칠 수 있습니다. 이렇게 하면 사용자가 더 쉽게 사용할 수 있으며, 효과도 좋습니다.
이미지如下:
html:（这里省略了其他html文件的代码，只贴出一个index.html的代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>홈페이지</title>
<link href="../css/demo1.css" rel="stylesheet" type="text/css">
<script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8></script>
<script src="../js/demo1.js" language="javascript" charset="utf-8></script>
</<head>
<body>
<div class="nav">
<ul class="nav-list">
<li><a href="index.html">首页</a></li>
<li><a href="bbs.html">论坛</a></li>
<li><a href="blog.html">博客</a></li>
<li><a href="mall.html">商城</a></li>
<li><a href="download.html">下载</a></li>
</ul>
</div>
<div class="content">首页</div>
</body>
</html>css：
*{
margin:0px;
padding:0px;
font-family: \"Microsoft Yahei\", Helvetica, sans-serif, Lato;
}
.nav{
background-color: #222;
height: 40px;
width:100%;
margin-top:50px;
}
.nav-list{
width: 1000px;
margin: 0 auto;
}
.nav-list li{
list-style: none;
float: left;
}
.nav-list li a{
color: #aaa;
padding:0 40px;
text-decoration: none;
line-height: 40px;
display: block;
border: none;
}
.content{
margin:20px auto;
text-align: center;
}
.nav-list li a:hover{
color: #fff;
background: #504d4d;
}
<span style="color:#ff0000;">.nav-list li a.on{
color: #fff;
background: #504d4d;
}/span>jquery:
$(function() {
var index = (window.location.href.split("/").length)-1;
var href = window.location.href.split("/")[index].substr(0,4);
if (href!=null){
$(".nav-list li a[href^='"+href+"]").addClass("on");
}
$(".nav-list li a[href='index.html']).addClass("on");
}
});
중요한 지식은 현재 웹 페이지의 주소와 a 태그의 href가 일치하는지 확인하는 방법입니다. 그런 다음 스타일을 변경합니다. 여기서는 window.location.href 메서드를 사용하여 현재 웹 페이지의 주소를 가져와 split()을 사용하여 마지막 부분의 내용을 가져옵니다. 일반적으로 전체 주소와 완전히 일치하지 않아야 하므로 여기서 substr() 메서드를 사용하여 몇 가지 글자를 일치시킵니다. CSS 파일에 on 클래스를 추가하여 a 태그에 class="on"을 추가하고, JavaScript에서 addClass() 메서드를 사용하여 기능을 완료합니다.
2영어와 중국어切换的导航条
먼저 효과 이미지를 보겠습니다:
저는 두 가지 방법을 사용하여 구현했습니다. 하나는 CSS를 사용했습니다.3, 또한 jQuery를 사용하여 구현합니다.
먼저 CSS에 대해 이야기해 보겠습니다.3어떻게 구현하는가:
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>홈페이지</title> <link rel="stylesheet" href="../css/demo2.css"> </<head> <body> <div class="nav"> <ul class="nav-list"> <li> <a href="index.html"> <b>홈페이지</b> <i>홈페이지</i> </a> </li> <li> <a href="index.html"> <b>커뮤니티</b> <i>커뮤니티</i> </a> </li> <li> <a href="index.html"> <b>블로그</b> <i>블로그</i> </a> </li> <li> <a href="index.html"> <b>상점</b> <i>상점</i> </a> </li> <li> <a href="index.html"> <b>다운로드</b> <i>다운로드</i> </a> </li> </ul> </div> </body> </html>
css:
*{
margin:0px;
padding:0px;
font-family: \"Microsoft Yahei\", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
background-color: #222;
margin-top:100px;
overflow: hidden;
}
.nav-list{
width:1000px;
margin:0 auto;
height: 40px;
}
.nav-list li {
float: left;
}
.nav-list li a{
display: block;
transition: 0.2s;
}
.nav-list li b,.nav-list li i{
color:#aaa;
line-height: 40px;
display: block;
padding:0 30px;
text-align: center;
}
.nav-list li b{
font-weight:normal;
}
.nav-list li i{
font-style: normal;
color:#fff;
background-color: #333;
}
.nav-list li a:hover{
margin-top:-40px;
}
빨간 부분이 이 과정의 구현입니다. 위치의 변화를 사용하여 마우스를 올리면 중국어를 표시하며 영어를 내리는 것입니다. 주의해야 할 것은 overflow:hidden 속성을 사용하여 숨기는 것입니다. 변화 속도를 느리게 하고 싶다면 transition 속성을 사용하여 변화 시간을 설정하면 변화 속도를 느리게 할 수 있습니다.
그리고 jQuery를 사용하여 구현합니다：
css：
*{
margin:0px;
padding:0px;
font-family: \"Microsoft Yahei\", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
background-color: #222;
margin-top:100px;
overflow: hidden;
}
.nav-list{
width:1000px;
margin:0 auto;
height: 40px;
}
.nav-list li {
float: left;
}
.nav-list li a{
display: block;
}
.nav-list li b,.nav-list li i{
color:#aaa;
line-height: 40px;
display: block;
padding:0 30px;
text-align: center;
}
.nav-list li b{
font-weight:normal;
}
.nav-list li i{
font-style: normal;
color:#fff;
background-color: #333;
}
jquery:
$(function() {
$(".nav-list li a").hover(function(){
$(this).stop().animate({"margin-top":-40},200)
},function(){
$(this).stop().animate({"margin-top":0},200)
});
});
기능을 구현하는 중요한 것은 animate() 함수의 구현입니다. margin을 설정하여-top과 시간을 동기화하여 빠르게 건너뛰는 것을 방지하기 위해 모든 것이 변화됩니다(如下图所示)。animate() 함수 앞에 stop() 함수를 추가해야 합니다. 즉, 모든 애니메이션을 멈추고 이 애니메이션을 시작합니다.
3에lasticated 애니메이션을 가진 네비게이션 표시줄
저는 세 가지 방법을 사용했습니다. 첫 번째는 CSS입니다3, 두 번째는 jQuery, 세 번째는 jQuery easing 구현입니다. 효과 이미지는 다음과 같습니다:
세 가지의 레이아웃이 같기 때문에, html 구조 코드를 바로 제공하겠습니다.
html:
<div class="nav">
<ul class="nav-list">
<li>
<a href="#">홈페이지</a>
</li>
<li>
<a href="#">커뮤니티/a>
<div class="nav-down">
<a href="#">java 커뮤니티</a>
<a href="#">js 커뮤니티</a>
<a href="#">jQuery 커뮤니티</a>
<a href="#">css3커뮤니티/a>
</div>
</li>
<li>
<a href="#">블로그</a>
<div class="nav-down">
<a href="#">精彩博文</a>
<a href="#">블로그 컬럼</a>
<a href="#">블로그 전문가</a>
<a href="#">내 블로그</a>
</div>
</li>
<li>
<a href="#">쇼핑몰</a>
<div class="nav-down">
<a href="#">소프트웨어 쇼핑몰</a>
<a href="#">C화폐 쇼핑몰</a>
<a href="#">C화폐 충전</a>
</div>
</li>
<li>
<a href="#">다운로드</a>
<div class="nav-down">
<a href="#">자원 분류</a>
<a href="#">내 자원</a>
</div>
</li>
</ul>
</div>
첫 번째 방법:css3구현
*{
margin:0px;
padding:0px;
font-family: \"Microsoft Yahei\", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
margin-top:50px;
background-color: #222;
}
.nav .nav-list{
width: 1000px;
height: 40px;
margin:0 auto;
}
.nav .nav-list li{
float: left;
position: relative;
}
.nav .nav-list li > a{
display: block;
height: 40px;
line-height: 40px;
padding:0 30px;
color:#aaa;
width:60px;
}
.nav .nav-list li:hover>a{
color:#fff;
background-color: #333;
}
<span style="color:#ff0000;">.nav .nav-list li:hover .nav-down{
display: block;
}/span>
.nav-down{
width:150px;
background-color: #333;
position: absolute;
top:40px;
left:0px;
display: none;
}
.nav .nav-list .nav-down a{
display: block;
line-height: 30px;
color:#aaa;
padding-left:30px;
}
<span style="color:#ff0000;">.nav .nav-list .nav-down a:hover{
color:#fff;
background-color: #333;
}/span>
구현 방법은 매우 간단합니다. 초기에는 내려오는 메뉴를 숨기고, 마우스가 지나갈 때 숨겨진 메뉴를 표시하면 됩니다. 구체적인 구현 코드는 위의 빨간 부분과 같습니다. 자세한 설명은 생략하겠습니다. 코드는 매우 간단합니다.
두 번째 방법:jQuery를 사용하여 구현.
css:
*{
margin:0px;
padding:0px;
font-family: \"Microsoft Yahei\", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
margin-top:50px;
background-color: #222;
}
.nav .nav-list{
width: 1000px;
height: 40px;
margin:0 auto;
}
.nav .nav-list li{
float: left;
position: relative;
}
.nav .nav-list li > a{
display: block;
height: 40px;
line-height: 40px;
padding:0 30px;
color:#aaa;
width:60px;
}
.nav .nav-list li:hover>a{
color:#fff;
background-color: #333;
}
.nav-down{
width:150px;
background-color: #333;
position: absolute;
top:40px;
left:0px;
display: none;
}
.nav .nav-list .nav-down a{
display: block;
line-height: 30px;
color:#aaa;
padding-left:30px;
}
.nav .nav-list .nav-down a:hover{
color:#fff;
background-color: #333;
}
jquery:
$(function() {
$(".nav .nav-list li").hover(function(){
$(this).find(".nav-down).stop().slideDown()
},function(){
$(this).find(".nav-down).stop().slideUp()
});
});
구현 방법 전에도 설명했듯이, 백도 스킨 변경 기능의 부분에서는 slideDown()와 slideUp() 메서드를 사용하고 있습니다. 변화 시간을 설정하려면, 괄호에 시간을 직접 입력하면 됩니다.
세 번째:}}jquery.easing으로 구현.
css의 스타일은 jquery로 구현한 스타일과 같으므로, 여기서 추가로 복사하지 않습니다.
jquery:
<pre name="code" class="javascript">$(function(){
$(".nav .nav-list li").hover(function(){
$(this).find(".nav-down").stop().slideDown({duration:500,easing:"easeOutBounce"})
},function(){
$(this).find(".nav-down").stop().slideUp({duration:500,easing:"easeOutBounce"})
});
});
이 방법을 사용할 때는 반드시 패키지 jquery.easing을 가져오는 것을 잊지 마세요.1.3.min.js（저는 이 버전을 사용하고 있으며, 누구나 인터넷에서 다운로드할 수 있습니다）。여기서 중요한 점은 다음과 같습니다: 마우스를 이동할 때, 탐색 메뉴가 따라 내려가고, 마우스를 떠놓을 때, 탐색 메뉴가 올라가고, 이는 전에 설명한 slideDown()과 slideUp() 메서드를 사용합니다. 유일한 차이점은 여기서 애니메이션을 추가했기 때문입니다. easing을 사용하여, 이는 json과 유사한 형식이며, duration과 easing 방식을 추가하면 됩니다. 이 부분의 구현 과정을 모르시면 관련 설명 문서를 확인해 보세요.
4、휩쓰기 운동 애니메이션 추적하는 네비게이션 바
구현 방법은 다음과 같습니다: 마우스를 이동할 때, 줄의 위치를 현재 글자 아래로 이동시킵니다. 따라서 현재 마우스가 이동한 위치를 가져야 하며, 이를 top과 left로 정의합니다. 그런 다음 줄의 top과 left를 상응적으로 변경하여 구현할 수 있습니다. 구체적인 구현은 다음과 같습니다.
html:（이곳에 단일 페이지의 코드만貼여 있습니다）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>휩쓰기 운동 애니메이션 추적하는 네비게이션 바</title>
<link href="../css/demo7.css" rel="stylesheet">
<script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8></script>
<script src="../js/jquery.easing.1.3.min.js" language="javascript" charset="utf-8></script>
<script src="../js/demo7.js" language="javascript" charset="utf-8></script>
</<head>
<body>
<div class="nav">
<div class="nav-content">
<ul class="nav-list">
<li><a href="index.html">首页</a></li>
<li><a href="bbs.html">论坛</a></li>
<li><a href="blog.html">博客</a></li>
<li><a href="mall.html">商城</a></li>
<li><a href="download.html">下载</a></li>
</ul>
<div class="nav-line"></div>
</div>
</div>
</body>
</html>
css:
*{
margin:0px;
padding: 0px;
font-family: \"Microsoft Yahei\", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height:40px;
margin-top:50px;
background-color: #f6f6f6;
}
.nav .nav-content{
width:1000px;
margin:0 auto;
height: 40px;
position: relative;
}
.nav .nav-list li{
float: left;
}
.nav .nav-list li a{
color:#333;
height: 40px;
line-height: 40px;
display: block;
padding:0 30px;
}
.nav .nav-line{
height:3px;
background: #35b558;
width:100px;
position: absolute;
top:40px;
left:0px;
}
.nav .nav-list li a:hover{
color:#35b558;
}
.nav .nav-list li a.on{
color:#35b558;
}
jquery:
$(function () {
var index = window.location.href.split("/").length-1;
var href = window.location.href.split("/"][index];
$(".nav .nav-list li a[href='"+href+"]").addClass("on");
var li_width = $(".nav .nav-list li a.on").outerWidth();
var li_left = $(".nav .nav-list li a.on").position().left;
$(".nav-content .nav-line").css({width:li_width,left:li_left});
$(".nav .nav-list li").hover(function(){
var li_width = $(this).outerWidth();
var li_left = $(this).position().left;
$(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500, easing: "easeOutElastic"});
},function(){
$(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500, easing: "easeOutElastic"});
});
});
주로 몇 가지 메서드의 역할을 설명합니다：
1）outerwidth()는 요소의 너비를 가져옵니다（문자의 개수가 다르기 때문에 너비가 다릅니다. 예쁘게 보이기 위해, 가로 막대기는 텍스트의 너비에 맞게 조정되어야 합니다）；
2）position().left는 요소의 위치 중 left 값을 가져옵니다；
3）animate(）를 사용하여 애니메이션 효과를 구현합니다；
4）duration과 easing는 jquery easing 플러그인의 내용입니다. 즉, 애니메이션의 효과를 설정합니다.
여기서 모든 공유가 끝납니다.
이것이 본문의 전체 내용입니다. 여러분의 학습에 도움이 되길 바라며, 많은 지원을 부탁드립니다. 또한, 나아가는 교본에 많은 지원을 부탁드립니다.
고지사항: 본문 내용은 인터넷에서 가져왔으며, 저작권자가 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 본 사이트는 소유권을 가지지 않으며, 인공적으로 편집되지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있을 경우, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（메일을 보내는 경우, #을 @으로 변경하여 신고하시고, 관련 증거를 제공하시면, 사이트가 의심스러운 저작권 내용을 즉시 삭제합니다.