Responsive Side Bar Menu Using HTML JavaScript

In this tutorial, we are going to learn about simple responsive side bar menu using HTML JavaScript. This side bar is applicable to any gadgets. You can use it in your certain site. It can cover up an unending number of sub menus, thus , gives infinite contents. This responsive menu can also be used with mobile devices of smaller screens for all the sub menus can just be stacked in the main menu. It can conserve space and accessible to devices of any size.

Directions:

First: Kindly copy the following code to the HEAD section of your page.
  1. <meta name="viewport" content="width=device-width">
  2. <link rel="stylesheet" type="text/css" href="style.css">
  3. <script src="menu1.js"></script>
  4. <script src="menu_js.js">
  5.  
  6. jQuery(function(){
  7. sidebarmenu.init({
  8. menuid: 'mysidebarmenu'
  9. })
  10. })
*Download the sourcecode for the external files above.
  • style.css
  • menu1.js
  • menu_js.js
Second: Simply copy the code below to the BODY section of your page.
  1. <nav id="mysidebarmenu" class="sidebarmenu">
  2. <ul>
  3. <li><a href="http://www.sourcecodester.com/">Home</a></li>
  4. <li><a href="#">Programming</a>
  5. <div>
  6. <p>Do you have source code, articles, tutorials, web links, and books to share? You can write your own content here. You can even have your own blog. Submit now...</p>
  7.  
  8. <ul>
  9. <li><a href="#">Programming 0.1</a></li>
  10. <li><a href="#">Programming 0.2</a></li>
  11. <li><a href="#">Programming 0.3</a>
  12. <li><a href="#">Programming 0.4</a>
  13. <div>
  14. <p><h3><a href="http://www.sourcecodester.com/">SOURCECODESTER</a></h3>
  15. <a href="http://www.sourcecodester.com/"><img src="images/logo.jpg" width="250px" height="50px"></a>
  16. </p>
  17. </div>
  18.  
  19. <li><a href="#">Programming 0.5</a></li>
  20. </ul>
  21. </div>
  22. </li>
  23. <li><a href="#">Mobile</a>
  24. <ul>
  25. <li><a href="#">Mobile 1.1</a></li>
  26. <li><a href="#">Mobile 1.2</a></li>
  27. <li><a href="#">Mobile 1.3</a>
  28. <ul>
  29. <li>Mobile 1.3.1</li>
  30. <li>Mobile 1.3.2</li>
  31. <li>Mobile 1.3.3</li>
  32. </ul>
  33. </li>
  34. <li><a href="#">Mobile 1.4</a></li>
  35. <li><a href="#">Mobile 1.5</a></li>
  36. <li><a href="#">Mobile 1.6</a></li>
  37. <li><a href="#">Mobile 1.7</a></li>
  38. </ul>
  39. </li>
  40. <li><a href="#">Blog</a></li>
  41. <li><a href="#">Articles</a>
  42. <ul>
  43. <li><a href="#">Articles 2.1</a></li>
  44. <li><a href="#">Articles 2.2</a></li>
  45. <li><a href="#">Articles 2.3</a></li>
  46. <li><a href="#">Articles 2.4</a></li>
  47. <li><a href="#">Articles 2.5</a></li>
  48. <li><a href="#">Articles 2.6</a></li>
  49. </ul>
  50. </li>
  51. <li><a href="#style/">Tutorials</a></li>
  52. </ul>
  53. </nav>

Add new comment