ハンバーガーメニューの非表示、単一ページナビゲーションプラグイン-jquery.singlePageNav.min.js、
6170 ワード
単一ページナビゲーションプラグインは、ナビゲーションバーやサイドナビゲーションをクリックすると、クリックしたコンテンツ領域に自動的に上下に移動します.Bootstrapで応答式ナビゲーションバーを書くと小さな画面の下にハンバーガーメニューが表示されますが、ハンバーガーメニューのサブメニューをクリックすると、ハンバーガーメニューを自動的に上に縮小するにはどうすればいいですか?3.jsの2段目を見てハンバーガーメニューを隠す.
プラグインのダウンロード:http://download.csdn.net/detail/erdouzhang/9775622
1.htmlページ導入カード
jquery.singlePageNav.min.jsプラグインをindex.htmlページに導入します.
2.ナビゲーションバーulリストのnavを見つける
私のナビゲーションバーはクラス
3.js
navにjs、すなわち
プラグインのダウンロード:http://download.csdn.net/detail/erdouzhang/9775622
1.htmlページ導入カード
jquery.singlePageNav.min.jsプラグインをindex.htmlページに導入します.
<script src="lib/jquery.singlePageNav.min.js">script>
2.ナビゲーションバーulリストのnavを見つける
私のナビゲーションバーはクラス
.nav
で、ulにid値id="nav"
を追加することもできます.<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a href="#" class="navbar-brand"> a>
div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"> a>li>
<li><a href="#"> a>li>
<li><a href="#"> a>li>
<li><a href="#"> a>li>
ul>
div>
nav>
3.js
navにjs、すなわち
.singlePageNav()
のナビゲーションバーの高さ70 px、すなわち70 pxを下方にシフト.$(function(){
//
$('.nav').singlePageNav({
offset:70
});
//
$('.navbar-collapse a').click(function(){
$('.navbar-collapse').collapse('hide');
});
});