jQuery

【jQuery】レスポンシブ対応、サイドナビゲーションシステムjQuery Side Penal

October 25, 2018
jQuery Side Penal Navigation

jQuery Side Penal Navigationはレスポンシブ対応のサイドナビゲーションシステム。

How to Use

ファイルをインクルード。

   <!-- Font Awesome-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

   <!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <!--Side Penal CSS-->
<link rel="stylesheet" href="css/side-penal.css" />

   <!--Side Penal JS-->
<script src="js/jquery.side.penal.js"></script>

Side Penalを開くための空のButton要素を作成

<button class="penal-trigger"></button>

HTML構造

<!--Side Penal Start-->
<section class="side-penal">

<div class="penal-widget top-header">
<h2> jQuery Side Penal® </h2>
   <i class="tagline"> Tag line text goes here.</i>

<menu class="top-links">
<menuitem> <a href="#2"> Home </a> </menuitem> 
<menuitem> <a href="#2"> About</a> </menuitem> 
<menuitem> <a href="#2"> Contact </a> </menuitem> 
<menuitem> <a href="#2"> Blog </a> </menuitem> 
</menu>

</div>

<select class="penal-select">

<option> Option Bar</option>
<option> Option two</option>
<option> Option three</option>

</select>

<ul class="penal-list">
<li><a href=#1">Side Penal List Item </a></li>
<li> <a href=#1">Second Item </a></li>
<li> <a href=#1">Third Item </a></li>
<li> <a href=#1">Fourth Item </a></li>
<li> <a href=#1">Penal item six </a></li>
</ul>

<div class="penal-widget toggle-switch">
<h3> Toggle Options</h3>
<ul class="toggle-buttons">
<li> Switch Me </li>
<li> Switch Me </li>
<li> Switch Me </li>
</ul>


</div>


<div class="penal-widget about">
<h3> About </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

</div>

</section> 
<!--Side Penal End-->

MIT