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");
}
});
主なポイントは、現在のウェブページのURLとaタグのhrefが一致するかどうかを検出し、それに応じてスタイルを変更することです。ここでは、window.location.hrefメソッドを使用して現在のウェブサイトを取得し、split()メソッドで切り分け、最後の部分が私たちが欲しいものです。通常、URLの完全な一致は必要ありませんので、ここではsubstr()メソッドを使用して前の文字列を一致させます。CSSファイルにonクラスを追加し、aタグにclass=
2、中国語と英語の切り替えのナビゲーションバー
まず效果图を見てみましょう：
私は2つの方法を使用して実現しました。1つは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>index</b> <i>ホーム</i> </a> </li> <li> <a href="index.html"> <b>bbs</b> <i>フォーラム</i> </a> </li> <li> <a href="index.html"> <b>blog</b> <i>ブログ</i> </a> </li> <li> <a href="index.html"> <b>mall</b> <i>商城</i> </a> </li> <li> <a href="index.html"> <b>download</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、エラストックアニメーション付きのナビゲーションバー
私は3つの方法を使用して実現しました。第1種はCSSです。3、第2種はjQuery、第3種は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>
第1種：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>
実現方法は非常に簡単で、まず最初にドロップダウンメニューを非表示にし、マウスがカーソルを合わせたときに非表示のメニューを表示するだけで良いです。具体的な実現コードは上の赤い部分にありますが、詳細な説明は省略します。コードは非常にシンプルです。
第2種：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()メソッドを使用しています。変化時間を設定するには、括弧に時間を直接入力してください。
第3種：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（私はこのバージョンを使用しています。皆さんはインターネットからダウンロードできます）。ここで重点を置いて説明します：マウスを移動するとき、エラストikusドロップダウンメニューが下に落ちます。マウスを外れたとき、エラストikusドロップダウンメニューが上に戻ります。前述のslideDown()およびslideUp()メソッドを使用して、アニメーションが追加されています。easingを使用して、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#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れた場合、本サイトは即座に侵害疑いのコンテンツを削除します。）