Responsive Menu Using CSS and JavaScript

Submitted by argie on Tuesday, December 3, 2013 - 14:36.
Language
HTML/CSS
This code will teach you on how to apply responsive menu in responsive website. I only Used CSS and JavaScriptfor this code. This code is easy to implement in your website. The feature of this code is it will automatically adjust the design of the menu when the page size change. To understand more fallow the steps bellow:

Creating Our Display

Copy the code bellow and save it as "index.html". This file includes our JAVASCRIPT, HTML tag and linking our CSS file.

Linking Our CSS and Creating the JAVASCRIPT For Drop down Effect

Copy and paste the code bellow under the head tag of your index.html file.
  1. <link rel="stylesheet" href="style.css" media="screen">
  2. <!-- javascript -->
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  4. </script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("#resmenu").click(function(){
  8.         $("#menudo").slideToggle("slow");
  9.   });
  10. });
  11. </script>

Creting Our UL LI Tag For Our Menu

Copy and paste the code bellow under the body tag of your index.html.
  1. <div id="menu">
  2.         <ul>
  3.                 <li><a class="active" href="#">Menu 1</a>
  4.                         <ul>
  5.                                 <li><a href="#">Menu 1.1</a></li>
  6.                                 <li><a href="#">Menu 1.2</a>
  7.                                         <ul>
  8.                                                 <li><a href="#">Menu 1.2.1</a></li>
  9.                                                 <li><a href="#">Menu 1.2.2</a></li>
  10.                                         </ul>
  11.                                 </li>
  12.                         </ul>
  13.                 </li>
  14.                 <li><a href="#">Menu 2</a>
  15.                         <ul>
  16.                                 <li><a href="#">Menu 2.1</a></li>
  17.                                 <li><a href="#">Menu 2.2</a>
  18.                                         <ul>
  19.                                                 <li><a href="#">Menu 2.2.1</a></li>
  20.                                                 <li><a href="#">Menu 2.2.2</a></li>
  21.                                         </ul>
  22.                                 </li>
  23.                         </ul>
  24.                 </li>
  25.                 <li><a href="#">Menu 3</a></li>
  26.                 <li><a href="#">Menu 4</a></li>
  27.                 <li><a href="#">Menu 5</a></li>
  28.                 <li><a href="#">Menu 6</a></li>
  29.         </ul>
  30. </div>
  31.  
  32. <div id="resmenu">
  33.         <div id="lineline">
  34.                 <div id="linebar">
  35.                 </div>
  36.                 <div id="linebar">
  37.                 </div>
  38.                 <div id="lastline">
  39.                 </div>
  40.         </div>
  41.         Menu
  42. </div>
  43. <div id="menudo">
  44. </div>

Writing Our JAVASCRIPT

The code bellow will allow us to duplicate the content of our #menu tag and display in our #menudo tag. Copy the code bellow and paste under the body tag.
  1. <script type="text/javascript">
  2.  
  3.    var MyDiv1 = document.getElementById('menu');
  4.    var MyDiv2 = document.getElementById('menudo');
  5.    MyDiv2.innerHTML = MyDiv1.innerHTML;
  6.  
  7. </script>

Creating Our CSS Style

The code bellow will design our display page and do the changing menu design effect when the size of the page will change. Copy the code bellow and save it as "style.css".
  1. body {
  2.         margin: 0;
  3.         font-family: arial;
  4.         line-height: 1.5em;
  5. }
  6. #menu ul li:hover > ul {
  7.         display: block;
  8. }
  9. #menu ul li a:hover > ul {
  10.         display: block;
  11. }
  12. #menu{
  13.         width: auto;
  14.         margin-top: 11px;
  15.         margin-left: 20px;
  16. }
  17. #menu ul ul {
  18.         text-align:left !important;
  19.         display: none;
  20. }
  21. #menu ul {
  22.         list-style: none outside none;
  23.         display: block;
  24.         line-height:1px;
  25.         padding:0;
  26. }
  27. #menu ul:after {
  28. display: block;
  29. }
  30. #menu ul li {
  31.         float: left;
  32.         position:relative;
  33.         line-height:19px;
  34. }
  35. #menu > ul > li > a:hover {
  36.         border-bottom: 4px solid #0097C4 !important;
  37.         color:#0097C4;
  38.         background-repeat: repeat;
  39. }
  40.  
  41. #menu ul li a {
  42.         color: #666666;
  43.         font-size: 12px;
  44.         padding: 27px 15px 33px 15px;
  45.         text-decoration: none;
  46.         text-transform: uppercase;
  47.         border-bottom: 4px solid #00FF00 !important;
  48.         display: block;
  49.         position: relative;
  50.         transition: all 0.2s linear 0s;
  51.         position:relative;
  52. }
  53. #menu .active{
  54.         border-bottom: 4px solid #0097C4 !important;
  55.         color:#0097C4;
  56.         background-repeat: repeat;
  57. }
  58. #menu ul ul {
  59.         border-top: 1px solid #ECECEC !important;
  60.         position: absolute;
  61.         z-index:1;
  62.         background-color: #FFFFFF;
  63.         border: 1px solid #ECECEC;
  64.         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  65.         margin-left:-1px !important;
  66.         margin-top: 1px !important;
  67. }
  68. #menu ul ul li {
  69.         float: none;
  70.         position: relative;
  71.         margin-right: 0 !important;
  72.         width:230px;
  73.         line-height:19px;
  74.         margin: -1px 0 0;
  75.         border-left: medium none;
  76. }
  77. #menu ul ul li a {
  78.         font-size: 12px;
  79.         padding: 8px 10px !important;
  80.         text-transform: uppercase;
  81.         border: medium none !important;
  82.         border-bottom: 1px solid #ECECEC !important;
  83. }      
  84. #menu > ul > li > ul > li > a:hover {
  85.         color: #0097C4 !important;
  86. }
  87. #menu ul ul ul {
  88.         position: absolute; left: 100%; top:0;
  89.         width:230px;
  90. }
  91. #menu ul ul ul li a {
  92.         padding: 8px 10px;
  93. }
  94. #menu ul ul ul li a:hover {
  95.         color: #0097C4 !important;
  96. }
  97.  
  98. #resmenu{
  99.         display: none;
  100.         background-color: #555555;
  101.    color: #FFFFFF;
  102.    cursor: pointer;
  103.     font-size: 23px;
  104.     padding: 10px;
  105. }
  106. #linebar {
  107.    background-color: #FFFFFF;
  108.    height: 4px;
  109.     margin-bottom: 4px;
  110. }
  111. #lineline {
  112.    float: left;
  113.     height: 19px;
  114.     margin-right: 7px;
  115.     width: 20px;
  116.         margin-top: 1px;
  117. }
  118. #lastline {
  119.    background-color: #FFFFFF;
  120.    height: 4px;
  121. }
  122. #menudo{
  123.         display: none;
  124.         background-color: #555555;
  125. }
  126. a {
  127.         text-decoration: none;
  128. }
  129. #menudo ul {
  130.    margin: 0;
  131.         padding: 0;
  132.         list-style: none;
  133. }
  134. #menudo ul ul li a {
  135.         padding-left: 20px;
  136. }
  137. #menudo ul ul ul li a {
  138.         padding-left: 30px;
  139. }
  140. #menudo ul li {
  141.    border-top: 1px solid #747474;
  142. }
  143. #menudo ul li a {
  144.    color: #FFFFFF;
  145.    display: inline-block;
  146.     font-size: 17px;
  147.     padding: 10px 0 10px 10px;
  148. }
  149. @media only screen and (max-width: 767px) {
  150. #menu {
  151.         display: none;
  152. }
  153. #resmenu{
  154.         display: block;
  155. }
  156. }
  157. @media only screen and (min-width: 480px) and (max-width: 767px) {
  158. #menu {
  159.         display: none;
  160. }
  161. #resmenu{
  162.         display: block;
  163. }
  164. }
You can download the running version of this code bellow.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
Responsive Menu
Responsive Menu using CSS and JAVASCRIPT

Add new comment

About text formats
  • 277 views