English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
ナビゲーションバーは非常に広く使用されており、それぞれのウェブサイトは独自の特徴を持つナビゲーションバーを作成しています。最近、さまざまな種類のナビゲーションバーを特別に調査しました。例えば、ハイライト表示されたナビゲーションバー、中英文字の切り替えができるナビゲーションバー、エラストikusアニメーションを持つナビゲーションバー、摩擦動きのアニメーションを持つナビゲーションバー（文字の下に線が引かれているもの）などがあります。それぞれのナビゲーションバーには独自の特徴があります。例えば、ハイライト表示されたナビゲーションバーは見た目がシンプルですが、視覚効果も良いです。アニメーションを持つナビゲーションバーは視覚効果も非常に良いです。
次に順次紹介します4種類のナビゲーションバーが広く使用されています。具体的には、ハイライト表示されたナビゲーションバー、中英文字の切り替えができるナビゲーションバー、エラストikusアニメーションを持つナビゲーションバー、フラクション動きのアニメーションを持つナビゲーションバーなどです。
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メソッドを使用して現在のウェブページのURLを取得し、split()メソッドで切り分け、最後の部分が私たちが求めるものです。通常、URLの完全な一致は必要ありませんので、ここではsubstr()メソッドを使用して前の数文字を一致させます。CSSファイルにonクラスを追加し、aタグにclass=
2、中英文切り替えのナビゲーションバー
まず效果图を見てみましょう：
私は2つの方法を使用して実現しました。一つはCSSを使用する方法で、もう一つはjQueryを使用する方法です。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
},function(){
$(this).find(".nav-down
});
});
実現方法は以前にも説明しました。百度のスキン変更機能を模倣する部分では、ここでは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（私はこのバージョンを使用しています。皆さんはインターネットからダウンロードできます）。ここで重点を置くのは、以下のポイントです：マウスを移動すると、エラストックドロップダウンメニューが下滑り、マウスを離すと、エラストックドロップダウンメニューが上滑ります。前述の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プラグインの内容であり、アニメーションの効果を設定します。
以上は、編集者が皆様に紹介したjQueryです。+CSS3以下は、一般的に広く使用されるナビゲーションバーの作成例を詳細に説明し、皆様に役立つことを願っています。何かご不明な点がございましたら、コメントを残してください。編集者は迅速に回答いたします。皆様の呐喊教程サイトへのサポートに感謝します。
声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーにより自発的に提供された内容であり、本サイトは所有権を有しない、人間による編集もなく、関連する法的責任も負いません。著作権に疑われる内容がある場合は、メールを送信して：notice#oldtoolbag.com（メールを送信する際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がとれましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。）