【jQuery】固定配置レスポンシブ対応ナビResponsive & Fixed One Page Nav

fixed-nav
このプラグインはナビゲーションを固定配置させてスクロールをしても常に表示。1ページサイトなどで見かけるタイプのナビゲーションです。レスポンシブ対応なので幅を狭めてみたり、スマホで確認して頂いたらわかりやすいですが、40em以下の幅になるとハンバーガーアイコンが表示されます。

CSS

<link rel="stylesheet" href="css/styles.css">

HTMLマークアップ

<nav class="nav-collapse">
<ul>
<li class="menu-item active"><a href="#home" data-scroll>Home</a></li>
<li class="menu-item"><a href="#about" data-scroll>About</a></li>
<li class="menu-item"><a href="#projects" data-scroll>Projects</a></li>
<li class="menu-item"><a href="#blog" data-scroll>Blog</a></li>
</ul>
</nav>

JS

/body前に書きます。

<script src="js/responsive-nav.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
 

【jQuery】固定配置レスポンシブ対応ナビResponsive & Fixed One Page Nav

  • LATEST
  • RELATED
  • POPULAR