How to Create Swipe Responsive Navigation Menu

Submitted by alpha_luna on Thursday, August 4, 2016 - 13:31.
If you are looking for Swipe Responsive Navigation Menu then you are at the right place. This is a mobile friendly swipe navigation menu in your page. We are going to use responsively jQuery navigation plugins which we will be going to collapse your navigation menu then the swipe function will run. Kindly take a look at the process below to create swipe navigation menu.

How to create it.

Kindly copy and paste this JavaScript files in your created page. 
  1. <script src="javascripts/jquery-1.12.3.min.js"></script>
  2. <script src="javascripts/underscore-min.js"></script>
  3. <script src="javascripts/jquery.mousewheel.js"></script>
  4. <script src="javascripts/all.js"></script>
This is our CSS file which contains the swipe navigation plugins, put it in your HEAD tag of your page. 
  1. <link href="stylesheets/swipe.css" rel="stylesheet" type="text/css">
Lastly, we are going to create our Markup header menu navigation to your page. 
  1. <header class='top swipe-menu js-swipenavigation'>
  2.   <ul>
  3.     <li>
  4.       <a href='#'>
  5.        <i class="fa fa-home"></i> Home
  6.       </a>
  7.     </li>
  8.     <li>
  9.       <a href='#'>
  10.         Programming
  11.       </a>
  12.     </li>
  13.     <li>
  14.       <a href='#'>
  15.         Tutorials
  16.       </a>
  17.     </li>
  18.     <li>
  19.       <a href='#'>
  20.         Articles
  21.       </a>
  22.     </li>
  23.     <li>
  24.       <a href='#'>
  25.         Blog
  26.       </a>
  27.     </li>
  28.     <li>
  29.       <a href='#'>
  30.         Contact Us
  31.       </a>
  32.     </li>
  33.     <li>
  34.       <a href='#'>
  35.         FAQ
  36.       </a>
  37.     </li>
  38.     <li>
  39.       <a href='#'>
  40.         Settings
  41.       </a>
  42.     </li>
  43.     <li>
  44.       <a href='#'>
  45.         Login
  46.       </a>
  47.     </li>
  48.     <li>
  49.       <a href='#'>
  50.         Logout
  51.       </a>
  52.     </li>
  53.   </ul>
  54.   <a class='next' href='#'>
  55.     <i class='fa fa-caret-right'></i>
  56.   </a>
  57.   <a class='back' href='#'>
  58.     <i class='fa fa-caret-left'></i>
  59.   </a>
  60. </header>

Output

Result
Note: You can customize your swipe navigation menu whatever your desired design by changing the CSS. Hope that this simple yet useful tutorials that I created may help you to your future projects. For the full source code, kindly click the "Download Code" button below. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 249 views