【jQuery】レスポンシブスライダーナビゲーションSlyder

SlyderはレスポンシブスライダーナビゲーションjQueryプラグイン。

Install

<!-- In your <body> HTML tag -->
<!-- slyder faq -->
<ul class="slyder-nav">
<!-- 1 -->
<li class="s-item">
<h3>
<a href="#" class="s-link">Question 1 &rsaquo;</a>
</h3>
<ul class="s-hidden">
<li class="s-back">
<a href="#" class="s-link">&lsaquo; Question 1</a>
</li>
<!-- 1.1 -->
<li class="s-item">
<h3>
<a href="#" class="s-link">Question 1.1 &rsaquo;</a>
</h3>
<div class="s-hidden">
<p class="s-back">
<a href="#" class="s-link">&lsaquo; Question 1.1</a>
</p>
<div class="s-content">
<p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices.
Praesent sit amet aliquet purus, varius tempus augue.
Aliquam nec diam lacinia, porta enim eget, venenatis purus.
Praesent mollis nisi a diam volutpat suscipit.
Nam pretium elit mauris, eget laoreet massa scelerisque in.</p>
</div>
</div>
</li>
<!-- 1.2 -->
<li class="s-item">
<h3>
<a href="#" class="s-link">Question 1.2 &rsaquo;</a>
</h3>
<div class="s-hidden">
<p class="s-back">
<a href="#" class="s-link">&lsaquo; Question 1.2</a>
</p>
<div class="s-content">
<p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices.
Praesent sit amet aliquet purus, varius tempus augue.
Aliquam nec diam lacinia, porta enim eget, venenatis purus.
Praesent mollis nisi a diam volutpat suscipit.
Nam pretium elit mauris, eget laoreet massa scelerisque in.</p>
</div>
</div>
</li>
</ul>
</li>
<!-- 2 -->
<li class="s-item">
<h3>
<a href="#" class="s-link">Question 2 &rsaquo;</a>
</h3>
<div class="s-hidden">
<p class="s-back">
<a href="#" class="s-link">&lsaquo; Question 2</a>
</p>
<div class="s-content">
<p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices.
Praesent sit amet aliquet purus, varius tempus augue.
Aliquam nec diam lacinia, porta enim eget, venenatis purus.
Praesent mollis nisi a diam volutpat suscipit.
Nam pretium elit mauris, eget laoreet massa scelerisque in.</p>
</div>
</div>
</li>
<!-- 3 -->
<li class="s-item">
<h3>
<a href="#" class="s-link">Question 3 &rsaquo;</a>
</h3>
<ul class="s-hidden">
<li class="s-back">
<a href="#" class="s-link">&lsaquo; Question 3</a>
</li>
<!-- 3.1 -->
<li class="s-item">
<h3>
<a href="#" class="s-link">Question 3.1 &rsaquo;</a>
</h3>
<ul class="s-hidden">
<li class="s-back">
<a href="#" class="s-link">&lsaquo; Question 3.1</a>
</li>
<!-- 3.1.1 -->
<li class="s-item">
<h3>
<a href="#" class="s-link">Question 3.1.1 &rsaquo;</a>
</h3>
<div class="s-hidden">
<p class="s-back">
<a href="#" class="s-link">&lsaquo; Question 3.1.1</a>
</p>
<div class="s-content">
<p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices.
Praesent sit amet aliquet purus, varius tempus augue.
Aliquam nec diam lacinia, porta enim eget, venenatis purus.
Praesent mollis nisi a diam volutpat suscipit.
Nam pretium elit mauris, eget laoreet massa scelerisque in.</p>
</div>
</div>
</li>
<!-- 3.1.2 -->
<li class="s-item">
<h3>
<a href="#" class="s-link">Question 3.1.2 &rsaquo;</a>
</h3>
<div class="s-hidden">
<p class="s-back">
<a href="#" class="s-link">&lsaquo; Question 3.1.2</a>
</p>
<div class="s-content">
<p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices.
Praesent sit amet aliquet purus, varius tempus augue.
Aliquam nec diam lacinia, porta enim eget, venenatis purus.
Praesent mollis nisi a diam volutpat suscipit.
Nam pretium elit mauris, eget laoreet massa scelerisque in.</p>
</div>
</div>
</li>
</ul>
</li>
<!-- 3.2 -->
<li class="s-item">
<h3>
<a href="#" class="s-link">Question 3.2 &rsaquo;</a>
</h3>
<div class="s-hidden">
<p class="s-back">
<a href="#" class="s-link">&lsaquo; Question 3.2</a>
</p>
<div class="s-content">
<p>Vivamus id nulla orci. Integer scelerisque ut lacus a ultrices.
Praesent sit amet aliquet purus, varius tempus augue.
Aliquam nec diam lacinia, porta enim eget, venenatis purus.
Praesent mollis nisi a diam volutpat suscipit.
Nam pretium elit mauris, eget laoreet massa scelerisque in.</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
//in your main JS file
$('.slyder-nav').slyder({
back: '.s-back .s-link',
current: 's-current',
hidden: 's-hidden',
item: '.s-item',
link: 'h3 .s-link',
wrapper: 'slyder-wrapper'
});

MITライセンス

 
slyder

【jQuery】レスポンシブスライダーナビゲーションSlyder

  • LATEST
  • RELATED
  • POPULAR