English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
네비게이션 바는 널리 사용되며, 각 웹 사이트는 독특한 네비게이션 바를 만듭니다. 최근 특별히 다양한 유형의 네비게이션 바를 알아보았습니다. 예를 들어, 강조 표시된 네비게이션 바, 중국어와 영어가相互 전환되는 네비게이션 바, 확장 애니메이션을 가진 네비게이션 바, 심지어 마찰 운동 애니메이션을 가진 네비게이션 바(문자 아래에 줄) 등입니다. 각 네비게이션 바는 자신만의 특징을 가지고 있으며, 예를 들어, 강조 표시된 네비게이션 바는 보통 간단하게 보이지만 시각적 효과가 좋으며, 애니메이션을 가진 네비게이션 바는 시각적으로도 좋은 효과를 가집니다.
다음은 하나씩 설명할 예정입니다4종류의 네비게이션 바가 널리 사용됩니다. 즉, 강조 표시된 네비게이션 바, 중국어와 영어가相互 전환되는 네비게이션 바, 확장 애니메이션을 가진 네비게이션 바, 마찰 운동 애니메이션을 가진 네비게이션 바 등입니다.
1、 강조 표시된 네비게이션 바
이러한 네비게이션 바: 어떤 네비게이션을 클릭하면 그것을 강조 표시하고, 나머지는 기본 스타일을 유지합니다. 다시 말해 메뉴 CSS 코드를 변경하지 않고 JS를 사용하여 메뉴의 배경을 제어합니다. 메뉴 항목이 클릭되면 독특한 배경 색상이나 배경 이미지를 부여하면 사용자가 현재 보고 있는 웹 사이트 컬럼을 명확하게 인식할 수 있습니다. 간단하고 편리하며 효과적입니다.
效果图如下：
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"을 추가한 후 js에서 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에lastic 애니메이션을 가진 네비게이션 바입니다
저는 세 가지 방법을 사용하여 구현했습니다. 첫 번째는 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() {
-list li
$(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(){
-list li
$(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을 사용하는 것입니다. 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];
-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});
-list li
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"});
});
});
주로 몇 가지 메서드의 기능을 설명하겠습니다:
1outerwidth()는 요소의 너비를 가져옵니다. (문자의 개수가 다르기 때문에 너비가 다릅니다. 보기 좋게 하기 위해, 횡으로는 글자의 너비에 맞게 조정되어야 합니다);
2position().left는 요소의 위치 중 left 값을 가져옵니다;
3animate()를 사용하여 애니메이션 효과를 구현합니다;
4duration와 easing는 jQuery easing 플러그인의 내용입니다. 즉, 애니메이션의 효과를 설정합니다.
위에서 편집자가 소개한 jQuery+CSS3네 가지 널리 사용되는 네비게이션 바 제작 예제를 자세히 설명하겠습니다. 많은 도움이 되길 바라며, 어떤 질문이나 의문이 있으시면, 댓글을 남겨 주시기 바랍니다. 편집자는 즉시 답변을 드리겠습니다. 여기서 많은 지원에 감사드립니다!
선언: 본 문서의 내용은 인터넷에서 가져왔으며, 원작자의 소유물입니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 본 사이트는 소유권을 가지지 않으며, 인공적으로 편집되지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있을 경우 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 이메일을 보내시면, #을 @으로 변경하여 신고해 주시고, 관련 증거를 제공해 주시면, 해당 내용이 확인되면 즉시 해당 내용을 삭제하겠습니다.